Fynspo is a small startup e-commerce platform that aims to simplify fashion shopping by offering a one-stop shop for users to browse and purchase items from multiple favorite brands. As part of the design team invited by the founders, I focused on refining the onboarding process and addressing usability concerns within the mobile sitemap to enhance user experience and improve navigation flow.
Fashion
user interface
user experience
Research
user flow
wireframe
Design
system
figma
Fynspo 是一个 B2B 电子商务平台，旨在通过为用户提供一站式服务来浏览和购买来自多个喜爱品牌的商品，从而简化时尚购物。作为设计团队的一员，我专注于完善入门流程并解决移动站点地图中的可用性问题，以增强用户体验并改善导航流程。
时尚
figma
Jitter
研究
用户流程线框
设计系统
用户体验设计师
The initial onboarding process for the app was extremely basic, only consisting of sign-in screens with no additional guidance for users. The app lacked an introduction to its key features, and the sign-in page was disorganized, leading to user confusion.
To improve the quick overview and the benefit.
After the analysis, conducted an in-depth analysis of onboarding best
practices in the fashion industry, focusing on how similar apps guide
users through key features and personalization.
After meeting with the founder and analyzing provided data, I
evaluated the design using Nielsen's usability principles,
identifying key user pain points and categorizing findings into these
main areas for improvement.
To enhance the signup process for users, I created a user flow that includes an "Explore the App" page as the final step. This addition confirms the completion of the onboarding process and provides a clear entry point into the main app experience.
I developed wireframes for the new onboarding process, including the separated sign-in pages, interactive feature introduction screens, and the preference-setting feature.
To achieve visual unity, I helped confirm the design system foundation, basic colors and fonts, icons, buttons, etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Fynspo's main target group is young women who love shopping. Due to time constraints and limited access to user groups, however, if time permits, I will conduct one-on-one interviews with customers, user testing on prototypes, and observe how users go through the process. Are there any steps I haven't thought of without adding more burden to the user? How can I improve the design to make the onboarding process?
Early in the app's development, users struggled to find certain features, particularly saved items.
During the redesign process, I identified that saved items were not
intuitively placed on the dashboard, causing confusion for users.
People associate personal accounts with personalization
and private data management, and "saved items" is one of
them.
It separates browsing from managing saved items,
reducing cognitive load.
Users often switch between
exploring and reviewing saved items.
Major platforms like
Amazon and Zara use this approach.
It matches users'
experiences across various e-commerce platforms.
Treating "Terms" and "EULA" as prominent CTA
buttons on the main profile page isn't ideal. Why
These are
rarely clicked and don't need high visibility. They can distract
from core profile actions like editing preferences or viewing order
history.
Unlike "Submit Order" or "Save
Settings," legal terms don't prompt immediate user action.
They're informational, not interactive.
CTAs should
guide users to high-priority actions. Legal information is better
suited as subtle links or in an overlay, not as eye-catching
buttons.
Given these factors, placing "saved items" within the user
profile or a dedicated "favorites" section would likely
improve user experience and align with expectations.
To validate the decision, I created a key wireframes:
Before: Saved items were located on the dashboard’s home tab alongside
categories like "Collections" and "For You."
Informational links such as "Terms" and "EULA"
were prominent CTA buttons.
After: Saved items were moved
under the profile page for a more cohesive experience. The
"Terms" and "EULA" links were demoted to text
links at the bottom, while actionable buttons like "Edit
Preferences" and "Past Orders" took priority.
These changes enhance usability by placing saved items in an intuitive location, streamlining the profile page's visual hierarchy, and clearly separating exploration and personalization functions.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
