All Access Beauty

The All Access Beauty platform allows beauty consumers to search for store locations that have accessible features, fostering an inclusive culture across web, mobile and in-store shopping experiences.

Comment

Inspiration

We are inspired by the opportunity to empower individuals, caretakers, friends, families, and partners to find accessible store locations as part of their everyday beauty experience. Enabling inclusive access to information via All Access Beauty will transform lives and remove barriers. We are especially inspired by individuals who are close to our team members and hope that this solution will have an immediate positive impact on their beauty shopping experience.

What it does

All Access Beauty allows consumers in the beauty industry to search for ELC store locations that have accessibility features such as elevator access, braille, or text-to speech software. All Access Beauty empowers and enables individuals who face challenges in their beauty shopping experiences, fostering an inclusive culture online and in-store. Users can search for accessible stores and view their employee and accessibility feature information by zip code, brand and accessibility feature. Keeping accessibility at the forefront of our mission, the platform itself is designed to include screen readers and a high-contrast interface for an inclusive audio & visual experience.

How we built it

Using Figma, we first designed a detailed visual plan that helped us map out the user interface and plan how the application would work. With this in hand, we turned to the backend and used Flask, a Python web framework, to build the foundation of the application. To ensure security, user authentication was implemented, restricting access to certain pages. SQLite served as the database management system, and we created a data model and a user interface to view and manipulate the data. We also created APIs that allowed the frontend to use backend functionality and search for stores by zip code and view details. Once the backend was in place, we shifted our focus to the frontend. We used JavaScript and React to design the user interface and made use of Tailwind to style the application quickly and easily. The result was a clean and intuitive design that allowed users to easily navigate the app and find the information they needed. Finally, we deployed the application using Vercel, which allowed us to easily manage and scale the application. Throughout the development process, we continuously tested and debugged the code to ensure that the app functioned seamlessly and provided a great user experience. For a truly inclusive experience, special Aria tags were included in the development of the site to support a screen reader functionality for users with visual challenges.

Challenges we ran into

One of the initial challenges we encountered was ensuring our team was properly educated on the topic of accessible technology and the specific needs of our consumers. We learned about inclusive language and used these learnings in our design and solutioning process. While many of our team members were not able to design from first-hand experiences, we reached out to multiple advocates who provided valuable insight into the challenges we needed to consider. This allowed us to create a design for our application that was focused on the needs of the users. This collaboration was key and allowed us to create an effective platform that was focused on the needs of our users based on user research, feedback, design iteration, and input.

One other challenge we faced was designing a fully inclusive platform operating within the parameters of what our stores currently have for accommodations and accessibly features. In order to get first-hand insight, we reached out to our Operation team in North America to inquire about the insight we have on employees with skillsets to address audio, visual, and hearing challenges today. Many of the features included in the All Access Beauty platform are not currently captured in employee or store data. This was a challenge for designing the tool, but also highlights an area of opportunity for our organization.

Accomplishments that we're proud of

By working together, our team was able to create a solution that is effective and inclusive in addressing challenges faced by beauty consumers in our stores. Our team was fortunate to have inspiration from individuals who face challenges in their daily beauty routines and their input was valuable in designing our final solution. We are proud that we sparked conversation around such a critical topic in the beauty industry. From the feedback we received, prospective users are excited at the possibility of an inclusive tool like All Access Beauty. We are proud of our collaboration with other ELC teams and advocates. We are also proud that our web and mobile platforms were given accessibility scores of 100 by Pagespeed Insights. All Access Beauty Pagespeed Accessibility Scores

What we learned

From a tech perspective, our team learned about many new tools that were used such as Figma. We learned about how to incorporate the Web Content Accessibility Guidelines (WCAG) International standards. This outlines how to use screen readers and speech searches. We also learned about the importance and impact of color when designing accessible solutions (high contrast colors, font size/thickness).

By working together and gathering information from advocates, we gained a better understanding of the challenges faced by consumers during their beauty shopping experiences. We learned about different perspectives and increased our awareness of inclusive language and terminology.

What's next for All Access Beauty

For next steps, we are excited at the prospect of expand this platform globally across ELC stores, counters and retailers such as Sephora, Bluemercury, and Ulta Beauty. We would like to address additional challenges such as lighting and inclusive digital signage. In order to expand the scope of the platform geographically, we would like to subscribe to accessible location open APIs and use Google Maps API to provide accurate distances to stores. To increase the accessibility of the platform itself, we look forward to the implementation of voice search and filtering throughout site.

Finally, we envision an “Accessibility tab” on ELC websites that gives users quick access to this critical functionality.

Built With

Share this project:

Updates