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.
.gif)
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.
After
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.
