Inclusive Fashion App

Project's cover with a purple background and parts of the high fidelity prototype are visible

The Project

I was hired to design a layout centered around inclusive fashion for a major digital product company, aiming to educate the entire team. I took on the exhilarating challenge of creating a concept for a fashion e-commerce app that is user-friendly from the very start.

With a tight timeline in mind, my primary goal was to develop a simple concept that maintains the appearance and experience of a typical app, while showcasing that it's possible to create a product that is both visually appealing and accessible. This project highlights the possibility of beauty and functionality coexisting in digital design.

About My Role

As a student in this course, I leveraged my background in front-end development and UX Design to achieve the best possible result. My focus was on eliminating as many barriers as possible to ensure that users can interact with the app autonomously.

The Challenge

I was eager to step out of my comfort zone, challenging myself to embark on a project in a field where I had little to no prior experience or expertise. This required me to actively seek out information, find inspiration, and establish a solid foundation to ensure I started this project on the right path.

User Story

“As a person with spinal muscular atrophy (SMA), I'm seeking an inclusive fashion app to find clothes that are comfortable and consider my mobility limitations. For this, I need an accessible shopping experience.”

The Final Result

This is the outcome of hard work, dedication, and passion, which has been approved by my mentor, a specialist in Digital Accessibility.

Screens of the finalized prototype featuring the Sign-in and Register interface designs.Screens of the finalized prototype highlighting the Homescreen layout, including the header with a burger menu, carousel, navigation controls, sections like 'Novidades,' 'para você,' and footer.Screens of the finalized prototype featuring the My Favorites and My Favorites empty state interface designs.Screens of the finalized prototype featuring the Cart and Menu openend interface designs.Screens of the finalized prototype featuring the Category grid view and other components on the right side for reference.Screens of the finalized prototype featuring the Category list view and Category full grid view interface designs.

If you'd like to see more details, feel free to explore the Figma prototype below. 👇

A few accessibility points considered

  • The project primarily focused on meeting the WCAG AA criteria, with occasional attention to AAA criteria for added effectiveness;
  • The black and white palette was chosen intentionally, it is the best way to demonstrate that by following the color contrast recommendations, you can use any combinations that align with the brand's color palette;
  • I aimed to balance font size and color contrast to ensure all information remains clear and readable in the best way possible;
  • All clickable areas exceeded the recommended size of 40 x 40px, which slightly exceeds the 1cm x 1cm guideline from NN/g, as highlighted in an excellent article;
  • The primary objective of the handoff is to steer the project's development in line with W3C-defined semantics. This ensures that users of assistive technologies can independently and smoothly navigate the Learning Path;

The Process

How my mind worked throughout the entire design cycle to create a great experience.

UX Research

It is crucial to establish a starting point in a complex project like this, especially for me, as I initially considered inclusive fashion to be completely uncharted territory.

In this project, I seized the opportunity to combine my experiences gained from various projects, years of research, and conversations with a diverse group of people. I engaged with new individuals to better understand their needs, satisfy my curiosities, and validate my hypotheses. Adding the icing on the cake, I had the support of my very experienced mentor, Amaury Dudcoschi Júnior.

Qualitative Research

I had the opportunity to ask questions to individuals with different disabilities, thanks to my mentor, Amaury Dudcoschi Júnior. He introduced me to people who guided me in crafting this project with a more accessible and aesthetically pleasing approach.

The sampled public interviewed consisted of 7 people:

  • 3 autistic person;
  • 2 blind person;
  • 1 person with acquired physical disability (loss of all fingers);
  • 1 Ph.D. in Inclusive Fashion.
Image displaying notes containing a few insights that I got from interviews.

Two individuals positively influenced and inspired me during this process, providing valuable insights:

  • The first person has an acquired disability; she lost her hand fingers due to a disease. She showed me that she continues to use her smartphone normally, although she has a hard time when dealing with small clickable areas;
  • The second person is an inclusive fashion specialist who introduced a wide range of solutions to ensure that people with disabilities can feel comfortable and stylish while using highly functional products.

Inclusive Persona

It is crucial to establish a starting point in a complex project like this, especially for me, as I initially considered inclusive fashion to be completely uncharted territory.

Persona image featuring Alice, a 23-year-old intern at a São Paulo law firm, living with her family and managing SMA (Spinal Muscular Atrophy), resulting in limited mobility. She aspires to pass the OAB exam, specialize in digital rights law, advocate for disability rights, attain self-reliance in the digital and physical world, and promote digital accessibility. Expresses frustration with online shopping, app usability, appearance uncertainty, return processes, and screen touch difficulties due to SMA.

Empathy Map

It is the best way to gain a deep understanding of your persona and cultivate empathy throughout the entire product development cycle.

Empathy map depicting Alice's experiences with disability and digital challenges. It encompasses her feelings, observations, statements, and challenges. Sections include 'Thinks and Feels,' 'Sees,' 'Says and Does,' 'Hears,' 'Pains and Problems,' and 'Needs and Objectives.' It highlights difficulties with app usability, challenges in performing tasks on a cellphone, and a desire for improved ease and precision in digital interactions. In the center, there's a picture of Alice.

Conclusion

Given the course dynamic, which prioritized accessible techniques over comprehensive Product Design methodologies, I faced a limited time frame for in-depth research. However, it proved to be a rewarding challenge as I immersed myself in the process, blending my years of experience and knowledge with swiftly acquired data from interviews and course contents.

Most people expect a simple and straightforward app that addresses basic yet critical usability issues. It's not rocket science; it requires more careful planning and empathy. In the next section, I will show you how I fixed the problems that I discovered and ensured a perfect evaluation score in the course.

Accessibility Handoff

Let me provide a few examples of how design and development teams can collaborate effectively. Here's a guide that demonstrates how the development team can work more seamlessly in building a project according to the specifications, particularly when they have a visual representation.

Sign-in screen prototype indicating clickable area sizes and HTML semantics guidance for developers.Homescreen prototype indicating clickable area sizes, image descriptions and HTML semantics guidance for developers.

Usability Test

In this project focused on users with disabilities, time constraints prevented traditional usability testing, so I prioritized interviews with guests to gain valuable insights and enhance project development, deepening my understanding of user needs and experiences.

Expected Results

My primary objective was to deliver a very high-quality project while simultaneously demonstrating that the belief "If it's accessible, it's ugly" is unfounded. Accessibility, usability, and aesthetics can coexist harmoniously, offering exceptional experiences for all.

Key Learnings

It's not magic, it's continuous improvement!

What This Project Taught Me?

Everyone has the right to be independent and feel good about themselves, which is why I chose an inclusive fashion theme. It's entirely possible to create a highly functional and aesthetically pleasing interface by adhering to the best practices of universal design and accessibility standards. It all comes down to the willingness to make it happen.