Role: UX / UI Designer, UX Researcher
Duration: Oct - Nov 2022
Tools: Figma, Moqup, Google Docs
Fast fashion has become a popular and affordable way to get new clothes easily but it comes at a cost. Producing massive amounts of trendy clothes quickly and inexpensively to keep up with fast fashion means clothes become outdated sooner which makes customers stuck in an overconsumption cycle. There are also negative environmental impacts as manufacturing clothes uses a lot of natural resources and creates harmful greenhouse gas emissions. Often the clothes are made with chemicals and are left in landfills.
An alternative to fast fashion that has seen growing popularity is thrift shopping and buying second hand. However consumers have begun to complain the market is over saturated and not very size inclusive.
Create a shopping experience that is an enjoyable, easy and sustainable way for users to get new clothing, bags, and accessories. By building a responsive web app that lets users swap items they don't want for items they do users are able to clean up their closet while updating their wardrobe. With thorough search filters, detailed product descriptions, and an intuitive messaging system N2u aims to be an inclusive, affordable, and friendly alternative to fast fashion and over picked and over priced second hand fashion.
Now that I had an idea about what the competitors were doing I needed to gain insight about Nu2u's potential customers, to understand their frustrations and what they would want to see in the app. To find who might be Nu2u's potential customers I began narrowing down my target demographic by first looking back into the competition. Using the website similarweb.com I looked into the traffic analysis of the three most popular second-hand clothing sites found some common themes. 60 - 70% of users where women and were also under the age of 34. Knowing my main audience would likely be young women, but not wanting to pigeonhole the company I gathered 15 interview participants. Since the company is based in the United States I also selected participants living in the States and who enjoy shopping for second hand clothes. Using Google forums the participants were asked the following questions in an unmoderated user interview:
.png)
.png)
Scanning through products is time consuming and often unsuccessful
Cannot ensure the quality of items
Since items and users are not always authenticated shopping online for products means users have no way to verify if the item or seller is trustworthy and users are worried about being ripped off.
Product descriptions are often lackluster or don't match the reality of the item
Many users are nervous to thrift online because they are worried about being scammed. They noted many products don't have a description or the description sounds too good to be true.
Faced issues with online payments
Finding a trusted way to send way to send payment was a common frustration amongst users, due to non-standardized methods and unavailability of payment options.
Missing out on products due to poor response rates and communication
Thrifting is not size inclusive / sizing can be majorly off
Users who identified as plus size especially found difficulty in finding clothes available in their size. Clothing stretching/ shrinking with use also can not guarantee the size listed is accurate.
Hashtags are spammed with random and irrelevant tags
There is little to no vetting with the amount of hashtags or how relevant they are to an item, which makes searching for items very difficult.
Users want to be more sustainable and are leaning away from over consumption
Society is learning more and more about the environmental impact on over consumption has and users are less interested in purchasing new clothing for every event.
Now that I knew what my users pain points were, it was time to figure out how to solve them. To do so I had to try to get inside my user's head. I started by creating two user personas based off of the demographics and answers of interview participants to better understand and empathize with them.
With my imagined user and competitive analysis in mind, I began the ideation process. The methods I chose to use were: how might we's, crazy eights, and both big-picture and close-up storyboards.
My focus was on was how to keep the user interested and engaged while trying to avoid the endless scrolling and difficult sorting that can come with online shopping platforms.
.png)
.png)
.png)
When transitioning from paper to digital wireframes, I kept the layout fairly similar, with only mild changes made to the design.
I wanted the matching feature to be the main attraction of Nu2u, so while users can view products in a traditional online shopping grid view I wanted this screen to be the first users saw when they opened the platform.
To encourage users to regularly upload new items to swap regularly I wanted this to be a prominent feature. Since the competitive analysis showed multiple clear photos and detailed product descriptions prove successful this process was broken down into simple and concise steps. This avoids overwhelming the user with content and having one large page to scroll down.
Creating digital wireframes for mobile and tablet was important in ensuring that the experience would be consistent on a smaller screen size.
To create the low-fidelity prototype, I connected all the screens to complete the user flows that correlated with the nav bar. Since users could view their feed page in either swipe or grid mode I needed to ensure Nu2u had multiple access points for seamless transitions throughout the platform.
I conducted two rounds of usability studies. Findings from the first study helped guide the design from wireframes to mockups. The second study used high fidelity prototype and revealed what aspects of the mockups needed refining.
To complete the usability tests ten participants from my target demographic were gathered to participate in a 10 - 15 minute moderated usability test. I chose to do a moderated test as I thought it would be helpful to observe each participant's body language and tone of voice while using the app. I used this information to create an affinity map to help turn observations into insights and discover what the user's pain points were.
The"Alerts" section titling needs more distinction
The headings change during a suggest swap user flow, making it seem like a new action
"Similar Items" seems redundant as users would rather use a specific keyword search instead
Swiping action feels unnatural and to much like just pushing a button left or right
Dionne's "Wish List" user flow feels unorganized
Having previously swapped items in the "Favs" seems out of place
The "Proposed a Swap" user flow with Andy feels incomplete
Users lost their page orientation at times due to no hover effect to help orient them
After receiving feedback from users about the low-fidelity prototype it was time to address the pain points, and to do my favorite part of the process, adding visual elements.
One of the biggest concerns brought up during the first usability test was how unnatural the swiping motion felt. Since the intent of this feature was to add a fun and simple way for users to brows items I knew I had to improve the gestures to cue the user which way they are swiping.
Users also expressed they thought the "Similar Items" element was redundant as they are more likely to use a filtered search to find similar items. This made me think of other ways to display useful information on the page and made some changes. To replace "Similar Items" I added a "Wish List" instead in hopes of encouraging more matches among users. I also added what material an item was made from and if a user had liked any of your items as features.
The next pain point I addressed cleared up confusion on the "Alerts" page. With more distinct language users can easily know which section they are on.
Other improvements to the page were to have the "Activity" page before the "Chats" page as this page would likely be getting more alerts. I also updated the "Search" and "New Chat" features to be simpler to use and have more prominence. The last feature I added was the green or red online indictor next to a users profile. I thought this would be helpful addiction to the chat feature.
My second round of usability testing testing helped me fine tune my user flow and animations. While users gave positive feedback about the design they struggled at times with the user flow, especially knowing if tasks were complete.
The first user flow I tried to improve was, the page were a user agrees to a Swap Suggestion from the user Andy. After a user would agree to a swap and the page would go back to straight to chat. Tested users 7 out of 10 times didn't know what they were supposed to do next after this. This is why I added the prompt informing users they should send the first message to initiate the swap, and sets a precedence for Nu2u and hopefully facilitates more chats.
Up next on my pain points to fix was Dionne's "Suggesting Swap" page. The previous user flow was clunky, indirect and confused participants. Having to leave the "Suggest Swap" page caused users to loose their site orientation and was unnecessary. To combat this I had Nu2u suggest similar items so users could stay on the same page. While this is a bigger project for developers I believe it is necessary for making the "Swapping" process easier and more streamlined and would hopefully increase the number of swaps between users.
The last main improvement I made was cut out unnecessary content. In almost every usability test 9/10 users either did not notice the tabs "Not Swapped" and "Swapped" or did not understand the difference. Participants from the study did not see the value of seeing "Favs" they already "Swapped" as they had already likely received these items, so I redesigned the page to not include that tab for a more focused path for users to find their favorite items.
I wanted users to be able to be able to view from their mobile and tablet devices so I ensured the experience and branding was consistent on smaller screen sizes.
With my design changes complete it was time to add the interactions. My hi-fi prototype included more thoughtful design cues to help orient and engage the user but adding smother swipe transitions and hover effects.
Nu2u has swiping features as well as buttons to make it more accessible to users with various motor capabilities as well as both mobile and desktop users
All text and icons on Nu2u meet WCAG AAA standards so all users with various levels of color sensitivity can read its content
Chat features have text-to-speech (TTS) for those with visual impairments, dyslexia, and other disabilities
All touch targets are large enough for ease of use and for users with cognitive disabilities and passes the WCAG criteria of 25.5.
Target users enjoyed the swipe feature and how easily they could sort through clothing while still making it feel like a game. Users found the idea of Nu2u to be unique
and thought they could spend a long time navigating around the platform.
Helping the user orient themselves and have a seamless user flow goes beyond simple transitions and well designed graphics. Adding touches like hover effects and correctly timed prompts is important for users to understand and navigate the platform. It is important to know how fast or slow transitions should be as well so user doesn't notice them but helps in their journey.
“I feel like I would become addicting to swiping on this. It's like thrifting but easier!"
"This would have been so useful when I had all those weddings I had last year. The swipe function would have made it fun to find new clothes, instead of a chore like it is searching and buying online”
Conduct a usability test to check if the new features need further refining
Pinpoint search features to discover best way for users to find items easily
Explore messaging options to ensure the chat feature is enjoyable to use
Continue making Nu2u as accessible as possible, such as making sure alt text is up-to-date.
Pawtner
A Responsive Website for an Animal Shelter that Helps Users Adopt their New Best Friend
I’m always open to fruitful collaboration, so if you are in search for an enthusiastic UX designer, I'd love to hear from you!
Email: suzybiernat@gmail.com
LinkedIn: www.linkedin.com/in/suzy-biernat
