
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
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:

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.


Current Likewise website


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:

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.

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.

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.

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.

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.

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.

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.



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