Empathize.
Problem Statement.
Our users need a way to enjoy fashion without supporting exploitative supply chains.
We will know this to be true when we see how many users use the app to create fashion profiles, utilize its list of resources, participate in community discussions, and/or have ongoing connections with our ethical fashion consultants.
Solution.
The Clear Fashion app empowers users to participate in a community that loves fashion and ethical consumption. Through popularizing ethical fashion we will create a collaborative community of thrifters and designers that will work together to redefine what it means to be thoughtful consumers.
Executive Summary.
Clear Fashion (CF) will be an app that empowers conscientious consumers to find an alternate community of individuals who are as passionate about design as they are about ethical consumption.
Target Audience.
CF’s target audience is consumers between the ages of 15-40. We chose 15 since members of Generation Z have generally shown themselves to be both fashion-forward and environmentally attentive. Our upper range is capped at 40 since anyone over 40 tends to be more established and less interested in investing money into an app with DIY fashion and upcycling hacks.
Competition.
Our most intuitive competitors re: fashion accumulation are apps such as “The Hunt” or “Polyvore” which help users identify where to obtain various fashion pieces they’ve seen online and/or in person.
More pertinent competitors are “Wishi”, as this app is one of the only expert stylist centered apps, and “Think Dirty” which is an app focused on reviewing the harmfulness of elements found in beauty and hygiene products.
Conclusion.
It is entirely possible to create an app centered on merging user’s ethical desires for consumption and their love of design. The lynchpin will be crafting a community experience that encourages users to revel in design and collaboration.
User Research
In an effort to understand perceptions around ethical fashion I conducted three in person and remote interviews to better understand my intended users.
Research Goals
To understand how users approach buying clothes online and offline
To discover potential user motivation in exploring new fashion trends
To discern perceptions about the clothing industry
To evaluate the role of community in shaping user fashion preferences
Analyzing Data
In order to organize my gathered insights, I created an affinity map to segment my data. This allowed me to visually organize my findings into a variety of categories empowering me to see a plethora of patterns.
Key Insights
Many interviewees disagreed with corporate practices behind textile production. This compelled all interviewees to opt into purchasing higher quality items.
Every interviewee cited their fashion recommendations from friends, family, tv shows and online content.
Since the pandemic all interviewees were buying more comfortable rather than fashionable clothing.
Many users opted into buying online while perusing in actual stores.
Define.
Based on the findings from my research, three user personas were created based on the needs, frustrations, and motivations my interviewees highlighted in the surveys. These three personas will be the foundations off of which I develop my user journeys and user flows to more accurately understand future users of the ClearFashion app.
User Personas
I then created user personas in order to make sure I kept my user’s desires, goals, needs, and frustrations at the forefront of my design process.
User Journeys
Once I understood the core motivations of my users I put on their metaphorical skin and imagined what their emotional journey would be when navigating my app so I could better serve their goals and expectations.
User Flows
Finally, I crafted user flows in order to have a hypothetical map demonstrating how users would navigate my app in order to meet their various goals.
Ideate.
Having defined my user personas, journeys, and flows it was time to begin formulating the hierarchy of the app by creating a sitemap. Once I understood how the basic bones of the app would fit together I could begin fleshing out my ideas by sketching wireframes with pen and paper. From those sketches I’d begin giving my app a face by creating mid and high-fidelity prototypes in Adobe XD.
Information Architecture
To best assess how my users would intuitively sort ClearFashion’s hierarchy of information, an online open card sort was conducted comprised of 29 cards and 6 participants. From those results I would understand my user’s organizational biases and thereby be able to create the optimal layout for the ClearFashion sitemap.
Cardsort
To best assess how my users would intuitively sort ClearFashion’s hierarchy of information, an online open card sort was conducted comprised of 29 cards and 6 participants. From those results
Cardsort Results
From these results I understand my user’s organizational biases and was thereby able to create the optimal layout for the ClearFashion sitemap.
Similarity Matrix
While both a skeptical dendrogram and best merge method graphs were created, the most helpful guide map came from plotting the results into a similarity matrix. The darker the shade of blue the more often users grouped cards together and therefore the more often my users found consensus in ClearFashion’s sitemap architecture.
Sitemap
Original Sitemap
Now that I understand generally how my users intuitively organize information within my app, I can modify my sitemap to better serve my user’s navigational expectations.
Revised Sitemap
Replace “Search” page header with “Blogs & Tutorials”
Move “Upload” to under the hub page “Blogs & Tutorials”
Create a “Help” parent page
Sub the “Account” page beneath “Settings”
Wireframes
Having derived solid insights from my sitemap survey I was able to understand the way users would expect to navigate the ClearFashion app. From that place I was able to use pen and paper to sketch out wireframes to quickly frame the main functionalities of the app without getting too absorbed in unnecessary details.
Low-Fidelity Wireframe
Focusing on the primary persona “Ada”, I began sketching out the low-fidelity flow of booking a stylist session.
High-Fidelity
Using Adobe XD I fleshed out the wireframes into a higher-fidelity prototype and included written copy to give the wireframes a more authentic feel during user interaction.
Test.
Having created a v.1 of the app it was time to see how well it achieved its user goals. User testing was conducted remotely with six participants. This usability study was designed to determine participant’s learnability when navigating ClearFashion’s interface and to measure how proficiently new users understand the app’s mission, and complete basic initial functions like logging in, scheduling a stylist, as well as uploading or liking a tutorial.
Affinity Mapping
So that I can make sense of my testing insights I used an affinity map to organize and group together recurring observations, quotes, and errors among my subjects.
Rainbow Spreadsheet
Finally, using Jakob Nielsen’s Severity Rating Scale I rated errors based upon their level of severity. This allowed me to highlight and prioritize which errors needed to be addressed first.
Key Testing Insights
Many users didn’t understand the mission of the app
Users had trouble locating the scheduling icon for the stylists
Users had trouble reading the subtitle on the fashion category page in onboarding
Testers had trouble reading the navigation tabs at the top of the screen
Users had trouble locating the payment options at the top of the screen
Iterate.
User testing revealed valuable insights regarding the design and navigability of the ClearFashion app. Focusing on the main friction points and insights gleaned from testing, iterations on the overall design of ClearFashion were made to the high-fidelity prototypes.
Stylist Filter
In version one, half of all users had trouble locating the scheduling icon for the stylist. Many users also requested there be filter options for searching for a stylist as well as transparent stylist price points.
Navigation
Nearly all users had trouble reading the navigation buttons at the top of the dashboard and found some of the options in the bottom navigation to be redundant.
I changed the font for the navigation buttons at the top of the page for easier reading, added a drop shadow to add emphasis, and removed the trending button from the navigation in order to increase the size.
While other apps, such a Buzzfeed, utilize a “trending” button, my users found it to be redundant next to the “Latest” button.
Furthermore, I recrafted the bottom navigation buttons. I eliminated the gear icon (for settings) and consolidated it functions into the profile button (which when clicked will take users to their profile and their settings). I also added an “upload” button in order to encourage users to add content to the app (which is of the utmost importance since this is primarily a community upload/sharing app).
Scheduling a Stylist
Half of all users had trouble locating the scheduling icon in v.1 of the prototype and many users requested that the stylist’s price point and past reviews be made available for perusal.
So, in v.2 I reformatted the page so that users would have access to reviews and I made the scheduling button with price point the most prominent button on the page to both inform and encourage users that their stylist is ready and available for hire.
Payment Options
1/3 of all users had trouble finding the payment options and information input fields during the scheduling flow.
Therefore, I reformatted the experience for a more streamlined experience. In version 2 users will be able to access a drop-down menu for payment options with the required input fields prominent and clear.
Onboarding
When users were asked to explain the mission of the app, all were confused. Since the app is primarily mission driven, I realized I needed to explain better how the app empowered the user to partner in the app’s mission aka encouraging sustainable fashion practices.
Key Design Insights
My user testing revealed to me that there were elements within my design that users found superfluous, unclear, or redundant.
After bringing my design to peers and mentors for review I realized that my app could become even stronger if I submitted it to a complete redesign.
In my redesign I revamped the entire navigational structure of ClearFashion as well as its overall aesthetic. User testing since redesign has been overwhelmingly positive and overall ease of use has increased dramatically.
Iterate.
For my final design of ClearFashion I wanted to have a colorful, sleek, and engaging interface.
I wanted my users to feel that even though this app is about opting out of exploitative cycles of consumption that luxury could still be a priority in eco-conscious fashion.
To that end, I utilized a variety of warm colors partnered with sophisticated design techniques to make ClearFashion inviting, informative, and indulgent.
Finalize.
After months of testing, refining, and polishing ClearFashion’s final designs are complete and a clickable prototype of the app is ready to use.
Next Steps.
1) Conduct further user testing and see how redesign facilitates the user’s experience
2) Integrate insights garnered from user testing into another iteration of ClearFashion’s Design
Retrospective Analysis.
This was my first UX project as a designer, as such there was a lot of learning and professional growth that I experienced throughout the process.
My biggest takeaway from this project was that transitioning from multimedia design and communications to UX was a challenge - but one I found infinitely gratifying and engaging.
What Went Well.
The design responded well to the research conducted throughout iterations of the design phase, even when it required massive overhauls.
Considering the learning curve, It was completed quickly, and with relatively few unforeseen issues.
It allowed me as a designer to expand out of my comfort zone and experiment with new tools and skills.
What Was Hard.
The UI design phase took much longer than anticipated.
Complications arose when peer review highlighted needs for massive design overhaul and adjustments had to be made in project scheduling to compensate.
The UI phase dominated some of the design for longer than expected, and had to be brought back on track to align with the research.
What Can Improve.
Plan for unforeseen challenges during the design process and leave ample time in the schedule in case these issues arise.
Practice better communication with the team and client to understand the full scope of what is expected.
As a UX designer, practice rationalizing all design decisions with research to ensure all choices are made to better serve the user.