After recently discovering my passion for product design and spending countless hours absorbing as much design content as I could, I decided to apply what I've learned and redesign an app that I believe has a lacking UX/UI.
I have used Uniqlo's desktop website many times in the past and recently decided to give the mobile app a try. However, my experience was met with much confusion and frustration. I was surprised to see most of the navigation go though an in-app version of the mobile website. As a result, many more steps were needed to complete simple tasks such as finding a t-shirt. After learning a couple of my friends also had similar experiences with the app, I decided to redesign it.
In order to define the problem more specifically, I had those same friends complete a few predetermined tasks such as finding a tee shirt and adding it to the cart. They then recorded what they said/thought, did, and felt. From this feedback, I formally determined the biggest sources of frustrations to be the compulsory in-app browser, too many navigation options, and redundant steps.
In order to visualize the current layout, I created a sitemap that illustrates the information architecture of the app. You can see that there are a few redundant sections, such as settings, cart, coupons, etc. In addition, the overall organization is once again rather confusing.
From this sitemap, I revised the IA to dramatically simplify and streamline the experience. I did this by eliminating the hamburger menu and instead split the bottom navigation bar into five core sections from which the user can navigate the app.
Using the revised information architecture as a guide, I hand drew the wireframes for each of the five pages. I designed two different shop pages that differed slightly in search, navigation, and layout. The first design is more information-dense and encourages discoverability due to the flexible filter bar (in the third frame) whereas the second layout is more visual and has more rigid filtering (the user has the go back a page in order to select a different "Tops" category).
After getting feedback on both designs I decided to go with the first layout because the higher information density and flexible filter exposes the consumer to more products, thus increasing the chances of a spontaneous purchase.
The one change from wireframe to prototype is the addition of a "For You" section in the initial shop page. A mixture of recently looked at and algorithmically suggested items, this section not only adds another avenue of discovery, but also a splash color and visuals to liven up the otherwise monochrome shop page.
While the "For You" section within the shop page offers a few personalized picks, the "Discover" page is home to the broader product spotlights.
In the current Uniqlo app, the "Likes" page is buried in the menu of the pop-up website. I felt it deserved its own spot on the navigation bar because it allows the customer to curate their own selection of products and allows easy rediscovery and purchase of those items.
The "Cart" is an uncluttered, simple page that clearly displays the item and pricing information.
The "Account" page prominently displays the barcode for in-store use and consolidates all of the important personal information into a single, easy to navigate page.
After showing the redesign to the friends who gave earlier feedback, they unanimously concluded that the app was much easier to use and less frustrating. If I were to actually ship my design as an update, I would pay close attention to the change in downloads, time spent in the app, and sales from the app. This data would help conclude if my design solved the original problem or if additional iteration is needed.
I really enjoyed diving headfirst into my first case study, and it is super rewarding seeing the progress I have made from day one to now. I am now fully convinced that product design is what I want to do, and am excited for the next challenge!
