A custom kimchi ordering solution
Bitmaker UX/Product Design: Final Project (May 2016)
Bahn Chan is a custom kimchi ordering service that allows customers to make their perfect kimchi. Customers can learn about the different flavour indexes that make each kimchi unique, while also subscribing to an ongoing delivery service so they'll never run out of kimchi.
Kimchi has many flavour components that can make a custom order difficult. That is why I designed a flavour index scale for users to go through each major flavour component, while still having previous selections visible and easy to edit.
A seamless ordering experience is the bedrock of any product sold online. That is why I designed the ordering flow to be as simple, quick, and seamless with past orders as possible.
All customer insights, ideation, strategy, vision, planning, and design execution were completed by me. However, I am heavily indebted to my classmates (aka my on-the-fly user testers) and my two afternoon instructors, Ahmed Kadhim and Katerina Lyadova.
Korean side-dishes, specifically kimchi, are the bedrock of the Korean diet. Every household has their own preference, sometimes varying ever so slightly that it may not even be noticeable to others. While the craft of making pickled side-dishes is being lost, the demand will always be there. That is why I believe generic, hard-to-buy kimchi will no longer do.
The challenge I undertook was to build a customized ordering platform. I chose to design an ordering app for a fictional kimchi manufacturer. What was clear from the start was that this app would either leverage existing knowledge from the user (i.e. preference of kimchi) or needed to educate the user on the variety of kimchi available to them.
I would also be challenged to communicate with the user the value of customized kimchi, and design a delightful experience to convert into orders and recurring subscription sales.
Before diving into how I would design the customization tool, I needed to know what users even wanted. I conducted seven in-depth qualitative interviews. At this stage, it was imperative that I uncovered a range of user insights from both Koreans and non-Koreans, anywhere from college students to parents with children, and those who knew a lot about kimchi and those who did not.
The goal was to uncover the behaviours and needs of the target market to help brainstorm appropriate and impactful solutions.
I compiled all these interviews and created a few personas to help guide my decisions and designs.
1) Those who did not grow up eating kimchi wanted to know about all the varieties and factors that make each kimchi unique. From there, they wanted to know what dishes to pair with each variety of kimchi.
2) The participants that do not shop at Korean supermarkets found it cumbersome to shop at these supermarkets just to get kimchi or other Korean side-dishes.
3) Having kimchi that tasted 'just right' was very important to most of my participants. They found the generic kimchi and lack of variety at supermarkets insufficient for their needs.
4) Once they found a kimchi they liked, participants wanted a way to reorder or even have it delivered to them on a recurring basis.
5) Participants wanted the ability to add on different ingredients (such as oysters, carrots, onions, etc...)
From here, I created user flows and job stories that heavily guided the feature brainstorming phase.
THE UX AND DESIGN PROCESS
With the discovery and tactical goals of the user defined, it was time to diverge into brainstorming the framework and site map of the app. Starting from simple sketches, I eventually moved to creating wireframes that I could test on users.
The goal was to test and iterate fast. Countless changes and adjustments took me through countless prototypes that each built on one another making for a more clear and seamless experience.
Using tools like Pinterest and Dribbble, I compiled a moodboard to evoke the right emotions and set the direction of the design to best exemplify Korean culture.
The moodboard influenced my style tile, which was the design foundation for the app. Korean calligraphy helped form the 'ink on paper' treatment and Korea's colourful architecture and dress influenced my colour palette.
The typeface for my app is an important tool to properly communicate the emotion and character to the end user.
The Korean alphabet, Hangul, was designed to be easy to read and learn, straight and uniform, and accessible to the masses. These characteristics perfectly exemplify the goals of my app.
Therefore, I chose Typo Dodam M as the primary typeface because of its Korean roots, round approachable corners, and its heavy weight, which is easily read on a mobile screen.
Brandon Grotesque was chosen as the secondary typeface for its functional and warm look, which paired nicely with Typo Dodam M.
I used Tim Brown's typescale model to work with a modular scale that outlines a font-size hierarchy that relates to each other. This way, the font-size chosen is not based on arbitrary numbers. Because I was designing first for mobile, I used 16px as the base size (a size that is readable on a mobile screen) and a scale of 1.250 Major Thirds (a scale that works well with less screen real-estate).
From the beginning I knew I needed a helpful mascot, similar to MailChimp's Freddie, to guide the user through the app. This mascot would bring delight, educational components, and truly round out the overall brand. From a quick doodle during lunch, the inspiration for Onggi was born.
Onggi (Korean for 'clay jar') would pop up when necessary to help the user complete the ordering flow. Traditionally, kimchi is fermented in large clay jars. The user is first introduced to Onggi with a quick animation of kimchi falling into him. These subtle animations using Onggi gave me the versatility to educate the user on how kimchi is made in a dynamic fashion that goes beyond just using words.
I user tested the appeal of Onggi through many variations. Some were short and stout, while others were more accurate to what a clay jar would look like. I also user tested the multiple faces of Onggi for the best contextual reaction in any given situation.
I received very positive responses when Onggi would pop up on the screen. I truly believe placing Onggi at the beginning set the mood of the user in a positive direction, with the goal of increasing sales.
We had four weeks to complete this project so time was very valuable. That is why I did my best to do quick, iterative testing throughout the whole process. I would perform a specific task analysis on a user to find problems with a specific feature or flow. I would also take advantage of having test subjects around me by conducting quick a/b testing on smaller, but important, design decisions (for example, I would test between a grey vs yellow 'help' button).
The type of testing that I would do in a more controlled environment would be very different than conducting a guerrilla user test. Using InVision, I always had a workable mobile prototype on me at all times. Whenever I got the chance, I would do quick usability testing but would focus on three major features:
Because of the tight timeline, I opted to use a combination of InVision and Principle for Mac (to create animated gifs for InVision). This allowed me to quickly conduct user flow tests and test how impactful the UI interaction was.
The success of my app would hinge on how well-designed the flavour profile scale would be. I tested this feature the most with a variety of people—those who fit my persona models as well as those who did not. Through various iterations and testing, this feature went from a cluttered, confusing process to a more simple and easily-editable flow. The goal was to get this feature as close to the mental model of how users thought it should work.
The process of ordering different amounts proved to take more time than initially anticipated. Some users were used to ordering in grams, while others in pounds. Many did not know how much '100g' or '1 lb' of kimchi would even be. This is why I added information that was more relevant to the user. By approaching it as 'how long each amount will last based on average consumption', it contextualized each option for the user.
Conducting a business model exercise influenced a key portion of the app: subscription-based reorders. If this were a real business, it would heavily rely on customers finding their perfect kimchi and having it sent to them on a recurring basis—after all, it's a daily staple in many people's diets!.
The three key things I focused on when designing the checkout flow was: reducing clicks and confusion; safety and security; using animation to help up-sell the subscription.
Having contextually relevant information to educate users through the ordering process was an important part of the design. I did not want the educational information to be hidden in the navigation, to only be found by some users.
That is why I designed a yellow question mark icon that would lead users to information pertaining to the immediate event or action. The button would also only appear on certain screens and would be delayed. This was based on user testing where some users needed information about how kimchi was made, while others did not. Because I designed the app to do one action at a time, I made the assumption that if users stayed static on, for example the 'crunchy' scale, that they might want more information on that topic.
The final deliverable for my project was to create a marketing page to promote the product. I decided to make a marketing site with the assumption that the product has not been released. Thus, the goal would be to garner interest and convert those into email signups.
I decided to design a static email signup to the left, to be readily accessible to the user. The website would then go through three pages to communicate the benefits of ordering through this service.
This would allow me the ability to gauge market interest and even a/b test call-to-action copy using Google Adwords and Facebook Ads.
With only four weeks to complete the project from beginning to end, I knew from the start I had to prioritize well and stick to my sprint plan. When I found myself juggling too many things at once, I always took a step back and asked, "What do I need to finish now so that I don't block tomorrow's goal?" That usually meant that I needed a certain amount of screens done to conduct testing the next day. I had to learn to know when something was good enough to test with and move on, rather than trying to make it perfect.
Testing is useful, but testing with the right questions is pivotal. This was my first shopping app and I realized the questions I needed to ask were very different than other products I have designed. For example, at the beginning I spent a lot of time getting user input on the way the app looked and felt, rather than asking questions like, "What would help to get you to the checkout?" I had to balance designing a great-looking and -feeling app with the (albeit fictional) business goals of my client.
One of the biggest challenges was juggling all the user feedback. Sometimes I would sit there with 'analysis-paralysis' because every user was giving me differing opinions and showing different behaviours. During those moments, I would try to step back and figure out the underlying goal that each user was trying to get to. For example, I received many differing opinions on the unit of measurement I should use for the amount of kimchi ordered. When I stepped back, I realized while they were all telling me what unit of measurement they preferred, they were really trying to tell me how much they wanted to order based on consumption patterns. Once I added in a note to provide a relative amount based on average consumption rates, I saw far less confusion during that part of the flow.