Freelance
Xchanje
What's the Focus?
Although there are many different fashion brands and companies for users to purchase from, many of them are not connected with the local community. Xchanje hopes to design an application that allows fashion to be further incorporated into the local area by connecting with like-minded buyers and sellers.

Why does this Matter?
Xchanje reached out to me as a new start-up to help them craft their idea for an ideal shopping platform that incorporated more of the community feel that many other applications lack.

How did I Implement?
I went through the design process to help Xchanje revamp their user experience design. Although the application is still in it's early stages, I conducted further analysis of user research and created screens based off user demand and client prioritization.
Duration
June 2021
My Role
Product Designer
Team
Sole Designer
Main Design Software
Figma
Research | Competitve Analysis
Fashion & Applications

I first began researching different competitors and focused on Shein, Depop, and Zara. Zara's was the most limiting of the three as they pushed their own brand. Shein offered more of an array of products with less of a brand appeal, but had little to no engagement with other users. Depop was the best application for helping users find new fashionable products from various sellers, but did not focus as much on the local community engagement. I further broke down certain features and qualities of each application to determine whether they possessed them.
Research | Affinity Mapping
Categorizing Feedback

After comparing competitors, I went through 10 interviews asking about users of various ages and backgrounds their ideas about online shopping and fashion. Based on their answers, I divided their quotes into various groups to help me identify what users would prefer to see in the application and what some of their experiences have been. With this information, I was able to get a better sense of where I should direct my focus towards.
Ideate | User Personas & Journeys
Understanding Florence, Samuel, and their Not-So-Fashionable Struggles

After creating the different components for the application, I then focused on identifying common users that will use the application. Fashionable's Florence is more concerned with the aesthetics of clothing as opposed to Sam who is more excited about the community aspects. With Fashionable Florence, her issue focused on not getting a certain product she wanted since she was buying from a local artist as opposed to a big corporation. With Supportive Samuel, he may not have been able to find anyone within his range that he considered part of his local community, causing him to feel disconnected from the application.
Ideate | Information Architecture
Establishing Pathways

Once I gained a better understanding of the users and some of their issues, I mapped out the information architecture of the application. The diagram focuses more on the overall concepts and features that a user may encounter depending on which part of the application they are interacting with.
Transforming Ideas
Design | Sketches
The Building BlocksWith the main areas subdivided, I sketched out a few screens that would be the focus of the application such as the Home Page, Store View,  User Profile, and so forth. This helped me finally get some of my ideas on paper and present to the client my initial ideas for the designs.
Design | Low-Fidelity Wireframing
Connecting the Dots

Moving forward with my sketches, I then created low-fidelity mockups to help identify the screen flow and components better. This allowed me to better subdivide the different sections and clarify which features would be shown in a specific section.


Design | High-Fidelity Features
Identifying Key Components

After presenting my low-fidelity design and getting the green light from Xchanje's product manager, I began creating the different parts of the application. I had little to no design system to follow as Xchanje did not have one created except for their use of purple throughout the application.

Design | High-Fidelity Features
Onboarding & Home Page

The onboarding begins by introducing the user to some of the features that can be found on the application. Users also have several sign up options provided to them. After this is complete, the user is shown a selection of featured products, different categories for exploration, people in their local community, and then a personalized list of products they may be interested in.

Design | High-Fidelity Features
Viewing Stores & Products

Users are able to click on some of the users within their local community that are selling their own products and explore their stores. Sellers can have multiple stores to allow for greater customization of their products. The user then selects a product that is tagged appropriately with a description. The user is given further information about the seller and then recommended other products.

Design | High-Fidelity Features
Messaging

The messaging feature encourages users to reach out about certain products and ask further questions if needed. The messaging feature can also be used to reach out to other members in the community to discuss other topics related to fashion.

Design | High-Fidelity Features
Profile View

The profile section provides both a view of one's own personal profile as well as other community members. In this example, the user is viewing another person's profile and can get a better understanding of the user, their stores, and the reviews people have left them.


Test & Iterate | User Testing
Gathering Further Information with User Testing

With the high-fidelity's complete, I went through another 8 round of interviews testing the application. I was given feedback about the overall functionalities and aesthetics of the application. Listed below are two HMW statements that dive further into some of my improvements for the application.
Test & Iterate | HMW
How Might We Add Notifications?

Many of the users noticed that the messaging application did not notify the user about the messages they received. To better incorporate the notifications, I added the number of unread messages as part of the navigation bar. I then highlighted the line of the user's profile for faster noticeability and the number of unseen messages for further clarification.

Test & Iterate | HMW
How Might We Improve Messaging?

Another common complaint from user feedback is the lack of sending attachments and voice messaging. Users preferred to have greater flexibility with sending the seller pictures, such as sending another clothing article and asking if they have a piece in a specific color. The microphone feature also simplified the process and gave users the choice to send voice messages if they prefer to not type.
Growth
Next Steps
Creating Transactions
An important part of Xchanje will be the process of buying the product as well as helping buyers set their costs appropriately. Given more time, I would have focused on some of these screens as well since they would be commonly used throughout the application.
Exploring the Search Function
Although the search icon is included as part of the designs, searching for a product is not part of final deliverable.  I discussed filtering options and recommended different ideas with sorting, and would have focused more on designing this function as well if I was not limited.
Growth
Takeaways
Designing Alone is Hard but Rewarding
This is the first project that I have done where I had no help from anyone with the exception from the client and their guidelines. I was nervous throughout most of the project because of the pressure on me to present finished, deliverables. However, I learned how to make difficult design decisions on my own and to trust my judgement.
Prioritization
Since I had a capped amount of hours to work on this project, I could not completely design every single component of the application. I needed to pick and choose what seemed to be the most important and communicate with the client to better understand which features they wanted to see the most.
Redesign Project
Next Project
Mutual Aid
An application that connects volunteers to their community and provides resources.
View Case
+