work
TechFlipp Case Study
Designing Chi Chi, an e-commerce app from concept to delivery
Overview
I led the end-to-end design of Chi Chi, an e-commerce application, from early concept and product direction through final delivery.
Working with development stakeholders, I shaped flows, interface patterns, product screens, and delivery-ready assets for a coherent mobile shopping experience.
Goals:
Define a clear mobile commerce flow from discovery to checkout.
Create intuitive product browsing and purchase paths.
Deliver a polished, scalable UI system ready for implementation.
Role
Responsibilities
Collaborators
Timeline
Contractor engagement
The challenge
Business Need
Create a polished e-commerce product experience that supports business goals.
User Need
Give shoppers an intuitive mobile journey for browsing, evaluating, and buying products.
Item page
In person kickoff
I mapped user pain points and opportunities to simplify the mobile shopping journey.
We identified three focus areas that would ultimately evolve into three sections of the overall E2E flow:
Awareness
Enhance and streamline search functionality to improve item discoverability.
Consideration
Provide tools to compare and narrow down options quickly.
Decision
Organize product, cart, and checkout information to support confident purchasing.
problem to solve
Users need a clear shopping experience that keeps product discovery, evaluation, and purchase actions easy to understand.
quick_reference_all
Research
Framing the product experience
Emerging themes
Commerce essentials
Users need product information, imagery, pricing, and actions presented clearly.
Amazon: Clarifies key product information and purchase considerations.
Zoom: Keeps complex information easier to scan and revisit.
Wirecutter: Grades key features and highlights what matters most.
shopping flow
Support browsing, product detail, cart, and checkout decisions.
Wirecutter: Recommends items based on specific priorities or budgets.
Google Maps: Assigns match percentages based on past visit history.
trust & transparency
Use consistent patterns so every screen feels connected.
Google Search: Provides answers and recommendations with source links for deeper exploration.
Amazon: Keeps product details clear and easy to verify.
Amazon
Zoom
Wirecutter
Google Maps
Google search
Key insights and themes
These insights drove the prioritization of features and ensured alignment with TechFlipp’s goals.
1
2
3
how might we
How might we design a mobile commerce experience that feels clear, polished, and ready to scale?
lightbulb_2
Ideation
Designing the product flow
I moved from concept into high-fidelity screens, refining key areas of the mobile commerce experience:
iteration 1
iteration 2
iteration 3
iteration 3 cont.
iteration 4
Co-design credit: Melina Sisaro
group
user testing
Refining the solution
Product detail learnings
Percentage match
Insight: Users found this feature less helpful for decision-making.
Action: Remove this section and expand the "Top Picks" feature.
Item details at a glance
Insight: Users often skipped this, perceiving it as a marketing tool.
Action: Explore different layouts and section headings to improve clarity and engagement.
Cart and checkout
Insight: This section was well-received, with users most likely to pause and read here.
Action: Keep this feature and ensure scalability across all item categories.
e-commerce Module (Top half)
e-commerce Module (bottom half)
Product detail learnings
What shoppers need
Insight: Users still value reading full product details, as not all users trust product summaries.
Action: Make navigation to product details, cart, and checkout more intuitive.
What shoppers need
Insight: Users did not immediately recognize the summary as product.
Action: Clearly label the summary as product and indicate that it provides an overview of all product details rather than highlighting a single one.
Reactions to "Generated by AI"
Users had mixed reactions to product content, praising its efficiency but raising concerns about authenticity, accuracy, and ethics.
Positivity around efficiency & innovation
“AI is making our lives easier tasks, more streamlined.”
Concerns about human authenticity & accuracy
When product details are unclear, shoppers question whether the information is trustworthy and relevant. The experience needs clearer structure, stronger visual hierarchy, and a more direct path to purchase.
Concerns around ethical effects & data privacy
“They're underpinning their employees in my opinion, and then also cutting jobs, trying to cut down costs when they're already making a big profit there. Um, so if I saw that TechFlipp was using AI to power these contents and results on their website, that yeah, that would give me a negative view.”
compare_arrows
aligning e2e
Ensuring visual consistency
We initially debated making AI content stand out but shifted focus to integrating it seamlessly for a cohesive experience.
I co-led the color strategy, ensuring alignment with TechFlipp’s design system while maintaining a distinct, recognizable identity. I explored scalable color approaches, tested variations, and presented recommendations to stakeholders, balancing consistency with differentiation.
Light color strategy
The palette prioritized simplicity and trust, ensuring seamless alignment with TechFlipp’s design language.
Product detail
Account and support
Dark color strategy
This option used a bold, innovative palette with a gamified toggle to reinforce transformation.
Product detail
Account and support
We chose the light color strategy to balance familiarity with innovation.
To enhance visibility while preserving harmony, I opted for a slightly darker blue than our primary tone.
editor_choice
Final Design
The MVP flow
The final MVP delivered a cohesive mobile commerce shopping experience that seamlessly integrated into TechFlipp’s platform.
Full E2E mobile commerce flow
Product discovery
nudge appears on scroll
refinement applied
Product details
Product detail
Product detail cont.
cart flow
checkout
Highlights & quick description
The highlights and item summary provide relevant, contextual details to help users make quick, confident decisions.
For those needing more information, a link directs them to full item details, which are not product.
At a glance
Displays up to six key specifications of the item in an easy-to-digest visual format. To ensure clarity in a text-heavy section, I worked closely with illustrators to rapidly create 60+ custom icons in time for launch.
Users can access the full, non-product specifications through a link at the bottom of the card.
Product detail flow
Helps users identify important product details quickly so they can make confident purchase decisions.
A link directs users to the full product details if they want more detailed feedback beyond the product summary.
Aspect summary
Provides structured product content, imagery, and actions for a complete mobile shopping journey.
Search initiative
e-commerce tailors the top-of-page categories to user search queries, adding educational content to help users better understand their options.
+3.62%
search ATC/visitor
+2%
item click-Through-rate
-1.81%
Referred item ATC/visitor
Design credit: Lauren Glazer
Design credit: Franklin Huynh
Comparison initiative
Introduces a comparison tool for evaluating multiple items on the search page, reducing the need to use the cart as temporary storage, enhancing efficiency and reducing back-and-forth navigation.
+2.62%
add-to-carts/visitor
+1.14%
new buyer conversion
-1.81%
removal of item from cart
monitoring
impact
The results
+
1.1
%
-
0.93
%
-
0.63
%
What I learned from this project
rocket_launch
thumb_up
handshake
work
Next Case Study
Designing and animating game interfaces, environments, assets, logos, and venue replay flows for player engagement.
0 to 1 Design
loyalty program
Web & App
+2,233%
+35K
