large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxplanet.org/uniqlo-app-e80332f5ed4d?source=rss----819cc2aaeee0---4">UX Planet &mdash; Medium</a> | Cheryl Lee </p>
<p>Uniqlo is a Japanese casual wear designer, manufacturer and retailer that offers high-quality, fashionable everyday items.</p>
<h4>Project Brief</h4>
<p><em>Work in a team to identify problems and/or opportunities with an existing mobile application and utilise your knowledge to design a solution.</em></p>
<p>Group Project/2 weeks.</p>
<p>Role: UX research lead</p>
<p>Tools: Sketch/Invision</p>
<p>Deliverables: Digitised interactive prototype, 15-min client-facing presentation</p>
<h4>Background</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/566/1*VVo4A_2Zj09ZgmMzjFJyYw.png"></p>
<p>It was mentioned on <a href="https://asia.nikkei.com/Business/Companies/Uniqlo-struggles-to-boost-online-sales">Nikkei Asian Review</a> that after unveiling a new smartphone optimised site (Uniqlo Japan), online sales took a 20% joyride for a month. Yet online sales are about 6% of total domestic sales — one-fifth the target.</p>
<p>Chief Financial Officer Takeshi Okazaki mentioned in the article that “internet sales should have grown by 30% and that the company could even expect growth of 40% to 50%”.</p>
<p>Thus, our team decided on Uniqlo Singapore’s mobile app to work on for our project, with the aim of creating new opportunities for more online sales.</p>
<h3>01. Research</h3>
<p>Identifying, addressing and solving issues were crucial in this iterative design process. To first understand the product with deeper insights on the areas of concerns which could be improved, we conducted three methods of initial research: Heuristic Evaluation, Contextual inquiry and User interviews.</p>
<h3>Heuristic Evaluation</h3>
<p>To scrutinize the structure/layout of the app and identify usability issues of the user interface, we carried out heuristic evaluation.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V1djLR8GY0uk-AKR2-mSSQ.png">Heuristic Evaluation Findings</p>
<h3><strong>Contextual Inquiry</strong></h3>
<p>To get a deeper insight on the usability issues of the App after carrying out heuristic evaluation, we headed down to the physical store. Where we interacted with customers and conducted contextual inquiry — we had customers try out the current App, and received their feedback — gathering more data.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kM4lcct2ckF2vEWK9kSTvw.png">Contextual Inquiry</p>
<h3><strong>User reviews</strong></h3>
<p>Reviews of customers who used the App were obtained from Apple and Google Play App store</p>
<p>Key insights of App store reviews</p>
<blockquote><p>App is not user friendly and is lagging</p></blockquote>
<blockquote><p>Too much content</p></blockquote>
<blockquote><p>Hard to navigate / find products</p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/842/1*gNZd44XFxMgnKH43NJYNeA.png">User reviews of the App</p>
<h3>User Interviews</h3>
<p>Following the user reviews obtained, we carried out user interviews with 11 participants. The interview questions asked covered the shopping experience of customers which includes:</p>
<ol>
<li>Browsing</li>
<li>Purchase</li>
<li>Delivery</li>
<li>Returns</li>
</ol>
<p>Several interview questions serving as a guideline were created, to prompt and gain more user experiences from our participants.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tD1iIal0g3AlwnYheSNnOw.png">Interview guidelines</p>
<h3>02. Analyze</h3>
<p>In this stage of our process, we analyzed the issues and the journey of the customer.</p>
<h3>Issues</h3>
<p>From our research findings, we identified several key issues of the usability problems in the design of the app.</p>
<p><strong>1. Low awareness of the current App</strong></p>
<p>Through our contextual inquiry at the physical store, we discovered that most customers did not know of the existence of the App. Customers who knew about they app, used it for the main purpose of browsing items, and rarely goes on the App. They preferred heading down to the physical store to feel the material of the product.</p>
<p><strong>2. Hybrid App (pulls information from website): Information overload</strong></p>
<p>Massive information on the web is being fitted into a significantly smaller screen on the phone.</p>
<p>Users whom tried the App mentioned that they were presented with an overload of information, and a laggy performance.</p>
<p><strong>3. App experience is significantly different from in-store experience</strong></p>
<p>The Uniqlo store brands itself with neatly organized layout. It is easy for customers to locate their items within the different sections of the store — Heat tech, Airism. The different sizes and colors of the clothing are all arranged neatly within the same place.</p>
<p>The App’s cluttered and messy layout however, contradicts the good in-store experience. It is difficult for users to navigate around the app to find the information that they need — especially looking for dresses which was categorized under Tops — due to the messy layout categorization.</p>
<p>There are also navigational issues mentioned in the heuristic evaluation such as: Clothes categorisation hidden under each gender header, lack of filters and, inconsistencies.</p>
<p>Overall, the learnability and memorability of the App was low.</p>
<h4>Affinity Map</h4>
<p>Through our research findings, we organized and systhesized our findings through affinity mapping. Grouping responses of the similar experiences together, allowed us to identify themes and patterns.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_TCxZ5U7dXvSa1a9Z-4Keg.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*y2vfXVjadxpJst6LcEcjYg.jpeg">Affinity Diagram</p>
<h4>Personas</h4>
<p>From the affinity diagram, we categorised the primary pain points, concerns, and needs of users into two personas.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*H1z6WvfB3U2NYLmtwis9LA.png"></p>
<h3>Customer Journey Map</h3>
<p>Two customer journey Maps were mapped out based on the Natalie — who prefers shopping in-store and, Katie — who prefers shopping via the App.</p>
<p>Detailing the experiences of customers during the different channels of their interaction with the brand/App, from the process of having a need to their satisfaction after achieving their need.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6a6SSIbZ3RdgYTGTpUIsaw.jpeg">Customer Journey Map of Natalie<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jTsHrFpPqry8JF-rekx28g.jpeg">Customer Journey Map of Katie</p>
<h3>03. Ideation</h3>
<h3>Solution/Features</h3>
<p>To address and solve the identified problems, an informal design studio workshop was conducted amongst ourselves, where each of us listed down the ideas that came to our minds.</p>
<p>Various feature based solutions were gathered from the design studio process. As there were time constrains, we had to focus only on features which were beneficial and useful to users, while also taking into consideration business impacts. To help us in deciding, an online feature prioritisation survey was carried out. From the gathered responses, we included within our redesign features in the <em>Focus category</em>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VdgnyYrpb41y-F-g_JYNQw.png">Feature Prioritisation results</p>
<p>What we noticed also during our physical store visits were the long queues during peak hours. To minimise the unproductive time spent waiting in line, we proposed a mobile payment solution, where users could pay for their purchase via the App. Which, could also help in raising awareness of the App.</p>
<p>As we were coming up with a fresh new idea of integrating mobile payments with the App and a self-checkout feature, we were a little apprehensive about the feasibility and receptiveness of our service design function by users. Gladly, the survey results proved that majority of the users welcomes our ideas. Along side with our interviews during usability testing where users mentioned that in order to skip waiting in line, the self-checkout feature and payment via the app will be useful.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WX1sJ4k9WeYnRMuB8ZYhvg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dFI9v2nAj9e4U4NmXJCfqQ.png">Majority of the users rated our service design feature &gt;4. (5 being most important)</p>
<h4>Summarised Solutions</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Blje5i7fmOKCZWvl3_mh8Q.png">Summarised solutions taking into consideration focus features</p>
<h3>Mid-Fi Wireframe &amp; Feature Test</h3>
<p>At this stage: We had a product scan feature which allows users to scan the barcode of a product, view product details, and check out via the App.</p>
<p>A mid-fi minimum viable product was made and our team headed down to the store, testing the features of our redesigned app and, gained feedback from users.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hGXIljm8ZcYgyNT1C9ORHw.jpeg">Mid-Fi prototype by Parul</p>
<p>The main insights gathered from users were:</p>
<ul>
<li>Ablility to understand and identify the barcode scan feature</li>
<li>Although users were amazed by the barcode scan feature, they questioned the usefulness and need to know more information on the product detail with the physical product on hand.</li>
<li>Users would use the self-checkout function if there are long queues at the store.</li>
</ul>
<h3>Prototype</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*b2fkmi8-flAOTjU47v4dwA.jpeg"></p>
<p>A Hi-Fi wireframe taking into consideration the first usability testing from the mid-fi wireframe.</p>
<blockquote><p>Information for barcode scan re-named</p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jpksPR2nV3r5hSsAsU6H1Q.png">Changed scan barcode information to include express checkout</p>
<p><a href="https://projects.invisionapp.com/share/YCF7GM5AN#/screens">Click here to view the project `Uniqlo App`</a></p>
<h3>Usability Test</h3>
<p>6 Participants were given 4 tasks for usability testing.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*f62qAefY6kj6_S6M8B9klQ.png">Usability Testing questions</p>
<p>They were able to click on the correct buttons to find a dress, look for discount codes and using the scan feature for self checkout.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xuRZzaQl2VjT_j85u-Vc8A.jpeg"></p>
<h3>Iterations</h3>
<h4><strong>Barcode Scan</strong></h4>
<p>One main issue we discovered from our usability test was users were really confused in the product detail page after scanning the barcode. As, they thought that the item was added directly to cart from the scan, which was not the case.</p>
<p>Thus, we decided to make the process more informative for the users by providing feedback of what is happening.</p>
<p><strong>The first feedback</strong>, to prompt users if they wanted to add the item to bag after scanning, and <strong>the second feedback</strong>, to give them the option to continue scanning or, proceed to shopping bag.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4jvrttXGxDGQ3ZkdqvXLng.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ysj-sjDmYHolgc4Ieto18Q.png"></p>
<blockquote><p>Add to bag and continue scanning informative screens added to keep the process informative for users.</p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7-il0noJ1D-mvHG1OeLf0A.png">New iterated flow — First and second feedback respectively</p>
<h4><strong>Self Checkout</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hadeeHQBxVHBh0L1HPlhMg.png"><strong>Before</strong> QR code pop up screen</p>
<p>The process does not end here. But users were also confused as they thought oh! this is where everything ends.</p>
<p>Thus we decided to again make it more informative. Whereby after the order summary page, a QR code pop up will be displayed with a notification, letting users know that they should proceed to the counter to get their items packed before leaving the store.</p>
<h3>Why new Design?</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rjZe7PtuAtPeHPRP413L3A.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xKUUC3gRNmMICHh2thRZiQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QqR3HtZzGFYMJ4E7pNRJHg.png"></p>
<h4>Time</h4>
<p>From testing results, the average time taken for users to <strong>find a dress and, proceed to checkout</strong> on the new app is 1.26mins, almost half the time compared to the current app which took users 3.01mins.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/678/1*L_GAsdFU0rk1C0fACjzcgw.png">Time difference after redesign</p>
<h4>System Usability Score</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9Gs5N89kR3tGYAVcPUTiUg.png"></p>
<p>Although users rated the redesign of our App as a marginal score of 69, these results came before the final iterations of an improved barcode scan self-checkout flow, which confused users the most. As there was insufficient time to conduct new system usability score on our improved iterations, we did not manage to obtain a new score from the iterations.</p>
<p>Within 2 weeks we managed to redesign the App with newly incorporated fresh and unconventional ideas. Given more time, we will be able to gather more feedback and make further improvements!</p>
<h3>Raising Awareness</h3>
<p>Through our app redesign, we created opportunities where users can use the app within the physical store. Hence, to encourage the usage, we propose various promotional materials be placed around the stores.</p>
<p>For example, the clothes tag can include a line to inform users that they can scan and perform a self-checkout with the Uniqlo App. This can also be included in the signages found throughout the store. As we are introducing self-checkout, posters can also inform users about our new app feature.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vEm-Pd66o_fEdw3qNbB_Kw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*s3jeyIz8D2iy5Y65bOi4kQ.jpeg">Clothes tag and posters</p>
<p>Adding on, as users have to get their items packed and security sensors removed, we propose setting up express checkout lanes that will be quicker in serving these customers.</p>
<h3>04. Further Ideas</h3>
<p>Beyond this design, I want to share ideas to extend to the Uniqlo brand and its customers.</p>
<p><strong>1. To conduct image searches</strong></p>
<p>Having an image search feature, rather than have users typing/browsing through the list of items. The image search will allow users to view similar items of the product. This helps in saving time in searching for a product which users want or, users wanting to know if Uniqlo carries similar items as what was viewed online on other sources.</p>
<p><strong>2. Personalised Style</strong></p>
<p>For users who are signed into the App, they will receive recommendations on the types of styles of clothes that are based on their browsing and purchasing habits.</p>
<h3>05. Refelctions</h3>
<p>Design studio is a really effective way to gather more ideas and from the process, incorporate ideas which brings about a better product, and combine and adapt other ideas into a stronger solution.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fb3e808%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Fb3e808%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Fb3e808%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href">https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=e80332f5ed4d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxplanet.org/uniqlo-app-e80332f5ed4d">Redesigning Uniqlo App with Service Design</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Redesigning Uniqlo App with Service Design

Redesigning Uniqlo App with Service Design

Project Brief

Top Stories