à.pro.pro is a small skincare business based in Canada. The client, Epiphany, is taking her business into a different direction and needed a redesign to match it.
Role: Lead UX/UI Designer and Researcher (with support from my mentor Patricia Machado)
Nhi Vu: Lead UX Researcher
Michael Bridges: UX Designer and Researcher
Timeline: 90 Hours
Project Type: Client Based Project, Website Redesign
Tools: Canva, Figma, Figjam, Google Sheets, Miro, Zoom
à.pro.pro’s Rebrand
Project Brief
A small skincare business owner is looking to shift her focus to the broader skincare market. She aims to define her brand's voice and enhance the user experience on her website. Her goal is to create a cohesive brand identity and ensure the website's marketing effectively boosts sales.
We want to identify the essential information users seek while shopping for skincare, such as ingredient details, product effectiveness, and suitability for their individual needs.
Understanding the Vision
Mood board and Style Tile
2
1
At first, we contacted the client to define her brand identity.
We requested a selection of images of her brand labels, but they conveyed different directions.
Next, we asked for some keywords and created a mood board to see if our visions aligned.
When we presented the mood board, we encouraged her to highlight the images that resonated most with her vision. We faced some challenges due to conflicting themes, so we created several style tiles to clarify our direction and better understand her brand preferences.
Through clarification and collaboration, we were able to agree on a style tile.
3
4
Finding the Solution
Interviews
We interviewed 7 participants with the intention to:
Gain insights into their skincare experiences.
Explore their goals when purchasing skincare products.
Learn about their expectations while shopping for skincare.
Identify their frustrations or challenges in the shopping process.
Key Takeaways
After conducting interviews and compiling an affinity map, we discovered that the following are what customers value most:
Convenience: Customers want to be able to easily purchase their products. They value their time most.
Cost to benefit ratio: Customers are looking to understand the price and get the best value for their money. They also want to gauge the product’s effectiveness and see if it meets their needs.
Transparency: Customers want to know the ingredients, trust the sources behind the product, and be able to interact with the product (possibly through samples) before purchasing.
Priorities: Customers want to see when choosing skincare: Usage (AM/PM routine, how to use), targeted skin type, texture, scent, reviews, clean up post-use, etc.
Defining the Target Audience
Personas
Through user interviews, we were able to create 3 personas to determine the target audience and ground our design process as we proceeded.
Tackling the Problem
Feature Set - Prioritization
Now that we have determined the feature set, we created user flows to determine the general direction to craft our low fidelity designs.
The key feature of a retail site is the ability to browse products and complete purchases. We investigated ways to introduce users to new products while making the experience less overwhelming, as our client intends to highlight several new items throughout the year.
We also considered incorporating an auto-renew option on the website to establish a steady revenue stream for the business, while providing users with a convenient method to purchase their regularly used skincare products.
Another important feature would be a favorites option. For users who choose not to use the auto-renewal, we want to ensure they can easily access their frequently used products.
We conducted a competitive analysis and took into consideration the needs and goals from the personas to determine the essential features for our product.
We brainstormed several ideas, including sample kits, which are a fantastic way for users to discover new products they might love.
Another suggestion was to offer products in various sizes, allowing users to try something new without committing to a full-size option.
Additionally, we created tags to help users search for products based on their preferences, as testing revealed that some users prefer lighter or stronger scents in bath bombs.
Finally, a "How to Use" section is helpful for new skincare users, making their introduction to the products easier.
User Flows
As a team, we brainstormed homepage layout ideas to effectively showcase products while emphasizing the business’s commitment to its core values. We aimed to give users an immediate sense of what the business offers and included testimonials, recognizing their importance in encouraging support for small businesses.
There were several changes to be made after user testing each iteration from low to mid to high fidelity.
Low Fidelity Designs
Landing Page
Iteration 1
The bright colored shapes in the background made it far too busy, so we toned down the color to create a balance.
We moved the products to the top, to prioritize sales.
We changed the layout of the testimonies cards to allow room for more text. That way users do not have to click to another page to view somewhat lengthier testimonies.
We added more to the values section to explain the values that the company practices.
Idea 1
Browse Products Page
Iteration 1
We added more breathing room between each section to make it more readable.
We moved the second navigation up, to be easier to spot.
We added a filter to improve product organization and customer convenience. Since the client has a limited product range, this adjustment simplifies navigation.
Placed the “try something new” section in a card to fit better.
Final Design
Final Design
Final Design
We updated the card layout to accommodate longer product titles. We also repositioned the tag to create more space on the cards.
Additionally, we added a “favorites” feature for users to easily revisit products, reorder items, or include personal notes like “purchase as a birthday gift for my best friend.”
While the original picture shape was unique, it proved inconvenient for the client when updating images. We redesigned the card’s exterior to an arch shape, which the client indicated she liked during the mood board review.
Individual Products Page
Initially, the client wanted each product to have its own color palette based on the packaging, but users favored a consistent brand color scheme across the page.
The background was made white (different from the homepage and product list page) to accommodate for the different color palettes that the client would like per product. Then it was changed to pink to be consistent with the other existing pages.
We also made the “you may also like” section a carousel to feature more items.
We increased the spacing between sections to enhance the viewing experience, as the layout felt crowded without it.
We also reassessed the customer’s needs and rearranged the sections within the product information.
Additionally, we added a section below the header to indicate the current page to viewers.
A participant expressed a desire for easy access to reviews, noting that they often clicked the star ratings to jump directly to the reviews section. In response, we implemented this feature to enhance user convenience.
Iteration 1
Our Story Page
Users were unsure of whether their note was saved or not, so a button has been added.
Iteration 1
We didn’t make any changes to the check out process, since users were satisfied with it. However, one user stated they like to have the option to sign in as a guest, so that was added to the sign in screen and is prompted when users checkout.
We have also changed the background to be similar to the homepage to ensure more consistency with the branding and the overall feel of the website.
Participants in the user testing mentioned that there was an overwhelming amount of text, which discouraged them from engaging. To address this, we decided to organize the content into sections and highlight the important points.
The client supported this approach and requested the use of different font sizes, bolding, and italics, which we successfully incorporated along with breaking up the text for better readability.
One user expressed that they found the story inspiring and felt motivated to purchase additional products, resulting in the creation of a section called "Epiphany’s Favorites."
Final Design
Add to Favorites
Iteration 1
Check Out/Sign In
Iteration 2
Initially, users did not like having to navigate to a different screen to add the notes, so I integrated it into the popup.
Users did not like that the notes overlay did not show clear enough confirmation that the item had been added to their personal collection, so I made a few iterations by adding clear buttons and indicators.
The Final Touches
Mid to High Fidelity Designs
Idea 1
Idea 2
Iteration 1
Final Design
Idea 1
Iteration 1
Iteration 2
Iteration 1
Final Design
Final Design
Iteration 1
Final Design
Final Design
A Glimpse of the Final Design
In this project, we also created tablet and mobile versions of the webpage to ensure a responsive design. Due to time constraints, we focused on creating the home screen and product list page to ensure functionality.
Interactive Prototype
Lessons Learned
Teamworking Experience
This project was a valuable learning experience for me. Organized by the Design Lab boot camp I'm attending, it involved collaborating with two fellow students on a client-based initiative. It marked my first experience working as part of a team in a UX design role, and I faced several challenges, particularly in organizing and coordinating our efforts. However, through trial and error, constructive discussions, and a commitment to open communication, we successfully navigated these challenges and grew as a team.
Client Experience
Additionally, it marked my first engagement with a client, which necessitated developing skills in setting expectations and aligning the project with the client's aesthetic preferences rather than my own. Overall, while it presented challenges, the experience was invaluable and enjoyable, contributing greatly to my professional development.