Role
Lead UI/UX Designer
Team
Timeline
January - May 2024
Skills
User Research
User Flow
Branding
Interaction Design
Context
Alana is a platform that offers products directly from brands and authorized retailers, ensuring authenticity by prohibiting third-party resellers and eliminating counterfeit risks.
The Alana Marketplace was originally designed for consumers who know exactly what they want. Now, it’s expanding into a hub for product discovery and browsing. Therefore, Alana asked us to develop a redesign of the mobile app.
Impact
We were able to deliver an optimized experience for users!
26%
Improvement in app usage
Users now spend an average of 26% more time browsing products in the app.
11%
Increase in conversion rates
A more streamlined and seamless shopping experience for users.
Goal
A comprehensive redesign of a mobile application focused on allowing users to easily scan products and access detailed information, helping them retrieve listings from reputable market platforms.
Problem Statement
How might we modernize Alana’s app interface and user flow to enhance product discovery and increase app usage?
To gain a deep understanding of user needs, we conducted 8 in-depth user interviews, focusing on their shopping habits and a walkthrough of the existing app. This research helped us identify three key pain points:
01. Unintuitive Scanning
The scanning process was not user-friendly and lacked essential functionalities, making it frustrating for users.
02. Limited Browsing
Alana lacks a dedicated space for users to discover new products, which results in lower app usage.
03. Lack of personalization
Users felt the app did not cater to their individual preferences, leading to low engagement and minimal traffic to the Marketplace.
Next, to understand the unmet needs from the user interviews, we conducted a competitive analysis of three retail apps, examining their features and functionalities to understand how they address user needs.
Alana has primarily focused on scanning products and guiding consumers to trusted points of purchase. However, our research also highlighted that many retailer apps drive engagement by offering product discovery and personalized recommendations, two features users are already familiar with.
Our research indicated that embedding the Marketplace directly within the app would significantly improve user flow and boost app usage. By integrating the Marketplace rather than redirecting users to a web page, we could create a seamless shopping experience.
Following discussions with stakeholders, Alana is evolving from simply showcasing scannable products to transforming the Marketplace into a comprehensive destination that meets a wide range of consumer needs. As a result, we reframed our problem statement to align with the new business goals.
Problem Redefined
How might we reimagine the Alana mobile app by integrating the Marketplace to enhance user engagement and create a more seamless shopping experience?
User Flow
After finalizing our new problem statement, I led my design team in structuring the user flow to optimize the integration of the Marketplace in the mobile app. The user flow served as a blueprint that guided our design and development decisions.
Through the user flow diagram, we identified three key tasks:
QR Code Scanner, In-App Marketplace, Collections Tab
These three tabs address the key pain points identified in our research, aiming to improve app functionality and enhance the user shopping experience.
Ideation
Following the user flow diagram, we brainstormed for each page and sketched actionable design solutions.
01. Direct to trusted points of purchase from Scanner
02. Discover new products from Marketplace
03. Categorize products under Collections
Iterations
We created at least three iterations for each screen and regularly met with stakeholders to ensure our designs aligned with all business goals objectively, without bias.
Branding
Alana sought a new brand identity that emphasizes its commitment to authenticity and a secure shopping experience. To achieve this, I spearheaded the rebranding process and developed a new color palette and logo. Given that the majority of Alana’s retailers and brands focus on beauty, cosmetics, clothing, and accessories, with a primarily female target audience, the color choices were critical.
New Design System
I chose green as the primary color to convey a sense of safety, comfort, and health. Pink was selected as the accent color to communicate femininity, friendliness, and sophistication. By blending these cool and warm tones, the overall color scheme became more balanced and appealing to a broader audience. This rebranding not only reinforced Alana's values but also enhanced the visual appeal of the app, making it more attractive to its target consumers.
Scan With Ease
Alana lets users scan products directly from their mobile devices, guiding them to trusted retailers or brands. The new scanning process is more user-friendly, featuring an intuitive rectangular frame, a loading icon that reinforces brand identity, and an option to add missing products to the database, reducing frustration when a product isn't found.
Shop Seamlessly with Personalized Recommendations
Integrating the Marketplace directly into the Home Page creates a seamless shopping experience by eliminating the need to redirect users to a separate web page. This integration encourages users to explore new products through personalized recommendations, enhancing engagement and discovery.
Collection Tailored For the Users
A “me” tab that showcases the user’s collection and search history, personalizing user’s experience with a tailored profile. Diamond-shaped folders highlight Alana's branding, and deleting a product from the history fine-tunes the user's recommendations.
Reflection
Understanding Business Needs
Through this project, I learned that business requirements are constantly evolving, making communication crucial. Regular meetings with stakeholders and a clear understanding of their business goals were essential in guiding my team through various design decisions.
Iterative process of design
In this project, we frequently redirected our design to address core problems. I discovered that it’s common to adjust the design direction based on research insights, user needs, and business goals. I’m still actively revising this mobile app design during my internship, as new engineering constraints emerge during implementation.