OVERVIEW
TRND is a clothing marketplace app representing small designers and boutiques who lack an online presence. It acts as a third party platform and presents users with the most trendy and fashion forward pieces by using the designers and boutiques’ database, as well as providing industry insights into upcoming trends and forecasts. While users are browsing and shopping, TRND provides an additional stylist assistant feature. This is to help users determine the quality, correct fit of the garment and any product related questions. Giving users another level of interaction between them and the product. TRND is dedicated to inspire users while giving them a supportive space for shopping.
Client: Student Project at Springboard
Sector: Retail/Ecommerce
My Role: Entire product design from research to conception, visualization, and testing
Project time: 90 hours
Tools Used: Figma, Adobe XD, Sketch, Miro, Invision
PROBLEM
As more and more brands and retailers transition their brick and mortar to ecommerce, the presence of online retail continues to grow at an impressive rate. However, there’s still huge room for improvement in order to further better the virtual experience for consumers. The biggest issue in online shopping is that consumers cannot try on and physically interact with the garment. Even with provided sizing charts from retailers, it still leaves consumers with fitting issues.
SOLUTION
Design a user first experience featuring assistance from “stylists”. This is a chat feature within the app where users are able to seek guidance from stylists. Stylists will provide professional guidance based on detailed body measurements of users and video call for further visual assistance. Other features of the app would include a built in discover page designed to inspire user creativity in developing their own style. This page would provide industry insight for upcoming trends and color forecasts and lookbooks. The goal for this app is for online shopping to be more than just a transaction.
PROCESS
DISCOVER AND DEFINE
Secondary Research
To begin this design process. I dived into the statistics of ecommerce sales performances. Essentially, the growth of ecommerce over the years has been immaculate, especially over the past year. However, the growth rate is still being considered slow given that ecommerce sales only account for 9% of all retail. This led me to further look into why ecommerce only accounts for such a small percentage and find what potential issues are.
Competitive Analysis of Industry Leaders
After pinpointing potential issue areas for online shopping. I sought to better understand the popular online shopping products out there by conducting a competitive analysis of Nike, Asos, and Sephora.
I then became inspired by key features such as the minimalistic aesthetic, quick check out process, and the explore and discover page for users to become inspired. However, the tools to provide users in judging the fit of a product are either a video clip of a model or a finder tool that equivalents between different brands’ size charts. Which are both not providing assistance to users effectively.
Surveying Potential Users
To gather more data on the user end, I created a survey and gathered data from 27 respondents to further understand their behaviors in online shopping.
Key questions were:
-
Do you prefer to shop online or in stores?
-
How often do you shop online for clothes?
-
How often do you visit sites or apps to discover new fashion?
-
How likely are you to become frustrated during online shopping?
-
What issues have you experienced during online shopping?
-
What makes an enjoyable shopping experience for you?
I then chose 8 respondents that come from different backgrounds and shopping preferences to conduct a virtual interview in order to ask more detailed questions.
Armed with information from my research, competitive analysis, survey, and user personas. I consolidated data collected into 2 personas. Lastly, I pinpointed the main problem to solve here is to increase interaction between the shoppers and the shop. By solving this, it will simultaneously help to answer shoppers’ questions in sizing, material, and any concerns they may have for products.
This new ecommerce platform should inspire users to trust online shopping and eventually allow users to enjoy the online shopping process. It should also empower users into discovering different styles and looks one product may offer.
User Stories
The final step in my research (Discover and Define) involved creating user stories to identify the functional needs of this product.
DESIGN AND DELIVER
Information Architect & User Flow
Before I began to design screens for “TRND”, I created a user flow map to visualize the main flows within the app and how they will interact. This map shows how users complete the shopping process and track their order.
Wireframing
After laying out the map of use flows. I started designing low fidelity screens to have visual representation of the general user interface and to map out content. Some of the key screens include discover page, shopping page, product page, and stylist chat page.
Moodboard
After finalizing wireframes. I started to put together a mood board in order to create a color story and represent the aesthetic of “TRND”. The aesthetic of “TRND” should be minimalist with a light pop of color.
.png)
Style Guide
After finalizing wireframes. I started to put together a mood board in order to create a color story and represent the aesthetic of “TRND”. The aesthetic of “TRND” should be minimalist with a light pop of color.
High Fidelity Design and Prototype
Based on feedbacks from the low fidelity wireframes, I perfected my designs and created the final prototype to bring “TRND” to life.
Usability Testing and Feedbacks
After finalizing the prototype. I conducted 2 usability sessions with 5 users each. Some users were selected from previous screener surveys and interviews, and some new users who had no knowledge of the product.
Key data gathered:
-
Showing the number of items in the bag above the shopping bag icon.
-
Arrangement of the discovery page can be overwhelming.
-
Overall very easy to use and understand.
-
Users really enjoyed the stylist feature.
-
Some suggested iterating the menu bar icons with words, but the majority had no issues.
Lastly, I reiterated minor details in the prototype based on the feedback received.
WHAT'S NEXT
Explore new features that continue to encourage interaction between the retailer and users and further make the online shopping experience better. Potentially add in how many of a product has already been sold, customer reviews and how to encourage users to leave an informative product review after receiving product.
What I Learned
-
Surveys and mapping things out are extremely helpful in the entire process. Surveys allow me to gather first hand data and mapping gives me the opportunity to visualize an idea before designing. Both provide extremely crucial information for the final design of the product.
-
With so many products out there already, being different is not easy.
-
Something so little can change so much on the designs visually and the users’ experience for the product.
