Back Phone case personalization app
onllycase_mockup_2_1920x1280 1
OVERVIEW
Project background This mobile app allows users to design and order personalized phone cases by creating their own avatars, which are automatically adapted into various themed case designs. The goal was to create a seamless and playful experience that enables users to express their personality while making the purchase process smooth and intuitive.
The product combines avatar creation, e-commerce flow, and real-time customization preview—blending fun, creativity, and utility.
My role As one of the two UI/UX designers on the team, I was actively involved throughout the entire product design process. My responsibilities included conducting visual research, defining the user journey, designing user flows and wireframes, creating high-fidelity UI designs, building the design system, and collaborating with developers and the product team during agile sprints. I also participated in regular design reviews and stakeholder meetings to ensure alignment at every stage of the project.
APPROACH
Mood & Tone Research After aligning with stakeholders on the product’s core values and direction, I began researching appropriate mood and tone to guide the visual style. This involved exploring color palettes, typography, and visual motifs that would make the app feel creative, playful, and user-friendly. We curated visual references and developed style tiles to clearly communicate the intended look and feel. This helped keep our team and the client aligned on visual expectations throughout the design process.
ONNLYCASE_color_mood and tone
Customer Journey Mapping To ensure a seamless and thoughtful user experience, we invested a significant portion of each sprint into mapping the user journey. Our goal was to anticipate user needs, identify potential pain points, and build flows that were both engaging and intuitive. One of the key decisions was to introduce avatar creation early in the onboarding process, allowing users to immediately personalize their experience. We also accounted for edge cases, such as country-based restrictions, and worked to minimize unnecessary steps in the flow to reduce friction and encourage completion.
Customer-Experience-Journey-1024x796 1
Design System To maintain visual consistency and improve team efficiency, I helped develop a modular design system that evolved with each sprint. This included standardizing UI components such as buttons, input fields, modals, product previews, and layout grids. Each component was carefully documented and organized in Figma, making it easier for developers to implement and for designers to reuse and update assets as the app grew. By having a shared system in place, we were able to move faster while ensuring a cohesive and polished user interface.
KEY VISUALS
Avatar Creation Flow We designed a simple, three-step avatar creation process that allowed users to select a base character, customize their features, and preview the avatar on a phone case in real-time. This approach helped users immediately see the impact of their customizations and made the process feel rewarding and personal.
phone_avatar-scaled
Homepage Layout The homepage features a dynamic gallery of phone cases, each pre-populated with the user’s avatar. Users can filter by style, theme, or category (e.g., aesthetic, character, seasonal) to browse a wide variety of options. We focused on making the layout clean and easy to navigate while showcasing the user’s personalized avatar throughout.
phone_homepage-scaled
Product Details and Purchase Flow The product detail page includes a live preview of the customized case, a dropdown menu for selecting phone models, and contextual messaging based on region-specific restrictions (such as unavailable shipping destinations). We designed the checkout process to be fast and simple, especially for first-time users, while providing all necessary information up front to reduce confusion and abandoned carts.
phone_productdetail-scaled
Phone
Key Challenges & Insights One of the biggest challenges was designing a shopping experience that could flexibly adapt to different country restrictions without interrupting the user flow. This required conditional logic in both the design and development to handle region-specific availability.
Another insight came from balancing the fun and creative aspect of avatar design with the need to guide users toward the purchase journey. To solve this, we ensured the customization flow was engaging but streamlined, allowing users to complete their avatar quickly and move on to exploring case designs.
We also made a conscious effort to reduce friction by minimizing the number of steps needed to complete onboarding and purchase, while still providing clarity and control for users.
Tools & Technologies Figma for wireframing and prototyping
Miro for user journey mapping and brainstorming
InVision for interactive prototypes and stakeholder presentations
Back Phone case personalization app
onllycase_mockup_2_1920x1280 1
OVERVIEW
Project background This mobile app allows users to design and order personalized phone cases by creating their own avatars, which are automatically adapted into various themed case designs. The goal was to create a seamless and playful experience that enables users to express their personality while making the purchase process smooth and intuitive.
The product combines avatar creation, e-commerce flow, and real-time customization preview—blending fun, creativity, and utility.
My role As one of the two UI/UX designers on the team, I was actively involved throughout the entire product design process. My responsibilities included conducting visual research, defining the user journey, designing user flows and wireframes, creating high-fidelity UI designs, building the design system, and collaborating with developers and the product team during agile sprints. I also participated in regular design reviews and stakeholder meetings to ensure alignment at every stage of the project.
APPROACH
Mood & Tone Research After aligning with stakeholders on the product’s core values and direction, I began researching appropriate mood and tone to guide the visual style. This involved exploring color palettes, typography, and visual motifs that would make the app feel creative, playful, and user-friendly. We curated visual references and developed style tiles to clearly communicate the intended look and feel. This helped keep our team and the client aligned on visual expectations throughout the design process.
ONNLYCASE_color_mood and tone
Customer Journey Mapping To ensure a seamless and thoughtful user experience, we invested a significant portion of each sprint into mapping the user journey. Our goal was to anticipate user needs, identify potential pain points, and build flows that were both engaging and intuitive. One of the key decisions was to introduce avatar creation early in the onboarding process, allowing users to immediately personalize their experience. We also accounted for edge cases, such as country-based restrictions, and worked to minimize unnecessary steps in the flow to reduce friction and encourage completion.
螢幕截圖 2025-07-29 上午11.08.02 1
Design System To maintain visual consistency and improve team efficiency, I helped develop a modular design system that evolved with each sprint. This included standardizing UI components such as buttons, input fields, modals, product previews, and layout grids. Each component was carefully documented and organized in Figma, making it easier for developers to implement and for designers to reuse and update assets as the app grew. By having a shared system in place, we were able to move faster while ensuring a cohesive and polished user interface.
KEY VISUALS
Avatar Creation Flow We designed a simple, three-step avatar creation process that allowed users to select a base character, customize their features, and preview the avatar on a phone case in real-time. This approach helped users immediately see the impact of their customizations and made the process feel rewarding and personal.
phone_avatar-scaled
phone_homepage-scaled
Homepage Layout The homepage features a dynamic gallery of phone cases, each pre-populated with the user’s avatar. Users can filter by style, theme, or category (e.g., aesthetic, character, seasonal) to browse a wide variety of options. We focused on making the layout clean and easy to navigate while showcasing the user’s personalized avatar throughout.
Product Details and Purchase Flow The product detail page includes a live preview of the customized case, a dropdown menu for selecting phone models, and contextual messaging based on region-specific restrictions (such as unavailable shipping destinations). We designed the checkout process to be fast and simple, especially for first-time users, while providing all necessary information up front to reduce confusion and abandoned carts.
phone_productdetail-scaled
Phone
Key Challenges & Insights One of the biggest challenges was designing a shopping experience that could flexibly adapt to different country restrictions without interrupting the user flow. This required conditional logic in both the design and development to handle region-specific availability.
Another insight came from balancing the fun and creative aspect of avatar design with the need to guide users toward the purchase journey. To solve this, we ensured the customization flow was engaging but streamlined, allowing users to complete their avatar quickly and move on to exploring case designs.
We also made a conscious effort to reduce friction by minimizing the number of steps needed to complete onboarding and purchase, while still providing clarity and control for users.
Tools & Technologies Figma for wireframing and prototyping
Miro for user journey mapping and brainstorming
InVision for interactive prototypes and stakeholder presentations