Ultra Supplies
UX case study
This case study was done as part of an open brief to redesign a e-commerce site for web or mobile.
Ultra Supplies is a primarily B2B print shop that urgently needed an update to keep up with the times. I redesigned their website to not only be visually appealing but to also attract more B2C customers by simplifying the printing, customization, and purchasing processes.
Project details
Roles
For this project, I assumed the roles of
-
User Experience (UX) Designer
-
User Interface (UI) Designer
​
Deliverables
UX/UI Design
-
One-on-one user interviews
-
Personas
-
Competitive and comparative analysis
-
Card sorting
-
Site map
-
Low-fidelity wireframes
-
High-fidelity mockups and prototypes
-
Usability tests and findings
Project Specifications
Duration: 2 weeks
Tools:
-
Figma
-
OptimalSort
Who was I designing for?
My aim was to improve the e-commerce platform for the B2C customers. In order to do this, I needed to understand these users and uncover their needs, motivations, and frustrations. To find out more, I begun with one on one interviews to
​
-
Investigate user preferences and understand the factors influencing user choices in online printing
-
Understand users preferred devices used
-
Learn the key pain points in the process of printing an item
-
Validate that users prefer to do online printing
​
After completing the interviews and affinity mapping, I developed the user personas.
​
Meet the users
Connie and Edwin are the B2C customer personas that take priority in the website redesign.
However, the B2B clients needs are also taken into account and represented by Kate, the proto persona that is based on Ultra Supplies existing clientele.
Connie
Gift giver
Connie uses printing services to make personalized gifts, but is not familiar with editing software. As she needs help with formatting and layouts, ease of use is as important as print quality.
Edwin
Small business owner
In addition to his day job, Ed runs a small business selling prints, t-shirts and totebags at events and through online stores. He wants convenience, fast turn around and affordable pricing.
Kate
Admin executive
Kate is a persona based on the existing B2B users of Ultra Supplies. She needs a printing service for marketing materials, company newsletters, and office stationery.
Key findings
User needs, motivations, and pain points
Small business owners
Users who are working full time and running a side hustle need a efficient, fast, and convenient way to print items outside of working hours because they are overwhelmed with too many tasks and short on time.
Gift givers
Users who print gifts and artwork are anxious about quality and want assurance that the print will match closely to the digitized file because it costs them time, effort, and money to reprint if the result is not good.
PC users
All users preferred to use PC for customized printing in order to see their designs more clearly.
Benchmarking
Who are the competitors?
I did a competitive analysis to find out what were the common features found in the websites of other industry players.
​
I also took reference from best in class websites to learn best practices for a comparative analysis. My goal was to achieve consistency in the user experience.
​
Websites I looked at were
Some key findings were a need for
​
-
Online payment
-
Clear instructions for the image upload process when printing
-
Web based customization process as Ultra Supplies was using email to take orders
-
Improved site navigation
-
Featured products on the home page
-
A consistent design pattern, especially for the checkout process
-
Guest checkout
​
Proposed solutions
​
Streamline the online ordering process by integrating payment and image upload to the website.
​
Include product reviews to the website to assure users about product quality.
Building a design framework
To improve the site navigation, I did a card sort with 28 participants.
The results of this survey guided the structure of the information architecture for the Ultra Supplies website.
​
Due to the B2B users represented by Kate, there is an added "Corporate" and "Get Quote" in the navigation.
From sketches to prototypes
When designing the prototype and other UI components, I maintained brand coherence by utilising the preexisting brand colours.
Prototype and user flow
​
My goal is to understand how the customer navigates the site to buy t- shirts, starting from home page to checkout.
​
And this user flow is to find out how users utilize the review function to check for and give feedback on product quality.
Usability tests
Glows and grows
Customization and online purchase were well received
During the user testing, users found this process straightforwards and commented that it was similar to other online shopping experiences.
Adjustment to global navigation was needed
During the user testing, I noticed that users had to mouse over the navigation bar to search for items. I resolved this by putting all services and products on a mega menu so that services and products could be seen at a glance.
User feedback for the review function
Users found the product reviews process to be unexpected.
Users felt that
-
The review function should be for verified payments only
-
After they receive the purchase, there should be an email with a link to write a review
-
They would only write a review if invited to do so
Iteration
Besides some minor adjustments to optimize the layout, I decided to redesign the site navigation and the user flow for the review process. User feedback made it clear that the original flow was based on an older design which was not in line with users expectations.
I listened to user stories on their recent experiences to redesign the user flow for this process.
​
For the site navigation, I retained the structure but services and products can now be seen at a glance.
​
Final thoughts
Be sensitive towards user actions
During the usability test, none of the users commented on the initial site navigation. I only realized that the site navigation could be optimized further through observation of their behavior.
What I learned
I made too many assumptions when it came to designing the user flow for leaving a review.
Users are sensitive to design patterns and user flows and they very quickly picked up on missing components in the user flow.
​
Their feedback during the usability testing was incredibly valuable as they pointed me towards the solutions needed.
Final prototype
With those solutions in hand, I've come to the end of the Ultra Supplies case study. The figma prototype can be found here
Thank you for following along on this process. Feel free to contact me or connect on LinkedIn :)