Estée Lauder Companies Hackathon
Project Overview
The ELC Hackathon 2023 involved ideating and developing technology solutions that promote inclusivity and enhance the shopping experience for users, with a particular focus on accessibility.
I teamed up with 3 other UX designers to create an innovative mobile app with an implementation of an accessibility icon. We called ourselves, Beauty within Reach.
My Role
-
UX Researcher
-
UX Designer
Team/Duration
-
4 UX Designers
-
4 weeks sprint
Problem
-
Beauty industry's online platforms lack accessibility
-
Some platforms have an accessibility link, but users have to leave the site to adjust settings
-
Lack of accessible beauty products for individuals with disabilities
Figma
Excel
Canva
Design Tool Kit
Solution
Our team has proposed implementing a new feature with a strong focus on accessibility. This feature will empower users to customize settings based on their specific needs. Furthermore, products will be filtered and clearly labeled as accessibility-friendly, providing users with the confidence to make informed purchases.
Accessibility is not an option, it's a must!
Our team had four weeks to complete the Hackathon project. We focused on UX design, conducting research and creating ideation deliverables like persona, journey mapping, prototyping, and usability testing. In the final week, we made a slide deck and video demo to showcase our project's process and concept idea.
Extensive Research
Market Analysis
We conducted extensive research to determine how to make our app accessible to all users, considering the various types of disabilities that exist. To help us in the meantime, we examined the apps of the top beauty companies and assessed how we could incorporate their key features while still meeting WCAG compliance.
Interviews
At the start of our project, we encountered some challenges in finding interviewees who fit the profile of our target users. However, with perseverance, we were able to interview the founder of "Makeup on Wheels", a beauty influencer, and the former Ms. Wheelchair USA 2018. Their valuable insights greatly aided us in the design process. Some of the essential insights we gathered were:
-
Prefers online shopping
-
Stays away from certain products that are not designed accessible to use.
-
Believes accessibility is not being prioritized.
Persona
Introducing Marie, our beauty warrior persona who's passionate about beauty and overcoming challenges, despite facing disabilities. Frustrated with the lack of accessibility on many platforms and beauty products, can Marie have a successful online experience without being held back?
Journey Mapping
To understand areas needing improvement, we assessed what users currently enjoy on the website. Our user journey map shows the different stages and user emotions. Areas of improvements:
Card Sorting
To understand user perception, we used card sorting as a research technique. User interviews showed that the menu had too many categories, so we invited four participants to demonstrate alternative navigation methods.
Sketches
-
Team used design studio sessions to brainstorm app's visual aspects
-
Considered user interviews and accessibility research
-
Aimed for the best accessibility experience for users
User Flow
The user flow below presents a visual representation of how a user can access the various accessibility tools on our platform. It demonstrates how users can navigate through our app and make necessary adjustments to ensure a successful e-commerce experience, with a focus on accessibility.
Task: To adjust the color and purchase an accessible product, open the app and go to the accessibility page. Then, select a product that is designed to be accessible.
The Prototype
Lo-Fi Wireframes
Intro
Accessibility Intro
Home
Accessibility
We introduced an accessibility icon to help users become familiar with its representation.
We created a dedicated accessibility page where users can adjust settings to their preferences. Additionally, this page features products that have been filtered as accessibility-friendly.
Shop
Product Details
Shopping Bag
Checkout
Accessibility is also found on the shop page as one of the categorizes added.
Products that have been filtered for accessibility display an accessibility icon. If you click "See more", you can access a more detailed description of the product's accessibility features
Friendly packaging is an option available while checking out.
The New Accessibility Icon
Prioritizing accessibility, led us to create a dedicated icon and page for it. The icon is integrated into both the bottom navigation and the hamburger menu. We included both navigation options to cater to users with different needs, as screen readers can read the hamburger menu. Additionally, the icon serves as a label for products that are accessible-friendly.
The accessibility page, which can be accessed through the bottom navigation, will provide you with a range of accessibility tools and products.
The accessibility icon is utilized to indicate which products are designed to be accessible-friendly, saving users the inconvenience of guessing whether a product will be usable for them.
"Yeah, I like that (accessibility) icon, I like that it's separated, easy to find, easy to access."
Dark Mode
Light Mode
Hi-Fi Prototype
Vision Tool: Our new accessibility tool, located under the "Accessibility" page, is designed to enhance your shopping experience by providing a range of customizable options. Among these options is the "Vision" tool, which enables you to adjust the display to suit your specific needs. For example, if you have a visual disorder, you can use this tool to create a darker version that is easier for you to see.
Usability Testing
After creating and prototyping our low-fidelity wireframes, we invited our initial interviewee to test them out. As they struggled with accessibility, we thought their feedback would be invaluable. After receiving positive feedback, we made final adjustments and submitted our design before the Hackathon deadline.
Next Steps
Despite being a Hackathon project, we are incredibly proud of what we have created. Accessibility is an undervalued concept that often goes unnoticed, and we're glad we had the opportunity to shed light on it. What's next for Beauty within Reach? Our idea will undergo extensive testing and iteration to ensure that it becomes a practical and achievable app/feature. Our goal is to inspire other platforms to prioritize accessibility and make it a must, not an option. This is just the beginning.