Interview
This project was kick-started by an introduction meeting and reviewing the company’s current website, business strategy, vision, and goals. I then started my research by going to one of the KYYA stores to photograph and interview the sellers. When it comes to the in-store experience, there are samples for most of the chocolate which you can taste each of them before buying. In addition, sellers in the store learn your preferences by ask you questions like “do you like dark or sweet chocolate,” then offer suggestions concerning infusions and percentages of cacao, while informing the buyer of the cacao's origin and the individuals who produced it.
This project was kick-started by an introduction meeting and reviewing the company’s current website, business strategy, vision, and goals. I then started my research by going to one of the KYYA stores to photograph and interview the sellers. When it comes to the in-store experience, there are samples for most of the chocolate which you can taste each of them before buying. In addition, sellers in the store learn your preferences by ask you questions like “do you like dark or sweet chocolate,” then offer suggestions concerning infusions and percentages of cacao, while informing the buyer of the cacao's origin and the individuals who produced it.
Persona
Based on studying the results from interviews and visiting the store, we captured the customer journey and pain points. We identified the challenges and how we can improve the experience. Then we created a user persona to help understand the users' needs, experiences, behaviors, and goals.
Brain Storming and Sketches
After analyzing and reviewing our user's needs and goals, we started to brainstorm our ideas and do some sketches. We focused on user flow of the website, what kind of visuals to use in our design, and what kind of motions and interactions to make.
Low Fidelity Wireframe
After reviewing our sketches, we began designing our first wireframe for the task flow and interaction through the website, which incorporated some of the most promising elements from our brainstorming session.
Interactive Design
I worked specifically on Illustrations and Interactive design. Since the website is for marketing, I tried to make a simple game/motion for our customers to make their shopping more pleasurable and memorable. For instance, they can shake the chocolate box by clicking it, then the flavors will appear. For this design, I used our user's curiosity to find out what was behind the box and then click on that.
Clickable Prototype
The prototype focuses on an essential experience: experiencing the chocolate's flavor and explore the origin of the cacao. We ask the users to shop the chocolate by origin or flavor. Regarding the origin, we designed the motion globe with multiple location pins to show the farms that KYYA provides their cacao from them. By choosing flavor, we created the cycle of the growing cacao trees while our users are in the shopping process. There is a related question and information about the flavor in these parts.
Usability Testing
At this point, we had the clickable prototype, so we reviewed the prototype with end users at Tesseract Center. We described the scenario to the users and let them go through the prototype, so we could observe their behaviors and capture their feedback.
Iteration
After usability testing, we made the required adjustments to the website. Then, after applying the feedback to the product, the game design team was able to implement the interface and the codes for the next step, which was making interactive 3D graphics in WebGL.