Cindy Francies | Design & Code

pop bubble pop logo

The Design Problem:

Be the first to bring a global food trend to Waikiki

I was asked to develop the opening website for the first Bubble Waffle shop located in Waikiki, Hawaii. Being the first bubble waffle shop in the area creates a unique challenge to be visible to tourists who know the product, and to educate the local market to the product.

Roles:

Research, Branding, Design, UI, Development (HTML, CSS, JS)

Case Background

Hong Kong-style waffles matched with locally made and inspired ice cream topped with multiple treats are the perfect snack and dessert option for Waikiki. Bubble waffles are the hottest trend in the UK and Australia, and are beginning to appear in US markets.

There are over 7.7 million tourists a year. Every day 100,000 plus tourists are looking for options that are convenient, affordable, and delicious.

girl with bubble waffle
Enjoying a Bubble Waffle

Methodology

User research was developed to learn the following:

After completing this research, I decided to develop a design that highlights realistic photography of the bubble waffle product to help educate the market.

For typography, I wanted to develop a wordmark that would be friendly but not juvenile or kitschy.

The color palette would need to appeal to the Asian market.

Programming elements would include smooth scrolling and Google Map API integration to improve the user-experience and keep users within the website while on their phones.

Research Results

200 partipants responded to an online survey.

Critical findings that describe popBubblepop's target audience include:

Development and Design Considerations

Approach

Every design choice would need to be viewed through the lens of an Asian consumer. For example, the color red, associated with food and restaurants in The United States, can be offensive in China in some situations.

Being a new product, it is also important to educate the consumer on the product, and develop a professional, yet approachable image to promote trust.

Fonts

Baloo, a font-family with Asian roots, was chosen for the wordmark for its playful and friendly appearance. Its rounded terminals are reminiscent of Hello Kitty, the popular Asian character.

Hind was chosen for the body of the site. It's a sans-serif font that was developed for user interface design. Most strokes have straight terminals, which provides needed balance to Baloo's rounded features. The two fonts share similar x-heights as well.

Baloo

Hind

Branding

It is critical that the site's imagery resonate with the Asian Market. Rose Pink is uniformly associated with feminine characteristics in Asian countries. Although shades of black are uniformly viewed as masculine, it was rejected for Cerulean Blue, which also is viewed as masculine in Asia, 1 and is universally recognized as symbolizing trust. Pairing the two colors presents a brand that is fun and trustworthy for both men and women.

Development

Flexbox CSS was utilized in order to take advantage of modern browser support for improved responsive layouts. It is designed to accommodate additional content while maintaining appropriate spacing across various screen widths and heights.

Fullpage.js was utilized to create smooth scrolling that works both on mobile touch screens and desktops.

logo for fullpage.js

User Testing

Modifications

Finding ways to simplify the user experience and keep the appearance and development of the site working in a coordinated manner guided revisions. For example, a hamburger-icon navigation scheme was unnecessarily complex and interfered with full-page scrolling. Since research established that the user base is mobile-savvy, it was acceptable to develop a simple modification to the design.

Navigation

The initial nav bar was confusing to users at mobile widths. Since research indicated the site's users are very sophisticated consumers of mobile content, I opted to remove it on the mobile site and add hinting to the home page to indicate the scrolling capabilities.

screenshot of home page

Fonts

Multiple fonts, including one chosen by the client, were examined for appropriateness and legibility. To make the final selection, multiple A/B tests were run to ultimately select the final font for the wordmark.

Logo and Imagery

Initial logo tests were rejected as being too unrealistic, which would only confuse potential customers. A simple wordmark that would appeal to the emotions of the target demographics was developed instead.

Logo attempts

Prototyping

lo-fi prototype
hi-fi prototype

Revisions to initial protoypes were guided by substantial research:

Since the Bubble Waffle isn't well-known, it was given prime placement on the site. Visitors need to want a Bubble Waffle before they need to know where they are located. Location-finding icons are standardized enought that one-click access to location information is sufficient.

The Instagram feed was moved higher on the page to reflect it's importance to prospective user-base.

Lessons Learned

This project highlighted the importance of having an inventory of digital assets before beginning the design work. Since the Bubble Waffle isn’t well known, there is inadequate free quality photography available from traditional sources. Adobe Stock images were utilized, however, the original intended layouts had to be modified since there are almost no appropriate images in portrait mode.

My scrolling script also interfered with my mobile navigation script, which necessitated smaller design changes to finish the project on time.

My stakeholder for this project, which is a real business that is being launched, is six time-zones behind me. This occasionally caused communication delays, and highlights the importance of developing a schedule of deliverables for clients.