RANDY YIP
Wimbledon Fotos
Prolog:
Since it was a concept to completion project, we implemented the Scrum framework to tackle different out-of-plot requests and produce a better end product. We set up 4 hours meeting for a comprehensive sprint planning. We identified the corporate goals, prioritise the user cases, and developed the brand attributes. Since there are many high scored user stories at the front, the team would have to make a lot of quick decisions and keep the growth in production in order to meet the sprint goal.
Sector:
Art and Creative, E-commerce
Project Timeline:
6 Weeks
Responsible Position:
User Research, Interaction, Visual design, Prototyping & Testing
Team:
User Research, Interaction, Visual design, Prototyping & Testing
Goal:
Create a photo printing website with photo upload and management backend
Overview:
The photo print shop want to create its own photo upload system and connected with E-commerce function. To fit different user stories, we would need to prioritise the functions.
I am a half Scrum Master and the UX Designer in the team
I organised the scrum team for the project before the Scrum Master gets on board. The Scrum Master join the team a week after Sprint Planning, therefore, I was responsible to assist the product owner (Client) to prioritise user stories and break it down to small enough size for each sprint.
After the Scrum Master arrived, I went back to my development team role as a UX Designer. I conduct the earlier user research, prioritise the user needs, and provides the solution with the prototype , wireframe, and interactive mock-ups. Also, I am responsible for leading UX and UI across key parts of the website. A key highlight from the project is listed below:
I Implemented a design process with a UI/UX Designer. This has helped our team establish more structure to how we conduct our work and allow other teams to gain visibility across our upcoming sprints.
Improved usability across the devices. All usability tests were conducted in-house except for the final user satisfaction report. Since we established a scrum team, we were able to conduct in-house UX research, usability testing and testing internally which accelerate our design process between designers and programmers.
Brand Attributes & Mission Statement
Target Groups - How to describe the target audience?
-
E-Shopper with online photo printing service experience
-
Photographers
-
E-Shopper with many self-phone pictures
Voice - How do we sound to customers?
Professional and On-time
Value - What tangible impact do we have on customers?
Vibe - How do customers describe the company?
Trustworthy and Professional
Simple and Straightforward process, Fast Delivery and On-time.
Feeling - How do customers feel after interacting with us?
Simple and easy
USP - How do our customers remember us?
Trustworthy
Design Methods & Model
Design Thinking
We have applied Design Thinking into the project which we used the lean design way of thinking to solve the complex situation with Emphasize, Define, Ideate, Prototype and Test.
Double Diamond
We have also implemented the Double Diamond model so we could get a better understanding of all potential user problems which strengthen our end-product quality. In the DD model, we focus on Discover, Define, Develop and Delivery.
We started the Double Diamond process to discover and define the pains, before going into the Develop stage, the Design Thinking kicked in to help the development team to gain a deeper understanding of all potential solutions.
Identify the Need
The Product Owner (client) has blue-sky concepts that build from an existing service provider. His idea had neither tested nor verified by the actual environment. Therefore, after defining the Brand Attributes, we conduct an early user research interview, 6 applicants, 2 from each target group, to collect users’ pain points and needs.
I was the coordinator of the user research interview, in charge of interview materials, documentation and post-research summary. Another UI/UX Designer was the moderator of the interview.
Research Goal:
-
Understanding the user goals and needs
-
Discover pain points with the existing service (Competitor website)
-
Quantified expectations and results of the service.
Formulating the Insights
After the interviews, I conducted an affinity diagram section to synthesis identified pains. We grouped these problems under common themes and features on the websites.
Prioritising the Tasks
I introduced Red Route Analysis to the team in order to prioritise usability issues. This method breakdown the user needs into the task and measure their task criticality based on the following variables:
Critical Level: how important is the task to the user ( 1 - lowest, 5 - critical)
Frequency: how many times would this task would be used in total participants (%)
We have listed all essential tasks in the Red Route Map so the whole team could have a consistent understanding of the project goal and priority.
Order within the Scrum Framework
I categorised the tasks into different Epics to provide the Scrum Team the visibility to key areas of the project and addressed the usability concern of each part. This borough a great insight into the team for what we are building and which one is more important.
The whole Scrum team agreed on the above order and decided to start the first sprint with Photo Upload System Epic.
Key Insatisfaction from the existing service
Based on the user research interviews conducted with 6 users, we had found the following concerns.
However, they also feel the presentation is easy and think
it might be a necessary evil to have the current UI.
83% of users felt that the step by step process increased their time cost
66% of users, including 2 professional photographers, reflected the current flow make it hard to undo their mistakes.
Since when they go back to the previous stage, the existing setting would be wiped.
33.3% of users feels the final step is too hard sales and meaningless. (2 E-Shoppers with online Photo Printing Experience)
0% Users would consider the add-on options in the final steps.
Reference Picture to existing issues
Drag and Drop Upload system
Uploading once at a time bring inconvenience
Forced Add-on Step for extra items, where 100% tested users skipped this step.
Ideating the Solutions
Based on the above-identified issues, I addressed these pains with these potential solutions:
Reducing the number of steps to shorten the user journey
Surfacing group listing fields for mass upload clients
Easy quantity change options to each individual product
Short-term memories saving for multiple photos editing
Autofill crop area if the user didn’t make any changes on cropping canvas
Highlight the winning product as the main tabs
Prioritising essential buttons to avoid extra information for non-editing users
Simplifying order documentation for print-house staff
I mocked up the wireframes to gather feedback from the Development Team, Product Owners and the users on the overall layout and structure of the website with the sitemap. This involved establishing a standardized visual hierarchy and layout for the end-product.
1) Select the size (product)
2) Upload images (Up to 200 pictures)
3) Crop your images or leave it be
4) Submit
Photos Upload Wireframe
Editing Canvas
Order Documentation
Since we have to make sure the factory workers (Print house workers) have an easy to understand documentation.
We design the printing order in the following order
Primary Folder -> Order number
Sub Folder -> Product Categories
File Name -> Order Number + Size + Extra option + Quantity
Since workers will only have access to the order, they are only allowed to see an order with a button to download uploaded pictures. The above methods could ensure the workers knowing which photo is for which clients and how many copies and attributes they need to be careful with.
Since it was a concept to completion project, we implemented the Scrum framework to tackle different out-of-plot requests and produce a better end product. We set up 4 hours meeting for a comprehensive sprint planning. We identified the corporate goals, prioritise the user cases, and developed the brand attributes. Since there are many high scored user stories at the front, the team would have to make a lot of quick decisions and keep the growth in production in order to meet the sprint goal.
Early User Testing
Early user testing took place after the wireframe with primary users in order to validate the new designs. I wrote a script included 2 different scenarios, the first one is to ask the user to upload 1 picture then checkout. The second case was to upload 5 pictures and change all pictures’ quantity made cropping.
During the test, I observed how they interacted with the prototype and how do they react to the buttons. The usability session revealed that it was less arduous and confusion to upload multiple pictures and made changes to each picture due to a shortened user journey. The result is very positive, the users' eyes flow test validated the user journey is simple to use since the visual hierarchy was built from top left to bottom right which consistent with their usual reading behavior.
Drag and Drop Upload system
Test Prototype - Cropping Canvas
Developing the Interactive Mock-up
I created my high fidelity mockups in Adobe XD and then exported an online link for user testing. I have also output the development mockups, also with an online link, where programmers could mouse over on the elements and read the correlated specification in CSS and HTML format. Also, they could make sticky notes on the development mockups to raise questions.
Since we are in the same development team, we clarified our concerns and report daily progress on the daily stand out which improved the team efficiency. During the sprint, I work closely with programmers to spec out any missing interactions that were not covered in the high fidelity mockups.
1st Beta Version - Upload Area
We added the reminder message before the fold line of the website, so users would realise if they want to edit, they can scroll down
We have also installed “Auto-Saving” Function in the website, so whenever the changes is made, after 2 second, they will be automatically saved. However, we still keep the save and update buttons in here since many users are used to their existence from other websites
Another thing we changed is the function button, we removed “Move” button, since from the user testing, no user will use this function. In addition, we removed “Crop” button as well, since the cropping mask will be shown around the picture, user just need to adjust the size of the cropping area. We also removed “Flip” Options, since in the past 2 testings, no users used that function.
The remaining 4 buttons we rearrange the position into 4 square corner where the interface would look clear and have a better hierarchy. We also improved the visual to be more rounded.
2nd User Testing
After developing the end-product, we ran another user testing with primary users to see if there are any concerns remain unsatisfactory. The results show users are happy with the current interface and user journey. However, there are also a few things that could be improved.
Cropping Mask detection
Both Photographer Testors reflected that the cropping mask does not follow the long edge of the photo. The cropping mask area should be able to detect if the photo is portrait or landscape.
EXIF Data handling
During the 2nd user testing, I and another UI/UX Designers found out when a huge amount of photos being uploaded, some photos will automatically be flipped. Photographer Testors comments that EXIF data who caused this situation.
Uploading time
50% of users reflect the loading time is too long, and there is no sign or reminder to tell users to wait.
After the test, we got 2 more sprints left to complete the project. Due to thoughtful sprint planning, the above concerns went right into the upcoming sprint, Enhance UX Epic. Thus, the product owner did not need to rearrange the user stories to obtain the mentioned improvement.
Feedback follow-up
We hosted a backlog specification meeting before the Enhance UX Epic sprint started to discuss the reflected concerns.
Cropping Mask auto adjustment
The development team added a code that allows the system to read the height and width of the photos before the cropping mask being generated. Thus, the cropping mask would be adjusted according to the picture size ensuring the inaccurate cropping mask frequency is minimized.
If the picture is in a 1 : 1 ratio, the cropping will not change to fit but the categories will automatically change to 1:1 square product.
Square Picture auto switch to Square Product
For a horizontal picture, the selected product will automatically apply to the canvas and auto cropped for the users.
Horizontal Picture - apply selected auto-crop
Portrait picture has the same setting as horizontal. The selected product will automatically apply to the canvas and auto cropped for the users.
Portrait Picture - apply selected auto crop
EXIF Data handling
With the aid of professional photographers’ feedback, we understand if the photo was taken from a professional camera, the photo itself would be embedded in the EXIF data. This information is useful for photographer to preview the photos on their computer. However, this affected our Cropping Mask Detection due to the EXIF data instruct the photo edge.
To encounter this data, we inserted a code that could eliminate the orientation data from the photo, so there will be no preset data that affect our detection.
Orientation from the EIXF data that
affect the Cropping Mask Detection
Uploading time
We have looked into a different source of CDM and file resizing methods. We added a loading screen and uploaded tick on the listing panel where end-users could be noticed the upload progress.
Enhanced UX
We added more signs in the panel such as “Click image to start editing your pictures.” and “Drag your image into the box to upload files”.
Other than sign, we moved up the essential button from under the cropping canvas to be above the canvas where users could navigate to the next step if they are not intending to do editing.
The team was decided to take out the “Update” button, however, we observed 83% testors would be clicked on the button. The UX team believes the update button is a usual behavior that users inherited from another website. Keeping the button would reduce their anxiety level towards a new system.
User Satisfaction Survey
After the second update, we have sent the target audience and 2nd Beta website to an outsource company to do the Satisfaction Survey. The report came back with a very positive number that 80% of users enjoyed the experience.
Project Summary:
After the official launch of the website, we have received a lot of good reviews that comments on the experience. One of the users sent positive feedback that this all-in-one process saved a lot of his time since he, as a professional photographer, has to upload 200 photos at a time, the current process allows him to edit while uploading which is perfect for him.
Key Takeaways:
Create a strategic plan to launch an MVP. This helps deal with ad-hoc requests that could potentially distract the project and helps deliver a quality product in time.
User testing doesn't end after development, we will do the testing periodically. Design and feedback are a constant iteration of improving the user experience for the end-user. Our motto is “Always find a way to listen to the end user's feedback.”
Involve engineering upfront. This helps to reduce any rework later on as an understanding of the technical limitations upfront. Since we are in the Scrum Framework, the programmer team understand the goal of the project, so during the website architecture planning, we have to leave some area for future code development.
OTHER PORTFOLIO
Ethical Fashion House
Marketplace
Platform
Building a customised
wholesaler to retailer
marketplace platform