Hopscotch

Hopscotch is a rebrand project of Ace & Tate. Ace & Tate is an Amsterdam-based eyewear brand. Their mission is to keep customers happy and in style by offering frames that can match to every occasion. With this mission in mind, my teammate and I decided to rebrand this unique company. We created a brand book to provide the rebrand guidelines.

Design Process

In order to create a successful rebrand, it’s important to identify problems that customers are facing, or pain points that already exist in the current brand. My teammate and I went to an Ace & Tate store in Berlin, Germany and conducted user interviews to start our research. From the responses, we identified a problem statement, pain points, and a solution.

User Interviews

It was important to come up with a standard protocol when we interviewed our users. After a couple rounds of user interviews, these were some of the responses:

“Seems like Warby Parker in America… however it’s kind of hard to navigate Ace & Tate’s website. I can’t really seem to find the price of any of the glasses until after clicking a couple buttons.” - UT Austin Student

“Seems like a lot of young people like to shop here… their website is really stylish and intuitive. I guess they [Ace & Tate] make the customer work for the information though, it’s not really in plain site in the store or the website.” - Mid-20s boy

“I would rather just come into the store and buy my glasses, I have never felt the need to go on their website.” - Regular Ace & Tate customer

Problem Statement

The young and urban crowd interested in purchasing eyewear want something to outline the different price options for each type of eyewear so they can find a product within their price range without experiencing the stress generated by browsing through items of different price categories that are not within their budget.

Pain Points

• Lacking accessibility

  • Users miss the price because they have to do extra steps in order to see the price, they press on the specific eyewear which reveals the price.

• Lacking relevance for ties between company and website/app

  • Users don’t really go on the website to see the different frames because they go in stores to try them on.

Sketches and Chosen Solution

Brand Book

For the rebrand, it was important to start by generating an idea revolving the existing brand. We wanted to help countries that are in need of vision care clinics. We decided by researching countries that are need of vision care support and South Africa was one of the major countries in need. After research, the design process began by building an image and identity of Hopscotch. This was done with a lot of different iterations of colors/typefaces. The process consisted with lots of sketches, wireframes, and prototypes for the website.

Prototype of Hopscotch Website

Here is a video to show Hopscotch in action. Users can easily identify the price of the glasses as soon as the mouse is hovered over a hopscotch tile.

Reflections

1. Size and shapes matter.

2. Consistency makes a memorable impression of a brand on users.

3. Understanding the context of a problem leads to clear brainstorming and a worthy solution.

4. It takes time to pick out the best typography/patterns that will resonate with users and reflect the entity of a brand well.