Work : Mobile App UI/UX Design | Client : J Tech Solutions K.K. | Tools: Sketch, InVision
The client, who organizes Sake events in Japan, wants a solution that offers a new experience to people who want to know more about Sake and helps producers to expand their products on the market.
— Analysis of the users journey and their pain points related to the consumption of Sake, particularly during tasting events.
— Sketch of ideas and iteration
— Low-fidelity wireframe and iteration
— High-fidelity wireframe
Main Paint points
— During a Sake tasting events, users receive a lot of information about each Sake (nihonshu, shoju...) and have difficulties to remember all the details. In addition, if there are many people, the user will have to wait to discuss with the producer about the product.
— Users have real difficulty to remember the following information: what was the sake I liked the most? Why? Who is the producer? Have I already tasted this sake before? Few users take notes in a notebook or in their phones and eventually review their notes.
— Once the users attended the Sake tasting events, they may want to purchase their favorite tasted sake. Most of them will use usual e-commerce websites and search for the Sake name - if they remember it. If the sake in not available on the usual e-commerce websites, the users will feel frustrated and will do more online research and eventually give up on the search.
— Users usually want to share information about the favorite tasted Sake with other friends interested in it but have trouble to communicate information, particularly when they took notes on paper.
A mobile app, available on IOS and Android platforms, that can help the user to
— identify the tasted sake during an event by scanning a QR code or NFC
— assess the tasted sake (degustation score) and have the possibility to add it to a favorite list
— keep history of the tasted sake and each product information in a personal profile (name, producer, region, criteria...)
— buy the tasted sake, by accessing an online store from the tasted sake page
— share the product information page by email or on social media
UI/UX was validated by the client and the beta version of the app released
1. User flow
App design overview
4 onboarding screens guide the user through the first use of the application. The onboarding, with a simple and smooth flow introduces the main features of the application, in order to engage the user and make him to want to use the service and register an account. The user can skip the onboarding at any moment.
The most important part of the application is the scan feature. The scan feature can be identified easily in the tab bar thanks to a special icon in black color. The scan screen offers a scan help and the possibility to import a picture - in case that the user is not connected to internet and wants to scan the QR code later. The user can leave this screen at any moment.
Once the scan is successfully done, an alert message indicates that a new tasting is added to the user profile. The user is brought directly to the detailed profile of the scanned sake, and is invited to give a score to the product (slide bar) and has the possibility to add it to his favorites.
If the user has already tasted the same sake before, it will open the sake previously recorded in his profile and will add one tasting to the tasting counter. The user can update the score based on the new tasting, and add to/remove from the favorites.
After the scan, the user accesses the product page. Here, he can find the product information as the name of the producer and the region, the characteristics of the sake and a description of the taste.
There is a "tasting experience" section where he can give/update the sake score and add to/remove the product from his favorites list.
The first icon indicates the number of times the user tasted this sake. It's an automatic counter updated each time the user scans the same sake.