Yelp WiFi Website

A fresh look for Yelp's new product: Yelp WiFi.

Yelp Wifi Web Design + Illustration

Background

During the summer of 2017 I had the amazing opportunity to intern at a small Toronto-based design agency, IDLMR Design. One of our clients was Turnstyle, a wifi marketing company, who wanted us to redesign their website for them. During the process, Turnstyle got acquired by Yelp, which in turn made Yelp our new client. To my surprise, our CEO and director of design gave me most of the responsibility in designing the new website. From researching, wireframing, creating assets like logos and mockups, to coordinating with our developer, I was able to partake in this exciting project for Yelp.

Role: visual design, illustration, icon design, interaction design
Timeline: June - August 2017

Research

Wifi marketing is the business of using wifi services to engage customers and build customer relationships. When any public facility offers guest wifi, they can utilize wifi marketing to analyze the customers that connect on their network and collect their information. The business can then send out relevant promotions based on their profiles.

Knowing this, the Yelp WiFi website would be targeted mostly to businesses like restaurants, cafes, retail stores, gyms, etc. In particular, smaller businesses that want to increase market penetration and make existing customers recurrent.

There are numerous wifi marketing companies already in the field, and Toronto-based Turnstyle was on the rise to be on top. However, there are still many competitors, with the biggest being Zenreach, Purple, and Aislelabs. With Yelp's acquisition, Yelp WiFi is at a great advantage with not only their previous expertise but now with Yelp's brand value.

Tokyo Smoke

Tokyo Smoke, a cafe based in Toronto and one of Turnstyle's clients.

Problem

After conducting research and analyzing Turnstyle's old site, I identified the following issues:

Turnstyle's old landing page and product trial page (which unfortunately did not include the images as it's a cached version of the page). The homepage is cluttered and the trial page reminds me of a phishing site.

Goals

Information Architecture

As mentioned earlier, Turnstyle's IA was disorganized, with pages being linked under multiple navigations. It was also inefficient, as it required users to click excessively before reaching their goal (i.e. features page made you click on each feature to learn more about it).

Turnstyle IA

Turnstyle's old IA

So we eliminated all the unnecessary links and pages, and stripped the site down to its core functionality: to convert potential clients and provide support for current clients.

Yelp Wifi IA

Yelp WiFi new IA

Sketches & Wireframes

Our team began the ideation phase by all brainstorming and presenting our best ideas with each other. For my design, I wanted to take the direction of illustrations and characters, to communicate a playful, exciting message that Yelp's brand aligns with.

Yelp Wifi concept sketches

Brainstorming through rapid sketching.

Yelp Wifi Ideation

Playing around with ideas through low fidelity designs on Sketch. My first idea featured an illustration of a city with the wifi signal behind it, symbolizing that Yelp WiFi informs you of the community.

Illustration

To look for inspiration on my concept, I browsed through shots on Dribbble and was really drawn to isometric illustrations, as they are able to portray a setting and tell a story. I tried my hand at doing an isometric illustration through Sketch and created an image of an interaction between some friends chatting at a cafe. The phone and wifi symbol ties in Yelp WiFi's whole idea together of giving guests free wifi to enjoy while they're spending time at the public space.

Yelp Wifi Ideation

Iteration 1 of the illustration, where I chose colors based on Yelp's branding.

Iteration 2 of the illustration since my team lead said the first one was a bit too safe and I can explore with colours to make it more eye-catching.

High Fidelity Mocks

After iterating on the illustration, I placed it into my landing page concept, where I came up with the copy and icon design as well.

Final Design

When presenting all of our design concepts to the team, we decided to go with my team lead Isabella's concept for the final website. However, I didn't see this as a failure, as I had fun practicing my illustration skills and I learned a lot on the way. I also know that it is easy as a designer to get attached to one idea, so pivoting to a new one was a good reminder on the importance of iteration and designing without bias.

Styleguide

The styles we chose for Yelp WiFi are in accordance to Yelp's styleguide.

Animations

I created a few video prototypes for some of the animations that could be integrated into the site, such as the nav dropdown animation and the anchor link side bar. The anchor link sidebar can be found on this page.

Nav dropdown animation prototyped in Principle.

Assets

Industry icons made in Illustrator.

Login splash pages for different partner brands.

Reflection

getting over the Imposter syndrome

At the beginning of this project, because the client, Yelp, had such a big name, I often felt intimidated and doubted my design skills. I fell down to the imposter syndrome: I kept thinking "I'm just an intern" or that I wasn't good enough to be creating for such a big brand. Through completing the project, I became more confident in myself and my design decisions without doubting them.

detachment from bias

As I mentioned earlier, having my design concept rejected turned out to be a real learning experience. I learned how to get over bias and attachment for my own designs and objectively see why the other design is relatively better. This is one of the key concepts of iterative design, and I now take feedback and criticism a lot better.

What I would do differently...

In hindsight, more research could have been conducted before we started designing the website. Specifically, user research on the target audience of the site would have informed us to make more evidence based design decisions.

Additionally, we never conducted any testing for the designs, and I think usability testing or click maps would be helpful in creating more effective iterations.

My internship ended before the site was fully deployed, but if I was still on the team I would have loved to get web analytics data to measure success metrics.