Petite Studio NYC
User flow optimization | UX research & strategic thinking | E-commerce shopping design
Petite Studio is a company providing high-quality, stylish, and ethically made clothing specifically for petite women. During my internship, I visualized our research outcomes by creating a persona, a legible user journey map, and flow diagrams. After understanding how our product fits into the user’s life, I optimized the user flow of existing UIs to be cleaner and more organized, which received positive feedback during the usability test. I also designed the limited product page for the cooperating brand (Careertu). Besides that, I did some visual designs, such as email promotion.
Timeline:
4 months
Role:
UX research, UX design, visual design, prototype
Team:
Self project
Tools:
Figma, Adobe Illustrator, Adobe Photoshop, Adobe After Effects
OVERVIEW
Challenges.
To understand the e-commerce market, empathize with customers and uncover their core
pain points when shopping and browsing the Petite Studio's website. To break down the user problems for both desktop and mobile and work on them in parallel.
Goals.
• For the business: Increase subscriptions and sales.
• For users: create a fluent purchasing experience when browsing the website; optimize the membership
experience; reduce some frictions of the website.
Design process.
RESEARCH
Usability study.
About the desktop version.
• Type size of the menu bar is tiny and overlaps with
the picture. It's hard to read;
• Difficult to locate "shipping & return" and "share"
options on product pages;
• Texts are tiny and crowded; show weak hierarchy;
• Account page creates confusion and some
cognitive friction;
About the mobile version.
• Menu is too long; too many sub-categories there;
• Sign-in button hides in the account section; no
sign-in option in the menu;
• Filters on the product page is long, and some
functional buttons are easy to be ignored, such as
"sort by" and "select an option";
• Users want to edit the added item directly within
the shopping cart;
• Prefer more price information (ie. promo code)
and checkout options (ie. PayPal) in the shopping
cart before the final checkout process.
Competitor analysis.
DEFINE
Goal.
The main goal during the define phase was to synthesize our research and interview findings and clarify the details of what will be created and optimized. Basically, we agree with the current user flow, but we also created a new one to better understand how a user would navigate through the structure of the site. We focused on the task of registration, the sign-in process, and how the users get to purchase an item.
Workflow.
Customer journey map.
DESIGN
Wireframes.
Desktop
Mobile
Final design.
Desktop.
Mobile.
Prototype.
Email promotion design.
_gif.gif)
FEEDBACK
Usability study.
We conducted usability tests for the optimized website with some participants. We interviewed 5 people and asked them to finish specific tasks. Compared with current UIs, participants liked the clear layout of redesigned one. For the desktop version, users preferred the new layout of the "Account" page with an organized grid system, and the individual "My Cart" page made more sense. The most successful improvement of the mobile version was the menu. Users like the new layout of the collapsed menu. They feel it's easier to sign in to the account on the new version. Also, redesigned filters and shopping carts on both desktop and mobile received positive feedback. Generally, we gathered valuable qualitative insight into how users completed different tasks on the redesigned website.
REFLECT
Takeaway.
After wrapping up our usability tests, we found some areas of improvement that would be implemented within the allocated time and budget. We believe more usability tests would uncover additional pain points and lead us to a better design. One big takeaway from this real-industry project was understanding the importance of empathy and the value of user research.
