top of page
mockup_edited.jpg

Likewise Responsive UI Redesign

Background

For the last group project in my bootcamp, our team was challenged to redesign a responsive website. We connected over wasted time spent searching for great entertainment. Likewise is an app that gathers user recommendations for books, movies, TV shows or podcasts.

3 Person Team

- Project manager

- UI Designers

Role

- Project Manager

- UI Designer

Tools

- Figma

- Trello

- Miro

- Maze

The Process

1

2

3

4

5

Research

Define

Ideate

Test

Develop

Research

We began by conducting a heuristic evaluation of the current desktop and mobile app as well as a competitor analysis, a survey and  5 interviews.

From our interviews:

Affinity Diagram

We realized upon visiting the app Likewise that although the concept is valuable to many streaming users, it was clear that the developers had prioritized the app in comparison to the website therefore we wanted to streamline the transition from mobile app to desktop so that users would not feel any friction between the two.

home
LIKEWISE-desktop

Current Likewise website 

ss 1.PNG
ss 2.PNG

Current Likewise app 

Define

Problem

Multimedia users spend a lot of time searching for streaming content that they will enjoy. Currently Netflix, Hulu, and Prime provide unrelatable immediate recommendations resulting in frustration from the user due to the amount of time spent finding a worthwhile show to watch. Through our user research, we discovered finding the right streaming content is challenging because it leads to extensive time searching for relatable recommendations from streaming services.

How might we... reducing time searching for streaming content by providing higher quality recommendations and a community based network of suggestions?

Meet Alvan:

alvan

User persona, Alvan, was created based on the answers of our interviews and assumptions on a streaming service's client.

User Scenario

Continuing to use the collected research, our group created a user scenario to visually lay out how the user might interact with this feature, and thus create a more intuitive user experience while providing some background information as well as goals and opportunities for this redesign.

Journey Map

Above: User scenario

User Flow

We finalized our onboarding user flow for the website. On the current website, in order to create an account, the user needs to download the app; however, we felt that was an unnecessary step and removed it but allowed for multiple socials to connect with.

USER FLOW

Above: Likewise User Flow

Ideate

Style Guide

We chose to keep the colorful aspect of the original site but changing the hues slightly to provide readability. We also liked the current icons but added a few that matched to allow for a smooth flow and discarded of their serif font to keep a modern look and feel to the site.

style tile

Lo-Fi to Mid-Fi Prototype

We began by sketching the general layout of the pages on paper then created a digital prototype for testing. We wanted to see user's reaction on differently sized tiles and some of the wording on the headings.

low and mid fi

Test

Usability Testing

Testing for usability is vital for the improvement of this design so we tested the lofi in order to continue our design process. We chose to do guerrilla-style usability tests with 3 participants with which we were able to refine what users found useful and what could be improved upon and Maze which allowed us to visually see if users were struggling at any task. The results of the usability testing were recorded to analyze later on. 

heatmap

Key Findings

Findings

  • 75% of users accomplished all tasks in less than 10 seconds

  • 28% of users misclicked when looking for a group to join.

Improvements

  • Changed “My Groups” to “Groups”

  • Added more features on the main screen instead of hidden behind the “Create” navigation.

A/B Testing

We created 3 different navigations to provide users with their preferred navigation style. the first one being a top navigation, the second being purely side, and the third one being a hybrid, similar to that of the current site. After interviewing 6 people, we decided to move forward with the hybrid navigation as 5 out of the 6 subjects preferred this option. We did however make some stylistic changes and changed the wording of the navigation.

ab testing menu

Develop

Final Product

This is the final product after the iterations with the user in mind; this keeps in consideration the users of the website as well as maintaining a clean and engaging feel. 

With the two weeks allowed for this prototype, the high fidelity was focused on the task to join a group and the home page on all devices.

Mobile Home Page
iPad

Takeaways

Challenges

Trying to stick to an appealing, colorful site was not a big issue but ensuring that all of the titles were legible was a challenge and thus we had to make it fun yet functional. We also had to make sure most topics were shown to ensure that no user was left behind but we changed some of the wording so that they wouldn't feel any friction when trying to search for a topic. 

For the Future

We would like to further develop our ideas with code through Bootstrap primarily incorporating grids for the layout and JQuery for the micro interactions. We would also continue to iterate on the desktop navigation by continuing to a/b testand implement features from our original brainstorm and expand through the entire website. Lastly continue to integrate features from the current mobile app to the desktop to further develop a seamless transition to Likewise users and to attract new users as well.

View Other Case Studies

amazon redesign

Amazon

Redesign

Nonprofit redesign

Nonprofit

Redesign

EPA redesign

EPA

Redesign

bottom of page