Triple Oh!

Capturing the feeling and taste of Triple Oh! ice cream in the digital space.

Timeline: 4 weeks

My Role: UX/UI Designer

Client: Triple Oh!

Team: 4 UX/UI Designers

Summary

What was the challenge?

What was your role Kasem?

Solution

Triple Oh! is an ice cream startup based in Stockholm. We designed a website from scratch aiming to capture the feeling and taste of Triple Oh! ice cream in the digital space. In just four weeks, we delivered a high-fidelity prototype of the new Triple Oh! website and presented the concept to the CEO of Triple Oh!

Ice Cream conjures up a lot of feelings, smells, tastes, and many lovely childhood memories. But how can we create a digitalised Ice Cream experience? We were challenged by our stakeholders to create a clean yet playful, traditional yet innovative, high-end but popular digital experience for their Ice Cream business.

As we took an experimental approach in this project, I was involved in every step of the process, I specially focused on concept ideation, designing interactions, and prototyping.

We emphasised on storytelling explaining the concept of Triple Oh!, their values, and what they stand for. We have added hidden, but memorable interactions, as well as illustrations of Triple Oh! locations keeping a balance between classiness and fun, as well as capturing the feeling of Triple Oh! in the digital space.

Final Design

The process

Understand & Define

Triple Oh! Presented us with extensive business and user research regarding their digital needs, their target groups (young adults, hipster parents, gastro travellers), and their brand guidelines. From our discussions with our stockholders and our review of the research we were able to identify two main needs, from which we crafted our HMW question.

Needs of client

Triple Oh! Needs a website corresponding to the ID and feel of their products and brand IRL.

Needs of customer

Customers need to understand the concept of Triple Oh, and to know their offerings!

HMW Question

How might we capture the feeling/taste of Triple Oh! Ice cream in the digital space?

Ideation

Though there were many good ideas, we had to adhere to the existing visual identity and branding of Triple Oh! Therefore, we decided to take a completely different approach. The goal was to take our stockholders on an exploratory journey of digital self by thinking outside the box, to produce a solution that can challenge typical digital Ice Cream stereotypes. We started by sketching individually.

Prototyping and testing

In our iteration we focused on UI and storytelling to explain our ideas better. We had 3 main concepts:

  1. We adapted the wave on the landing page to convey the feeling of scooping ice cream.

  2. By illustrating the natural ingredients of Triple Oh! tot tell their story and values.

  3. We illustrated locations and maps in order to establish a sense of originality for the brand and business.

We conducted user testing by asking participants to perform a few tasks. This resulted in three main learnings:

  • The majority of participants were unable to tell what Triple Oh! does due to the lack of information on the landing page.

  • Participants were clicking on the logo to go to the landing page, but it wasn't prototyped.

  • Participants noted the lack of information about Triple Oh! Ice cream flavours.

To address that we took the following actions:

  • We extended the landing page and added a small ice cream cone to encourage users to scroll down and discover Triple Oh! flavours. As part of this idea, users will be able to learn what Triple Oh! does and what they offer.

  • We have also prototyped the logo to direct them to the landing page, and avoid dead ends.

New Challenge

To involve stakeholders, we requested their contributions to a mood board, capturing intricate feelings, emotions, thoughts, and interactions. I facilitated a session with our client, during which we discussed mood board and focused on gourmet restaurants in general since our client concept is a dine-in ice cream bar.

Moodboard

Pen & Paper

For communicating our idea to our target group and client, we created low-fidelity wireframes. However, the lack of visuals and colour prevented this low-fidelity prototype from conveying our idea effectively. To better explain our concept, we decided to iterate at a higher fidelity. 

Low-fidelity Sketches

Hi-fidelity iteration

User Testing

Final Iteration

We faced the challenge of showcasing Triple Oh!'s flavors, toppings, and combinations while maintaining a balance between fun and sophistication. Using Protopie, we created memorable hidden interactions. I was responsible for prototyping the crucial "About Us" page, highlighting Triple Oh!'s concept and values through interactive storytelling.

Interactions in Protopie

Final Result

Our approach to showcasing Triple Oh! revolved around 3 elements:

- Storytelling, with a focus on crafting a captivating narrative that would resonate with the audience.

- We prototyped hidden interactions to add an element of surprise and engagement, encouraging users to actively participate in the experience.

- We used illustrations to convey a sense of classiness and authority, strengthening the overall impact of the presentation.

All in all, we aimed to create a memorable experience that effectively communicates the essence and value of Triple Oh!

Personal Reflection

This project was all about teamwork, and being a diverse team allowed us to share different perspectives that enhanced the process and solution.

In addition to that, this project gave me the opportunity to practice stakeholder management and balancing customer needs with stakeholder goals.

However, if we had more time, I would work more on improving the design's accessibility, and explore the possibility to infuse the illustrations in the brand identity further. Architecture and Ice Cream? Why not!