Redesigned Nimya’s e-commerce website and IA to increase user engagement and inclusion.
UI/UX Designer
Desktop, Tablet, Mobile, Website
Figma, FigJam, Google Forms, Google Meets, Discord
October 2022 - November 2022
(4 Weeks| 80 Hours Total)
What is Nimya?
Nimya is a beauty product e-commerce brand founded by an international beauty influencer named NikkieTutorials, also known as Nikkie de Jager.
This project is a personal exploration of Nimya, and I am not associated with nor have I been compensated by Nimya or NikkieTutorials to create this project. I do not claim ownership of any artwork or media used in the mockups.
Redesigning Nimya’s IA and key screens for enhanced brand growth opportunities.
While Nimya currently operates as a functional e-commerce website, there are significant opportunities for enhancing consumer usability and overall user experience. In this comprehensive case study, I delve into the beauty industry, eCommerce domain, and brand identity to elevate user retention and optimize engagement on the website. By showcasing reworked key screens and refined information architecture, I aim to align Nimya with modern design trends and elevate its digital presence.
Outcome:
60% increased average session duration.
100% user satisfaction with new visual design.
Constraints
📌 Time constraint of 80 hours to complete the project.
📌 Working with existing brand identity.
📌 Limited resources and perspective as a solo UX designer.
Responsibilities
📌 Planning and organizing an individual design sprint.
📌 Restructure information architecture and visual design.
📌 Make it responsive and determine success metrics.
The existing website lacked in securing users’ trust, driving away customers, and hindered conversions due to poor design and a lack of searchable information.
Looking at Nimya’s reviews from Reddit, it is clear that navigating the website and information browsing are some of the main issues customers have — two key features of the online shopping experience. If designed poorly, this can quickly drive customers away, so it is essential to focus on having a simple and easy-to-use website.
Figuring out the problem started with evaluating existing designs.
I analyzed three key screens: the home screen, the product screen, and the customer service screen. I assessed the website's effectiveness in providing essential information, identifying potential navigation challenges, and ensuring overall accessibility.
🧭 Hard to Navigate
Information architecture is unorganized and has cognitive overload and friction in content.
Small text, excessive negative spacing, and contrasting colors.
🤔 Inconsistent User Interface
Navigation buttons are different in color, hover states, and some are not functional.
Button states’ color combinations failed both WCAG AA and AAA guidelines.
💾 Overwhelming Visuals
Visual design and high color contrast used compromised accessibility.
Failed to meet the WCAG AA and AAA guidelines due to vibrant color combinations.
Potential Impact
Difficulties finding product information to make purchase decisions.
This can result in negative conversion rates due to ineligibility.
Potential Impact
Confuse and make it harder for users to understand how to interact with the site.
May perceive the brand as unreliable or unorganized.
Potential Impact
Users with visual impairments or cognitive disabilities may find difficulties navigating or understanding the content.
Users find the most important influence on their purchasing decisions involves inclusivity, diversity, and creditability.
The survey provided quantitative insight into what users expect when exploring, engaging, and purchasing from an online makeup eCommerce site.
⭐️ User reviews are the most important feature.
83.3% of users expressed a strong motivation to purchase the product when online reviews are available. Based on some open-ended responses, reviews can make or break the user's trust in the product and site.
🌎 Diversity and Inclusivity are desired by Users.
Users emphasize the importance of skin tones and different skin complexity to enhance their online experience. Users feel emotionally tied to positive and inclusive products that enhance their daily living.
💬 Clear and detailed information is needed.
Users make informed purchasing decisions based on their transparency and trust in the brand or product. This may potentially minimize returns and customer service inquiries.
Users felt a lack of interest and dissatisfaction when engaging with the current website.
Through user interviews and behavior research, this study reveals common feedback. Key pain points identified include visual shortcomings, layout issues, finding information, and lacking trust. Users found the product screen information to be irrelevant, impacting their engagement.
I don’t know if I can trust purchasing from here.
“There was no way for me to engage with anything on the site. There were no reviews, no real pictures, and no way to create an account... It’s also in Euro, which I’m not sure how to translate into USD.”
Why is the information hard to read and find?
“I like the colors, but why combine them? I can’t read a single thing unless I zoom into it. The background is blue, the text is blue or bright orange. Even the shipping and return were a headache to read. It’s unorganized.”
It was an uninteresting experience.
“I’m a fan of Nikkie but not a fan of her website. I feel it lacks a big part of her personality... Besides the colors representing her culture, I see no other incentive to browse or purchase from this site...I’ll just wait when it hits Ulta.”
👩🏻💻 Enhance Screen Engagement
Users spent an average of 1 minute and 15 seconds exploring the current website, quickly clicking on products due to the lack of other engaging elements.
✨ Improve Visual Design
Users experienced difficulties reading the website and became disinterested, leading to a high bounce rate. Some users expressed irritation with the flashy autoplay video in the hero section, causing discomfort to their eyes.
🔍 Information Accessibility
Users struggled to find information quickly, resulting in prolonged reading times. The lack of organization and complex content discouraged some users from purchasing, leading to potential drop-offs.
Learning from the competitors.
I analyzed Nimya’s direct and indirect competitors to learn how they structure their information, layout, and content.
To apply similar information so new and existing users can easily understand and interact with the site.
Organized Mega Menu
Categorize products for easy scanning and seamless integration of new additions.
Content Hierarchy
Implement a similar structure to competitors for laying out information effectively.
Visual Hierarchy
Utilize headers and white space to establish clear visual distinctions between sections and content.
Understand how to improve Nimya’s current content
Categorized Information
Designate dedicated screens for navigating abundant information, organizing it into distinct categories such as FAQ, shipping and returns, contacts, etc.
Search Function
Include a prominent search icon in the navigation bar, allowing users easy access to information from any screen.
Dropdown Style
Organize content in the dropdown to maintain a clean interface and prevent overwhelming users with unnecessary cognitive load.
Understand what features competitors use for user engagement.
User Account Creation
Enable users to create accounts for a personalized experience, including saving preferences, order tracking, and tailored recommendations.
User Reviews and Photos
Encourage user participation by allowing reviews, ratings, and real-time photos to help others make informed product decisions.
Hashtags
Integrate social sharing buttons to facilitate users in sharing products or website content on their social media platforms.
Meet Rhonda - An experienced makeup artist who works with diverse skin complexity.
Drawing on the insights from the user research, a common set of pain points and needs emerged among all participants when it came to purchasing makeup online. These pain points and desires were synthesized into a single persona.
Translating consumer needs into business benefits.
In my discovery research, I identified key features missing from the current website. To effectively communicate the value of user-centric features, I envisioned business goals that the company may aspire to achieve. By integrating these features, I demonstrated their positive impact on the user experience and their potential to drive business growth.
Reorganizing the navigation menu and sitemap.
The revision fosters familiarity and facilitates quick access to the desired content. Considering future growth, the organized mega menu ensures a consistent user experience as new products are added.
Before
The current sitemap of Nimya lacks consistency in organizing content, particularly in the Customer Service section.
Products grouped under a single category hampers effective navigation.
Placement of social media icons and email subscription text forms differs from common conventions, potentially causing user confusion and unfamiliarity.
After
Implemented categorized product sections aligned with industry standards, enabling users to navigate and refine their search easily. This flexible structure also facilitates seamless integration of future product additions.
Streamlined the customer service screens, prioritizing essential user content and relegating additional information to the FAQ section.
Redesigned the icons based on secondary research, focusing on tools that users frequently utilize during product exploration.
Finding creative ways to explore different page layouts.
I started this project by creating sketches of my ideas on a sticky note and combining them into sections. I wanted to visualize different layout options and figure out what order of sections would feel the most natural. Below were the selected mid-fi wireframes inspired by my post-it sketches.
Validating the new redesign and IA restructure.
Conducted usability testing of the redesigned Nimya desktop prototype with 6 participants, a few who had previously participated in user interviews, to gather feedback and validate if the new interface had improved.
🧭 Seamless exploration
Users could perform their tasks flows freely with the interactive prototype.
The most common product exploration was the Home Screen, followed by the mega menu navigation and search function.
📈 Increased screen engagement
Users were fond of the new screens, scrolling and engaging with the new content in each task flow.
Features most users spent time interacting with were the user reviews, mega menu navigation, and hashtag section.
🔍 Quick information scanning
Organized IA allowed users to search for information quickly. The average time for finding the tasked information was 8.2 seconds.
Users appreciated the dropdown organization of the content on the Product Screen but felt the product description was still too long to read.
🛠️ More accessibility features
There were a few more accessibility features that were missing and noted by a few advanced makeup users.
Product and Search screens missed a filtering function to help narrow users' search time.
💸 Return & shipping policies
Although out of the UX scope, users were not fond of the shipping and return policies and thought the process was too complex to purchase from the website.
Adding labels under the navigation icon for accessibility.
Before
Some users had a general idea of the icons but a few others were confused with the Euro icon.
After
To address this, a label was added under the icons to help provide further clarity on the function of the icons.
Adding quantity results and a filter bar for a customized search.
Before
Users were unable to know how many products were under one category and questioned how they would be able to narrow products down in the search tool.
After
To address this, I added a quantity result and filter option above the product search screen for users to easily navigate through the products that they are searching for.
Summarized description for easy information scanning.
Before
Users felt the description was too long. They wanted a quicker description that allowed them to understand what to expect from the product.
After
To address this, I summarized the content and provided a quick description of the product. I put the remaining description into a dropdown for curious users to explore.
Adding rating summary and filters for custom review exploration.
Before
There was no summary of the ratings and sorting tool for the reviews. Users wanted a way to quickly find reviews related to their needs and have visual data of overall ratings.
After
To address this, I added a rating summary in the top right corner and provided a quantity & sorting bar above the reviews for users to have more control over their search.
Fixed section navigation to help users navigate their information search better.
Before
Although, users felt the information was more organized, they thought it was still long if all the drop-downs were opened.
After
To address this, I made the section navigation fixed to the top so users can quickly select the category to examine information.
Reflecting on my process, the project outcome, and how I’ve grown in this role.
Throughout this individual capstone project, I took full ownership of the project timeline and applied design thinking principles to shape my approach. I am incredibly grateful to have had the guidance of an experienced designer who was my mentor, providing valuable insights and support throughout the process.
💼 Leveraging my business acumen, I made strategic design decisions that aligned with both the business goals and user needs.
This approach ensured that the case study reflected a comprehensive understanding of the project's impact on the business and its target audience, resulting in a more insightful and valuable outcome.
⛓️ Interactive prototyping with additional screens helped provide a full user experience.
By incorporating additional screens into the interactive prototype, I created a comprehensive user experience that allowed for seamless navigation and a deeper engagement with the Nimya platform.
⏱️ Adhering to the project timeline and effectively prioritizing my focus.
Initially planning to prioritize three screens, my ambition to deliver a comprehensive user experience led me to develop a fully interactive e-commerce prototype encompassing seven screens. This decision posed time constraints, necessitating adjustments and concluding the research with iterative improvements for a comprehensive design evaluation.
👀 Explore more design concepts before moving forward.
I drew inspiration from competitor analysis and incorporated user research insights into feature selection. Given more time, conducting card sorting and A/B testing for specific layouts would have been beneficial. Upon reflection, I recognize the value of additional testing and validation to enhance design choices.
📊 Conduct further usability testing after incorporating iterations.
While I received valuable feedback from the initial usability test, I regret not conducting additional testing to assess the impact of my iterations. Given more time and resources, I would have pursued another round of testing to gauge the improvements' effectiveness.