UX design Case study
Gin & Tonik
Furniture App Concept
Making home styling easy and affordable
Summary
Gin & Tonik is an app that helps users find their personal decor style. It removes the pain of online browsing with an innovative, seamless user interface.
Gin & Tonik is an app that saves time for busy style and price conscious users. It allows them to define their decor style and shop for items that go well with those style types by filtering out all other non-matching style items.
My role
My role as a UX designer entailed the research, design and creation of a working prototype for the project.
Design tool and /UX methods Used
Adobe XD, Lightroom, Photoshop / Wire-framing, User flow, sketching/Storyboarding, mind-mapping.
Discovery
I conducted research on the top most relevant competitor in order to eliminate elements that do not work and incorporate elements that do.
Because design doesn’t exist in a vacuum, I decided to understand our product from the customer’s perspective through moderated user tests. I had users go through several tasks and the way they struggled with the navigation process was really eye-opening for me. There was room for optimization and clarification.
Define
User Personas
Understanding our user personas' pain points and gain points is fundamental in the process of designing a fulfilling experience for them. Knowing their motivations and tendencies allows us to understand and build a coherent user flow.
Our user persona and our main focus on this case study.
Ideate
There must be an easier way to browse and shop by style.
Katrina is tired of going online and not being able to find a way to define her decor style while at the same time being able to purchase and get suggestions on how to put a room together to make her feel comfortable and stylish. She hears about an app called Gin & Tonik and decides to take the home styling test by answering just a few questions and she is finally able to shop directly on the app based on her preferences and life-style. She is now happy and has more time to enjoy her renewed spaces.
Storyboard
Design
I created wireframes in order to iterate through many design options.I prefer starting out with low-fidelity wireframes to think through the structure and layout. I sketched the wireframes by hand to start out thinking through the design process.
I created prototypes in order to visualize how the final product would look and function and to generate feedback from testers and colleagues.
Low-Fidelity wireframes
Prototyping
I chose a simple color palette of deep yellow and purple in order to create a calming feeling and approachability to the app.
Easy and intuitive navigation was paramount in the design, as well as small images to avoid overwhelming users with colorful banners and distracting advertisement and promotions
Users can easily see a summary of their transaction and other important information to confirm it all went through.A reward point system is also available but you can opt out and perform all transactions as a guest.
Learnings
I learned about the process of creating optimal navigation for an iOS app. The design process is complex and fun.
The first iteration generated important information about users' tendencies and preferences. I eliminated burger navbars and dropdown menus as it was determined that users did not interact with them and found them to make the app look crowded and with too many redundant options. The second iteration in the prototype utilized space in a smarter way and simpler to recognize by implementing icons and shortcuts as it gave users a better sense of direction as well.
The project had many challenges, but selecting a palette that was attractive and engaging across all types of users was one of my favorites.
While the whole project was a huge learning experience, I especially loved iterating on designs and testing those new designs on users. This tight feedback loop helped take the ambiguity out of the designs, and it felt good to produce designs with the confidence that users would enjoy and understand it.
Walkthrough the style assessment result and simple and clean shopping experience
iPhone Mockup for our Gin & Tonik Prototype.
