Style Ally
"As an individual with visual impairements, I face challenges envisioning outfits and learning clothing details while shopping in-store."
"As a fashion design student, I think assisting others with styling will inspire creative experimentation and generate ideas for clothing design."
While clothing is readily accessible to most people, people with visual impairments face additional obstacles in fully experiencing fashion and finding garments that best express themselves.
How to
Make Fashion More Accessible
About
This is the space to introduce the team and what makes it special. Describe the team culture and work philosophy. To help site visitors connect with the team, add details about team members’ experience and skills.
Research-based master thesis project • UX research and UX/UI design iterations • User testing • Accessibility study • Collaboration
Project Type
Feb 2021 – May 2021, Latest updated on Sept 2023
Duration
Primary Thesis Supervisors: Kevin Park (NYIT)
Thesis Supervisors: Prof. Jun JY Hong (FIT)
Collaborators:
• 3 participants from blind and visual-impaired communities
• 5 fashion design M.F.A. Students from FIT
Supervisors &
Collaboration
Figma, Google Docs, Google Sheets, Google Forms, Google Drive, Zoom, Notion, Pencil & Paper ☺︎
Social media: Reddit, Facebook
Tools
Access to
Clothing Description
The QR code reader is designed to enhance users' in-store shopping experience. By simply scanning the QR code on clothing tags, you can effortlessly access garment information from the website, eliminating the need to seek assistance or feel inconvenience to others.
Connect to a Stylist
Style Ally connects you with a voluntary fashion stylist, who will provide instant styling advice for your outfits through a video call. Additionally, appointment and message features will never let you feel you are imposing on other's time.
Gain styling experience
Style Ally aims to offering a mutually beneficial solution, enabling protégés to acquire styling advice while affording stylists valuable styling experience.
Create Your Fashion Blog
Creating your accessible fashion blog to share fashion trends, and styling experiences and learnings via articles and vlogs. Discussion posts allow you to exchange opinions with other fashionistas. Let's enjoy fashion together!
Overview
Introduction
Designing an accessible mobile app that connects people seeking personalized fashion advice with fashion stylists, while utilizing augmented reality (AR) to offer enhanced support for individuals with visual impairments, Style Ally focuses strongly on accessibility. It caters to diverse fashion needs, ensuring a user-friendly and inclusive experience for all.
The previous version of this master thesis project is featured on the UX/UI Design & Development Department Blog at the New York Institute of Technology. View
Thesis Advisors & Collaborators
Primary Thesis Supervisor:
Prof. Kevin Park (New York Institute of Technology, NYIT)
Thesis Supervisor:
Prof. Jun JY Hong (The Fashion Institute of Technology, FIT)
Collaborators:
Participants from blind and visual-impaired communities
Fashion Design M.F.A. Students from FIT
My Role
UX/UI Designer & UX Researcher
Market Research, User Research, Concurrent Validity, Accessibility Research, Visual Design, Style Guide, Wireframing, Prototyping, Usability Testing, Documentation, Presentation
Tools
Target Users
Since learning about fashion trends, styling, and clothing mainly relies on our visual perception, my user research was focused on users with visual impairments for the first phase of this project.
To validate my hypothesis, I engaged fashion design students, constituting the second user group.
User Research
Affinity Mapping
View Details →
I created a Google Form survey and screened 3 participants from a pool of 15. And then I crafted test plans and carried out 6 interviews to gather qualitative data from the selected participants. These inquiries covered a spectrum of topics, from broad themes to intricate fashion details.
Market Research
Competitive Analysis
I evaluated 7 assistive mobile apps and 7 fashion styling apps, identifying 3 in each category as potential major competitors to Style Ally:
-
Seeing AI: Self-assist tool (Reading text, identifying colors/objects/people, etc.).
-
Aira: Gain access to daily visual information via calling professionally trained agents.
-
Be My Eyes: Gain help for daily tasks from volunteers through video calls.
I also assessed three leading fashion styling apps for accessibility, usability, and findability. Unfortunately, none of them fully support voice-over or alt text, resulting in a significant accessibility failure across all of them.
-
Cladwell: Styling users' everyday outfits by using the clothes already in their closet.
-
Stylebook: Virtually organize your real wardrobe with 90+ tools for outfits, sizes, and inspirations.
-
CHIC - Outfit Planner: Offers personalized weather-based outfit recommendations.
UI Comparison
I analyzed the user interfaces of two assistive apps and two outfit styling apps that I think are most relevant to my case study. In my user research results, the visually impaired participants preferred larger icons and found it easier and quicker to distinguish between shapes rather than colors.
Validating Ideas
In-person Experimentation
Scenario: I went to ZARA, a clothing store to validate my initial ideas. I disguised as a customer with visual impairment and tried to video chat with my helper. I showed him the clothes I picked and asked for his advice in real-time.
Goals:
-
Empathizing users' thoughts, says, feels, does
-
Learning the challenges of shopping in-store independently as a user with visual impairments
-
Finding potential solutions for the barriers I found in-store during the video chat
Tops findings:
-
It's kind of difficult to find and use a mirror alone in the common area
-
Increased pressure with longer video chats in-store
-
I think it is easier to use fitting rooms for hanging clothes and private video chats.
Goals
For Phase 1
-
Learning the practical challenges of apparel shopping and daily outfit styling for people with visual impairment
-
Validating my hypothesis through collaborative case studies and experimentations
-
Uncovering users' pain points and needs
-
Create design solutions with enhanced accessibility to support people with visual impairments to actively enjoy fashion and outfit styling
Design Process
Information Architecture
+ User Flows
According to the results of user research and idea validation studies, I organized and arranged the app's contents to create this operational map. It will make sure all the information in the Style Ally app is findable, usable, and understandable.
_edited_edited.jpg)
Design Iterations
Highlights
I produced over 200 wireframes, encompassing diverse design iterations at varying fidelity levels for both user groups (protégés and stylists). Concurrently, I engaged two participants with visual impairments and enlisted one fashion student for remote moderated user testing. I implemented refinements based on the test outcomes.
Protégé Home
Choose Stylist
Chating with Stylist
My Closet
Design & Development
Low-Fidelity Wireframes
Overview
Protégés
Style Ally caters to two distinct user groups: Protégés and Stylists. This single application accommodates the diverse objectives of both categories. Notably, the QR code scanning functionality is strategically positioned on the third screen for new users and on the second screen for returning users. This deliberate user flow ensures efficient access to app features immediately upon app launch.
Stylists
Style Guide
View Details →
Style guide introduces light mode and dark mode color palettes and design components that enhance accessibility, usability, and visibility. Designing user interfaces based on the style guide provides cohesiveness, consistency, and efficiency.
Accessibility
Highlights
Accessibility ensures that people with disabilities can access the same information from a system as everyone else, and also enjoy the same benefits.
I focused on color contrast, shapes, and large font sizes, and implemented alt text for all image elements, drawing from both user and design research.
Distinctive Shapes
I drew inspiration from road signs and newspapers, incorporating distinct shapes and high-contrast colors to improve visibility. Recognizing the potential confusion caused by identical shapes and text lengths on two buttons that are next to each other, I implemented icons and varied button styles to clarify their functions.
Font Sizes
Larger text is crucial! Users with visual impairments have to rely on tools like Voice Over, but they prefer utilizing their remaining visual abilities before resorting to voice assistance, as shown in my user research.
Alt Text for All UI Components
The Style Ally app has auditory descriptions of on-screen elements, aiding voice-over users. Additionally, users can add alt text to their blog post images or opt for an AI-generated version. Examples are shown in the image above.
Color Contrast Check
At first, I tested the initial version of the design components with the WebAIM Color Contrast Checker. Later on, I discovered the plug-ins in Figma, and I switched to Stark Accessibility Tools (Comply with international legislation & standards: ADA, WCAG 2.1) and A11y - Color Contrast Checker (by Microsoft that follows WCAG 2.0) to work more efficiently and make sure all text and graphic components were readable.
High-Fidelity Wireframes
Overview
Protégés
Stylists
Style Ally is a 2-in-1 mobile app that provides a simple, intuitive, and direct user flow for both protégés and stylists who can choose their goal right on the third screen. Users do not need to sign in or sign up if they just want to use the QR code reader feature.
Major Goals of Protégés:
-
Independent shoppers: Utilize a QR code reader to access garment descriptions in-store
-
Worry-free experience: Connect with a specialized fashion stylist who is available for you and obtain styling advice from the stylist
-
Learn fashion trends and connect with fellow fashionistas easily
Major Goals of Stylists:
-
Providing instant outfit styling/choice advice to protégés via video calls and messages
-
Sharing experiences, introducing fashion trends, and exchanging opinions via a fashion blog
-
Acquire valuable fashion styling experience and draw inspiration for fashion design, which can greatly benefit fashion-related careers
Conclusion
Takeaways
I had a great time working on this thesis project with my professors and collaborators, and I've learned a lot, including advanced UX design and research.
-
I have learned a lot about accessibility, which is paramount for a UX designer.
-
I became a volunteer and started helping individuals who have visual disabilities on the Be My Eyes app. Even though I don't receive calls that often, I still think this is a meaningful experience for me as a UX designer.
-
Conducting concurrent validity, while not perfect, was a significant first-time learning opportunity.
-
Directly engaging with potential users unveils invaluable insights for creating user-centric solutions.
-
Analyzing competitor apps inspires me to align customer needs with company objectives.
-
Flexibility and task prioritization are essential for achieving project goals amidst unexpected challenges.
Next Steps
About this project:
-
I revisited this project two years later and made the fourth design iteration. If I have more free time, I will plan to run usability tests for the latest design updates.
-
If I could find a sponsorship to develop this app and make it real, that would be the 2nd phase.
Moving forward in UX:
-
Because of this project, I started to learn more about web accessibility as well.
-
I would love to learn more about how AI can improve accessibility to user experience.
-
I wonder how VR and AR can be applied as an assistant while people shop and in what form?
*\ Thank you very much for your time! /*
************************
Personas
Based on interview findings, I crafted personas for two distinct user groups: people with visual impairments and fashion design students. Developing these personas enabled a comprehensive understanding of user needs, experiences, pain points, goals, and behaviors. Subsequently, I leveraged these personas to construct empathy maps, user journeys, and mental models.
Collaborative Case Study
Highlights
Scenario: A participant with visual impairments is seeking help for her outfit of the day at home, so she is starting a video call with five fashion design students (stylists) for styling advice. There were four communication methods were tested between the two user groups.
Goals:
-
Find out the pros and cons of the four given different methods of instant real-time feedback/advice to users with visual impairments and fashion design students
-
Gathering feedback from both sides participants
-
Validating the feasibility of the ideas
Top findings:
-
Participants with visual impairments prefer verbal discussion, while fashion students prefer texting and emojis.
-
Participants with visual impairments prefer to speak with a familiar stylist. Being able to make an appointment would be nice.
-
83% of participants considered machines (AI) can't replace human advisors.
-
Fashion students need a brief introduction about the individuals they will be advising.
Concurrent Validity
Highlights
Scenario: A participant with visual impairments was shopping in a clothing store. After she picked some clothes, she started a video call with a fashion design student (stylist) for clothing choices.
Goals:
-
Validating the feasibility of the ideas in-store (simulate a real-life use case study)
-
Gathering feedback from both sides participants
-
Learning the challenges, limitations, and preferences from both sides of the participants
Top findings:
-
The participant with visual impairments liked the conversational and more direct feedback.
-
Optimal in-store advice duration is 10-15 minutes for visually impaired participants, avoiding extended phone calls and pressure buildup.
-
The fashion student favors appointment-based interactions for better preparation and engagement during phone calls.
Showcase
The original version of this Master thesis project is featured on NYIT's UX/UI Design & Development, M.A. Blog.