Visual Design
Interaction Design
Programmer
User Research
Adobe Photoshop
Adobe Dreamweaver
Adobe XD
Squarespace
May
—
December
2020
When the pandemic came, Chi Cha started to only accept online orders. A problem that quickly arose a few weeks into reopening was the store’s online website and point of sales (POS) system. Not only was the current website slow, confusing, cluttered, and unsightly, but the POS system also needed an upgrade.
Management requested a new website that properly displayed Chi Cha’s values and aesthetic. As a result, I would design a new streamlined website that would make ordering more user-friendly. I felt that sharing Chi Cha's story and the effort behind the drinks would be a good way to increase customer loyalty, satisfaction, and happiness.
The ordering page was a list of all possible drink combinations with extremely small pictures of the drinks next to each item. After adding the desired items to the cart, the user would then need to click on checkout, proceed to checkout, click another checkout button, before finally being brought to a screen where the customer would enter their information. While some of the information was understandably needed to make the order possible, such as name and phone number, much of the optional information was not clearly communicated to the user that it was not required. This resulted in customers often spending too much time typing every detail that was not necessary which left them feeling frustrated. Only when the required fields were filled out would the user be allowed to finally enter their payment information, which had no other payment options such as Apple Pay or PayPal to streamline the payment process.
Before I started building a new website, I wanted to gather some research from our customer base to see what exactly was not liked about our current website. While this was not an extremely in-depth or scientific survey, all I desired was a general idea of the public’s opinion of our website. When I saw customers ordering outside the store or if they stopped to chat with me, I would ask them what they thought about the current website. The answers I received can be summarized into 3 main points:
Based on the feedback I received from my informal questionnaire, I was able to develop a few overarching, yet specific and guided goals for the new website. The research also had me thinking more about the specifics of a new design and how I could tailor each aspect towards Chi Cha's customer base.
I started off by thinking about how I would design the ordering process because at the end of the day, the main goal of our website was to help us, a business, increase revenue. The ordering process needed to be simplified and optimized. I initially wanted to get some ideas onto paper so I took out a tablet and sketched out some ideas for a new ordering process.
The initial idea was to have as little options as possible on the ordering screen by reducing each order down to its tea base. Since Chi Cha’s menu works by combing a type of tea with an optional flavor and toppings, it would be possible to arrange the ordering page in this way. This way, the user, and especially new ones, would not be overwhelmed when attempting to order with a mass of possible drink combinations.
I showed the management team and a few coworkers my initial sketches and wireframes to receive input on the design. While they liked the greatly simplified process, they feared that this would not do our unique menu justice by reducing the menu to its simplest form. After deliberation, I decided to not go with this design since not only did I agree with my coworkers, I also felt that it did not give a proper introduction to each item on our menu. In turn, this might possible confuse our customers since they would not know exactly what each item was and how it could be paired. This would also not leave any room for recommendations from Chi Cha.
After going back to the drawing board, I settled on a design that was a little more elaborate but still much more straightforward than the current website. I wanted something that fully displayed what the store had to offer while still allowing new users to approach the menu without intimidating or confusing them. The ordering page would offer more initial options that were sorted by flavor. This would allow me to showcase the characteristics of every flavor along with each possible unique combination that could be made. After choosing the desired flavor, the user would then be taken to a screen to choose their tea base as well as customize their drink with toppings, ice and sugar levels and more.
For example, if the user were to choose “passionfruit” as their desired order choice, they would be taken to another page where they would be able to customize the drink. Since Chi Cha only offers light tea pairings with the passionfruit choice, the user would only be able to see and select the 3 lighter teas out of the total 6 that are offered on the menu.
From there, I wished to create an entire website that would follow the design philosophy of the ordering page: simple and inviting. I started off with a wide variety of low-fidelity wiretypes that I either came up with myself or from some templates that websites offered. I eventually settled on one that I felt was able to achieve another goal of the website: an immersive, aesthetically-pleasing website that would effectively share Chi Cha’s story and values with our customers. I also used the same design philosophy to design the rest of the website while creating medium-fidelity wireframes.
I approached the same group of coworkers and managers who reviewed my Phase 1 wireframes and asked for feedback. This time I received a consensus that the flow design was much better than what I had previously come up with and that they could not wait to see what I had next. They also pointed out a few things I had missed with my wireframes.
From there, I decided to directly proceed to a website designer and start building my website. I managed to find a website template that was quite similar to mine which made building the website a lot quicker. This way, most of the framework would be there and if I needed to code anything, it would be quick and painless. Much of my time here was spent on looking for photos and videos that I could use for the website as well as writing and translating the text that would go into the website, since Chi Cha’s headquarters are located in Taiwan. While I was able to reference websites from Chi Cha SanChens in Taiwan, Singapore and other Asian countries, no other branch had a website similar to what I was envisioning. This new website needed to be streamlined and aesthetically pleasing if Chi Cha SanChen SoCal, a new store, were to stand out from among the thousands of boba stores that populated Los Angeles.
.png)
.png)
While these two pages were not required by the management to be included in the website, I thought that they would greatly improve the website. The “Our Story” page provided plenty of more information on how Chi Cha was founded, its values, and how drinks were made from start to finish. The “Blog” page would provide another way for the company to reach its customer base, especially for the customers that do not have Instagram, which was a big part of the population. This would be a good spot to include menu and store updates so the store could stay connected with its customers. Combined, I felt that that these two pages would not only give the website a much more complete and polished feel, but it would also improve customer satisfaction and loyalty. This would improve loyalty to Chi Cha because when customers are able to relate more to a brand, whether that be through learning more about them or conversing with employees, the opinion of the brand generally increases, which in turn produces more devoted and content customers.
.png)
When I initially began to interview customers on their thoughts about our website, I knew that research needed to be done but I did not know how important it was. Without any guidance from the customers, how was I to know what goals to set for my website? While I did have an idea, that was based purely on my own perception of the website and luckily I was not far off from the general perception. However in the future, I have learned that I need to be more in touch with the customer base since I am afterall designing a new product for them and must learn what they want in order to design a better product. The initial user research ended up being extremely useful in guiding my design philosophy and I even ended up showing a few of them the website before it was done!
My personality is naturally not one of those that likes to plan things, so I prefer to jump headfirst into things which has taught me so many skills that are useful in life like flexibility, efficiency, quick thinking. However, this time I learnt otherwise. While I certainly understand the importance of planning, this was one of the first times I needed to properly layout the groundwork and do background research before I could bring any of my vision to life. Just like coding, I need to properly think and plan from the ground up so that I can not only build a quality product that does not need to be redone but so that I can also produce it in a timely manner.
The San Gabriel Valley is an extremely unique place in that one does not need to speak English in order to survive there for the entirety of one’s life though it is located in the middle of Los Angeles. Naturally, this brought a lot of design challenges with it such as incorporating two written languages, English and Chinese, into the menu and attempting to please two different crowds. I learned many design tips such as the importance of simple words and big font so that both populations could understand English if it was the only language required and simple, clean font where two languages were required.
While this website did not eventually go live due to constraints and change in needs from the upper management, this was a website I was extremely proud of. I was able to learn about the process of designing a product from start to finish and found it to be a lot more enjoyable than I initially thought. In fact, this process ignited a passion in me to begin designing more products and search for more UI/UX or research internships.