***
VIOLA
Modest fashion shopping iOS app using Visual Search
Viola
Modest fashion consumers are challenged by limited modest fashion options in mainstream Canadian brands. Viola aims to empower modest fashion enthusiasts by creating a platform where they can easily find and buy clothes that match their style.
My Role
I took on multiple roles in this solo project:
UX Designer
UX Researcher
UI Designer
Brand Strategist
Tools
Figma
Invision
Milanote
Timeline
Overall: 8 weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks
The Design Process
To begin, I immersed myself in the human-centered iterative process, focusing on understanding the main goals and pain points of my target users. This process was non-linear, often requiring revisiting steps to confirm my assumptions.
EMPATHIZE
Problem Statement: The Challenge of Accessing Modest Fashion in Canada
Issue: Limited Modest Fashion Choices in Canada
Impact: Over 1 million Muslim women in Canada struggle to find modest clothing within mainstream retail, leading to time-consuming and frustrating shopping experiences.
Secondary Research
I conducted secondary research to comprehend the world of modest fashion and the challenges faced by its consumers, considering its massive economic impact. Modest fashion isn't just about a particular style; it's for everyone, regardless of age, size, or beliefs, providing practical and stylish choices. However, it's often time-consuming and challenging to find as highlighted by industry experts.
The global modest fashion industry is valued at an astonishing $277 billion, with projections indicating further growth.
Ghizian Guenez (founder of The Modist brand) says the problem isn't finding things to buy; it's hard to look for them.
Rahima (2020) highlights the difficulty of finding fashionable yet modest clothing, often feeling forced to choose between fashion and modesty.
Objective
To understand the problems faced by Muslim women, aged 18-30, when they shop for modest and fashionable clothes.
Assumptions
Modest fashion Muslim women always have difficulty finding modest styled clothes inside Mainstream brands and retailers of Canada.
Following the content of Muslim modest fashion influencers is time-consuming and the clothes do get sold out on the provided links.
Hypothesis
Modest fashion Muslim women have to put extra effort and time to put together a modest and fashionable outfit which makes shopping challenging.
“I will know I’m right when I see majority of my interviewees validate at least 70% of my assumptions.”
Initial How Might We Statement
How might we help Muslim hijabis to find and wear modest yet fashionable clothes?
This statement was updated after conducting primary research
User Interviews
After conducting secondary research, I selected the following participant criteria for Muslim women:
Wear a hijab
Identify themselves as "modest fashion consumers"
Are aged 18-30 years old
Are employed or job-seeking
Based on the above criteria, I conducted six user interviews for my primary research.
Analyzing Key Discoveries from Primary Research
My discoveries have been organized into:
Behaviors
Pain points
Motivations
Click image to enlarge.
Key Themes and Insights from Key Discoveries
Time Consuming
Muslim women have a hard time in finding and shopping for fashionable and modest clothes. It is time consuming and exhausting.
Uncomfortable Experience
It is an uncomfortable experience of layering clothes to make them more modest.
Modest clothes are expensive
It is difficult to find modest clothes that are reasonably priced.
Hypothesis Validated
Over 90% of interviewees verified the time-consuming nature of their shopping, uncomfortable layering practices, and the challenges of finding affordable modest fashion.
Revised How Might We Statement
How might we reduce the time of Muslim women in accessing modest and fashionable clothes in Canada especially during summer season so that they can balance modesty and trend in their clothing style with less time and effort?
DEFINE
The Persona
Haya(21)
A senior year student in business school and a part-time photographer in Toronto.
Haya’s motivations included wanting to access modest and fashionable clothes in Canada and match her hijabs with her clothes.
Haya’s pain points included having hard time finding fully covered clothing that looks good and practical during summer time in Canada. She has to spend extra time and money to make fashionable clothes modest.
The Experience Map
An online search of modest and fashionable clothes for shopping
From the experience map, I identified opportunities that align with Haya's goals. In particular, providing a platform offering modest fashion recommendations and connecting her to shopping resources.
IDEATE
Tasks and Task Flows
By capturing goals and pain points of my persona Haya, I began developing user stories and identifying epics to help come up with a solution that works for the user’s needs and delivers the most value.
Click image to enlarge
Task Selection
I created user stories and task flows, ensuring the app caters to users' needs and delivers value. The task flow illustrated the process of user uploading image and searching for clothing items.
PROTOTYPE
Sketching
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the project goal, and the heuristic evaluation. They each pointed to the fact that the flow should be easy and intuitive. I came back to the sketches throughout the entire design process to make sure that we don’t lose sight of my primary goals and ideas.
Click image to enlarge
Wireframes
With the guide of these early sketches I created initial greyscale prototype for the first round of user testing.
Then, I improved them by adding a few relevant images and typed down body copies. At this stage, the wireframes were defined enough for some user testing. Based on 2 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.
TEST
Usability Testing
After completing my initial prototype, I conducted 2 rounds of usability tests with 10 users. The focus of testing was to confirm the users ability to navigate the overall task flow successfully.
Test questions were also targeted to determine user preference with regards to the ease and length of the flow. User feedback was helpful for verifying design decisions and beneficial for targeting feasible and impactful high-fidelity iterations.
REFINE
Viola
UI Design
After resolving usability issues, I crafted a brand identity that embodies grace, chicness, and a fusion of fashion with modesty and sophistication. The brand aims to be exploratory, collaborative, and satisfying, offering personalized solutions.
With my brand personality in mind I started to brainstorm some possible names and concepts for my brand.
A few that I felt were clear and reflected the brand personality were:
1.Viola
2.Find Modest
3.Modest Republic
Ideas that were quickly rejected were:
•Style me Modest (too long)
•Modesty (not clear enough)
•Gallardia (doesn’t sound stylish)
Viola is the name of a flower which symbolizes modesty, innocence and decency. While thinking about the adjectives for my brand, I thought what if flowers have a meaning too just like colors do. And then sound and meaning of Viola flower got my heart. I named my App - Viola.
I then started to collect images, colors, patterns and textures that represented the feelings I wanted my brand to evoke in our users.
How would Haya feel when she was using the app?
I then curated a moodboard with diverse yet modest colors and images to evoke the desired feelings of sophistication, diversity, modesty, energy, and warmth for our users.
Mood Board Version 1
Mood Board Version 2
Mood Board Final Version
Color
Color and Typography
Enhance the experience and set the tone with a brand identity
For my brand I wanted a font which is both round and classy to match with the layout of feel of my app. I tried finding different fonts from stores such as Mango, Banana Republic and Everlane but it wasn’t fitting with my app.
Finally, with the help of my educator, Andrian, we found Raleway font for Viola.
Brand Colors
Brand Type scale - Raleway
Wordmark
Logo Development
How can a product be represented in a name?
I liked classy, defined, bold and sleek fonts for my brand name. Some of these were:
Home Screen Iterations
User interviews as inspiration for my design decisions
High Fidelity Prototype
Putting it all together
Gathering all building blocks for high fidelity, I jumped in to making a high-fidelity design.
Are you frustrated with endless search for modest and fashionable clothes in Canada?
Viola will make this easy for you!
Try the prototype for yourself
Viola Marketing Website
Brand Expansion: Marketing Website
After assembling my high-fidelity prototype, I started building my marketing website to connect Viola to its consumers.
I began developing a responsive marketing website that that focused on building a strong value proposition. I set its overall tone a mix of casual yet professional to suit the liking of its target market.
Viola Web App
Further Brand Expansion: Multi-Platform
I then stepped up to transition Viola mobile app to other platforms. As my persona, Haya, is a student and part-time photographer, she uses her laptop for studying and working. Haya would want to explore her buying options of modest fashion clothes on large screen considering laptop or desktop. I decided to make the web version to make Haya shopping experience more comfortable and easy.
Next steps
Improved + Expanded Features
Viola app has still a lot of room to bloom and flourish. The insights from the interviews showed me that users want to buy clothes inside the app instead of being redirected to the website of stores. It would be great to explore the way of adding inside app purchase feature.
Usability Testing + Further Research
There is a need of more extensive testing and research as time span of eight weeks is not enough to develop a well grounded solution. I still need to implement some great feedback from interviews that I couldn't cater to because of short time span.
Learnings
Redesigning and Iterating is part of the process.
Colors inspiration can come from creativity
Take inspiration and active feedback from other designers.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.