ColourPop
Overview
Context
Passion Project: Designing an innovative mobile app for an established and trendsetting cosmetics website
​
Objective
​To amplify user engagement and drive downloads by introducing an exclusive 'Virtual Try-On' feature in the ColourPop mobile app. By leveraging Augmented Reality (AR) technology, users will have the ability to try on cosmetics in real-time, revolutionizing their shopping experience and elevating the brand's appeal.
​
Role
UX/UI Designer
​
Timeline
4 weeks
​
Tools
Figma
Initial Research
Brand Identity
In embarking on this project, my first step was to immerse myself in the captivating world of the ColourPop website. By closely examining its design elements, I aimed to determine the ideal look and feel for the app, ensuring a seamless and consistent experience with the existing site. With its vibrant and dynamic webpages adorned with unique fonts, I immediately recognized that ColourPop's brand identity exuded a youthful and playful essence.
​
​
Essential Features
As I continued to explore the ColourPop website, I discovered that users have the option to create accounts and store essential information such as their wishlists, beauty profiles, and shipping details. Recognizing the importance of providing users with a seamless experience when transitioning from the website to the app, I knew that integrating a user account feature was essential for my project.
​
With this in mind, I made sure to include this feature in the app's design to ensure that users could enjoy a swift and efficient transition, allowing them to continue their shopping experience without any interruptions.
Competitor Analysis
Objective
To ensure that my project would stand out in a competitive market, I conducted thorough research on ColourPop's competitors who already had successful mobile apps in the market. My goal was to understand what these competitors were doing well and what I could do to make ColourPop's app stand out.
​
​
1. Sephora
​
Pros:
-
Sleek Interface: The app boasts a sleek and modern interface that appeals to users and enhances the overall user experience. Its intuitive layout and visually appealing design contribute to a seamless browsing and shopping experience.
-
Detailed Filter Options: Users have access to a wide range of detailed filter options, allowing them to refine their product searches based on specific criteria. This feature enhances the efficiency of the app, enabling users to quickly find the exact products they are looking for.
-
Lots of Product Reviews: The app provides a wealth of product reviews from customers, offering valuable insights and feedback. This feature helps users make informed purchasing decisions, fostering trust and confidence in the products offered.
​
Cons:
-
Overcrowded Bottom Navigation Bar: One potential drawback of the app is an overcrowded bottom navigation bar. With too many options displayed, it may lead to a cluttered and overwhelming user experience. Simplifying the navigation options could improve the app's usability and streamline user interactions.
2. Ulta
​
Pros:
-
Attractive Splash Screen: The app features an eye-catching and visually appealing splash screen that creates a positive first impression for users. This attention to detail contributes to a polished and engaging user experience.
-
Simple Navigation Bars: The app utilizes clear and straightforward navigation bars, making it easy for users to navigate through different sections and features. This simplicity enhances usability and ensures a smooth and intuitive browsing experience.
​
Cons:​
-
Difficult to Scan when Browsing: One potential drawback of the app is that it may be challenging for users to scan and quickly absorb information when browsing. This could be due to the presentation of content or the layout design. Enhancing the visual hierarchy and optimizing content presentation could improve the app's readability and make browsing more efficient.
3. Elf
​
Pros:
-
Virtual Try-On Feature: The app offers a cutting-edge virtual try-on feature, allowing users to experience products in a realistic and interactive way. This feature enhances the user's ability to visualize and evaluate how cosmetics will look on them, improving their overall shopping experience and confidence in their purchasing decisions.
​
Cons:
-
Appears Clunky: One drawback of the app is that it may appear clunky or lacking in smooth transitions and visual finesse. This could negatively impact the overall user experience and give an impression of unpolished design. Optimizing the app's performance and refining its visual elements can help address this issue.
-
Difficult to Navigate: The app presents challenges in terms of navigation, making it difficult for users to find and access the desired features or information. Simplifying the navigation structure, improving labeling and hierarchy, and incorporating intuitive gestures or search functionality can enhance the app's ease of use and navigation.
Conclusion
Based on my comprehensive analysis, I gained valuable insights that informed my design goals for the ColourPop app. These goals focused on creating a standout app experience that would resonate with users and differentiate it from competitors.
​
-
Sleek Interface with Unique Features: I aspired to develop a visually appealing and sleek interface that would captivate users. By incorporating unique features, I aimed to provide a distinctive experience that would set ColourPop's app apart from others in the market.
-
Simple and Intuitive Navigation: Recognizing the importance of user-friendly navigation, I prioritized simplicity and intuitiveness. The app's navigation should enable users to effortlessly browse and access different sections, ensuring a seamless and enjoyable user journey.
-
Exclusive 'Virtual Try On' Feature: To incentivize ColourPop's website users to download the app, I aimed to introduce an exclusive 'virtual try-on' feature. This innovative capability would allow users to virtually test and visualize cosmetics, providing an interactive and personalized shopping experience exclusive to the app.
​
By focusing on these design goals, I strived to create a compelling and engaging app that would resonate with ColourPop's target audience and inspire them to embrace the app as their preferred platform for cosmetics exploration and purchase.
User Persona
Biography
-
Passionate about makeup
-
Skincare Enthusiast
-
Devoted ColourPop Fan
-
Outgoing and Sociable
-
Online shopper
​" I hate ordering makeup online because I never know if it will look good on me or not. Sometimes I end up with products that just don't work, and it's such a hassle to return them. "
Pain Points
-
Frequently purchases makeup online, but sometimes ends up dissatisfied with the products.
-
Faces time constraints due to a busy lifestyle and finds it challenging to allocate dedicated shopping time. As a result, frequently resorts to browsing the Ulta app while on the go, considering it more convenient than browsing websites.
Jane Stone
Age: 27
Occupation: Creative Director
Location: Austin, TX
Wants & Needs
-
A way to guarantee satisfaction with online makeup purchases
-
An easier way to shop on ColourPop
Defining the Problem
The Problem
In addition to differentiating ColourPop from its competitors and capturing the attention of their website users, I was motivated to address another prevalent issue – the uncertainty of online shopping.
​
One of the most common challenges when shopping for makeup online is the inability to gauge whether a product will be a good fit until it is seen on oneself. Many retailers have strict return policies for used makeup, and even when returns are possible, the process can be complex and time-consuming, leaving users feeling frustrated.
​
By recognizing this problem, I aimed to break the cycle of wasted money and customer dissatisfaction. My goal was to provide a solution that would empower users to make confident and informed decisions when shopping for makeup online, reducing the uncertainty and mitigating the risks associated with purchasing products without trying them firsthand.
​
​
The Solution
Inspired by the e.l.f. app's 'virtual try-on' feature, I envisioned incorporating a similar capability into the ColourPop app. By leveraging augmented reality (AR) technology, users could visualize how makeup products would look on their unique features, such as skin tone, hair color, and face shape. This innovative feature not only addresses the uncertainty of online shopping but also adds exclusivity to the app, enticing ColourPop's website users to explore and utilize the app for a more confident and personalized shopping experience. Building upon the strengths of the e.l.f. feature, my goal was to enhance the flow, ensuring a seamless and user-friendly 'virtual try-on' experience within the ColourPop app.
Ideation
Wireframes
During this phase, I dedicated my efforts to defining the layout and prototype flow of the app, leveraging my existing understanding of its desired look and feel.
​
To ensure a focused approach, I prioritized two primary flows:
-
Shopping for Colour Stix: Streamlining the process of browsing and selecting Colour Stix products, enabling users to effortlessly explore the available options and make informed purchasing decisions.
-
Trying on Lippie Stix with the Virtual Try-On Feature: Creating a seamless and engaging experience for users to virtually try on different shades of Lippie Stix, leveraging the innovative virtual try-on feature to help them visualize the products on their own features.
​
Using Figma, I designed the necessary screens for these core flows, while also incorporating the wishlist and account pages. It was important to integrate any previously gathered assets from the ColourPop website, ensuring consistency and familiarity for users throughout their app journey.
Usability Testing
Strategy
To ensure the intuitiveness and usability of my layout, I conducted remote testing sessions over Zoom. During these sessions, I actively encouraged users to share their thoughts and feelings as they interacted with the prototype and completed the assigned tasks. By creating an open and comfortable environment, participants were able to express their insights and experiences more freely, allowing me to gain valuable feedback on the design's effectiveness.
​
Tasks
-
Add 1 Colour Stix in the shade 'pressed' to your shopping cart.
-
Try on Lippie Stix using the virtual try on feature.
​
Overview
-
Method: Remote, 'Think Aloud' testing using Zoom
-
Participants: 5
-
Age Range: 15 - 31
"I was waiting for something to pop up in the middle of the try on screen... It's cool though!"
- Emile, 23
"Oh, this part is a different color! Is that on purpose?"
- Alexis, 31
"I really like the fonts and colors you have so far."
- Asher, 15
Conclusion
Overall, the testing results indicated positive feedback regarding the usability and flow of the app. Users expressed satisfaction with the general look and feel of the app at this stage. Nonetheless, there were a few key issues that emerged during testing, which I aimed to address and prioritize as I moved forward with the design process.
​
Opportunities For Improvement
-
Virtual try-on page: Users expressed enthusiasm for the feature. However, they experienced confusion upon first arriving at the page due to a large blank space, which led them to wonder if something else was supposed to appear in the middle of the page. I knew addressing this issue would be important to enhance the clarity and user experience of the virtual try-on feature.
-
Visual inconsistencies: Users felt that the app's flow would be smoother if certain visual details were more consistently applied throughout the design. I knew taking steps to ensure visual coherence and consistency would contribute to a more cohesive and user-friendly experience for app users.
Mid-Fidelity Wireframes
Objective
With these areas for improvement in mind, I began working on my mid-fidelity prototype. In this phase, I focused on addressing the issues identified during testing, including the confusion on the virtual try-on page and the inconsistencies in the visual design. Additionally, I incorporated more visuals that align with the brand identity to enhance the overall aesthetic appeal of the prototype. By considering these aspects, I aimed to create a more polished and cohesive design that addresses user feedback and aligns with the brand's visual language.
​
High-Fidelity Prototype
Final Touches
Having established confidence in the navigation, layout, and flow of my design through previous iterations, I directed my attention towards refining the visual elements of my design as I transitioned into creating the final prototype. By dedicating my efforts to perfecting the visual aspects, I aimed to ensure a visually appealing and engaging user experience. This allowed me to focus on fine-tuning the aesthetics and enhancing the overall polish of the final prototype.
​
Check it out for yourself below!
​
Conclusion
Reflection
I thoroughly enjoyed working on this project, as it allowed me to build upon an existing brand and incorporate new features while staying within the brand's established parameters. It was not only an enjoyable experience but also a valuable learning opportunity, especially since I had the chance to work with AR features for the first time. Given the rapid development of AR technology, I am grateful to have gained early exposure to it in my design career. Additionally, designing for AR has sparked my interest in VR, and I look forward to exploring opportunities to design for virtual reality in the future.
​
What I'd Do Differently
If I were to reflect on the project, one aspect I would have liked to improve is the virtual try-on flow. Although I am satisfied with the current implementation, I believe there is potential for further iteration to enhance its seamlessness and user experience. Given more time, I would have invested additional effort into refining this particular aspect of the design.
​
Next Steps
-
​​More user testing: It would be highly beneficial to conduct another round of user testing to gather additional feedback on the final prototype. By doing so, I can gain further insights into the usability and effectiveness of the design, and identify any areas for improvement that may have been overlooked. This iterative approach would help refine the user experience and ensure that the final product meets the needs and expectations of its intended users.
-
Developer hand-off: Once the final iteration is complete and I am satisfied with the design, I would be prepared to hand off my work to the ColourPop developers. This involves providing them with the necessary design assets, documentation, and specifications to ensure a smooth transition from design to development. Clear communication and collaboration with the development team will be essential to bring the design to life and ensure its faithful implementation.
-
Exploring opportunities for new features: By observing how users interact with the app and gathering feedback, I would ideate and brainstorm new features that can take the ColourPop app to the next level. This process involves exploring innovative functionalities, considering user needs and desires, and aligning them with the brand's goals. By continuously adding valuable features, the app can evolve and offer an enhanced experience that keeps users engaged and satisfied.
​