top of page
SommChat*
Need a wine to pair with your dinner or want to try something new? SommChat is an AI-based chatbot app that helps users discover the perfect wine for their mood.
*Renamed due to NDA
Your personal sommelier.
OVERVIEW
DETAILS
Company
Stealth Startup in the Hospitality Industry
Time
4 Weeks
Team
Project Manager
3x UX/UI Designers
Tools
• Figma
• Figjam
• Slack
• Google Meet
• Google Drive
My Responsibilities
• Project Lead
• Chatbot decision-tree flowchart
• Chatbot prototype
• User-flows
• Usability-testing
PROBLEMS
Do you like wine but get overwhelmed by options at the store? SommChat can help you decide on a wine by taking your taste preferences and depending on what you’re craving at the moment, recommend a wine based on your mood, what you’re trying to pair, or if you want to try something completely new.
Our client wanted our team to take their idea and mockups, develop a look for the app, create the architecture, design a prototype, and conduct user tests before handing it off to developers to build out.
SOLUTIONS
Design a look for the app
We want to help capture the mood the client wants for their app. They said they wanted the app to have a casual, friendly, informed, but unpretentious tone. This would also apply to the wording of the content.
Create an onboarding process
We want to make sure that onboarding feels natural, makes sense, and isn't overwhelming. Since we have to ask a lot of questions to get their taste preferences for recommendations, we want to make it relatable, even if the user doesn't know much about wines.
Preferences changing
Since wine tastes can change depending on the situation, we need to allow the user to be able to be able to change their settings or ask what they're craving at the moment.
Chatbot prototype
With the main feature of the app being a chatbot, we'll need to map out the decision tree and create a prototype for users to test. We also need to capture the right tone and feel of a chatbot.
DELIVERABLES
The client wanted us to prep a working prototype for developers to model off, user research to see what needs to change from mockups, and a design system.
DISCOVER
CLIENT ASSETS
The client provided mockups for most pages which gave us an idea of where to start.
Mockups of various pages
RESEARCH
For competitive analysis, we looked at other wine apps to see how they handle onboarding and flavor preferences.
One competitor uses a mix of art styles
USERS
We made two personas. One for a more casual wine drinker who is more cost-conscious and one for a wine connoisseur who wants unique and trendy wines.
HOW MIGHT WE...
With these in mind, we thought about important questions for this app:
-
How might we get someone’s taste preferences?
-
How might we understand what type of wine the user wants at the moment?
-
How might we present our recommendations and purchase options?
THOUGHT PROCESS
We wanted to get the user's taste preferences during onboarding but ask them what they're in the mood for while using the chatbot so we can give a better suggestion. We also want to present limited options to not overwhelm and give them ways to purchase the wines by selecting a link.
ARCHITECTURE
USER FLOWS
While my teammate worked on the design system, I was working with our other designer on refining onboarding and general user flow which we based on the mockups the client provided.
I realized by having the sign-up flow come before onboarding originally, it was asking the users to make an account without knowing what they’re signing up for. So I rearranged the welcome screens earlier in the onboarding flow.
DECISION TREE
Because the user has multiple routes they can take, I mapped out the decision tree of the chatbot. This was vital to organize the flow and be a roadmap for the devs. This was my main responsibility.
I mapped out the decision tree of the chatbot so we could figure out what paths were consistent amongst the different options to reduce redundancy and create a red route.
MINIMUM VIABLE PRODUCT (MVP)
With the client’s approval, we determined that the minimum viable product (MVP) for our prototype would take the user through onboarding, test out the profile page, and then be able to go down the path of choosing a wine to pair with a dish.
PROTOTYPE
DESIGN
The client wanted the personality of the product to feel knowledgeable in a fun, approachable, unpretentious way. Each member of our UX team made mood boards to start a conversation on what she liked and didn’t like.
1/3
Mood board gallery
STYLE GUIDE
After a few rounds of notes, the client approved the style guide using the following colors, fonts, and icons.
LO-FI WIREFRAMES
Using the mockups the client provided, we formed the low-fidelity wireframes of the app.
Original user flow from Splash page to Sign-up, Welcome, and Flavor Profiles
HI-FI PROTOTYPES
We then started working on a high-fidelity prototype combining the style guide, mock-ups, and user flow.
Here you can see the evolution of the onboarding. We also made the question tone positive instead of negative.
We kept a consistent look throughout the rest of the app. I had some concerns that users would miss the “Get Recommendations” button to start the chatbot.
My primary role focused on the chatbot. I took a lot of care to make the prototype look and behave like a chatbot.
TESTING & FINDINGS
TESTING
We conducted five moderated usability tests on people with a variety of tastes and knowledge about wines, from people who enjoy wine but don't know much about it to wine experts who read wine blogs. We also wanted to test those less tech-savvy to check for accessibility.
TASKS
With our MVP and goals in mind, we had the following tasks for users:
-
You see an app for a wine recommendation app. What are their expectations? Try to create an account. Did it meet your expectations?
-
You are making dinner and want a wine to pair with your spicy vodka sauce. What would you do?
-
You are getting recommendations for wines with a banana taste, but you don’t like bananas. How would you change that?
-
You tried a previously recommended wine and liked it. How would you note that?
RESULTS
Testing was very positive. All the users were able to complete most of the tasks, except for one, which involved favoriting wines. However, since this is with a pre-populated page, this might have contributed to the confusion.
SOLUTIONS
Everyone wanted more options built into the cards for wine recommendations. Users wanted a way to buy it online as well as in-person with geolocating. We'll need to test if the colors work or if the buttons need labels. Terms and colors were other keynotes.
To better explain terms, having a pop-up would help teach users more about wine.
With purchase options changed to buttons.
Will need to test if labels are needed.
One other change was color contrast. After testing, we ran everything through WCAG accessibility standards and a few elements failed.
On the topic of chatbots, our client thought the term "chatbot" might turn off users, so they didn't want it mentioned. If a user didn’t like chatbots though, this would create a negative experience when they discover it's a chatbot.
Because we couldn’t use the product's name for our case study due to NDA, we leaned into it and rebranded the product to SommChat and changed the start button to "Start SommChat."
CONCLUSIONS
IMPRESSIONS
Overall, this was a great learning experience and I had a lot of fun working on the chatbot and learning more about the thought process behind decision trees and how to design one.
DIFFICULTIES
One difficulty we had was communicating and pushing for our suggestions more. For example, we brought up that users might not know terms like “tannins” and color contrast issues earlier, but the client was firm on some design decisions.
LEARNINGS
Being able to talk about WCAG standards might have helped with convincing. However, having user-testing reports reaffirm our suspicions helped convince them in the end.
Another thing we could have done differently is that since we were provided mock-ups, we used that as a starting point as opposed to starting from scratch. This might have biased us towards certain design decisions and I wonder if we could have had more ideas otherwise.
Next Case Study:
bottom of page