.png)
Peek Website Redesign
As UX designers, we were tasked with a website redesign for an assigned startup. Our team was assigned to Peek, a website to inform potential users of the benefits of downloading the Peek app. The design brief asked us to redesign the Peek website to promote the upcoming release of the app's newest version.
My Role: UX/UI Designer &
Design Lead
Team: Five Members
Timeline: Three Weeks
.png)
The Problem
The Solution
We have observed that tv and movie fans who utilize streaming video services want to stay connected to their friends and family by sharing their recommendations and reviews. How might we improve the Peek desktop landing page so that our users are successful based on an increased rate of app downloads and reactions posted?
A website redesign to clearly communicate the benefits of downloading the Peek App. Peek is a mobile app that empowers streaming video fans to find, react to, and recommend movies and tv shows with their family and friends.
User Research
We conducted a survey and user interviews to obtain quantitative and qualitative data on video streaming habits and the pain points of our users. We wanted to better understand how they prefer to give and receive recommendations, how they find new content to watch, and how much content the average user is streaming.
Our team conducted a Google survey of 130 millennials to discover their video streaming habits and how they prefer to give and receive recommendations. 40% of those surveyed reported watching more than 9 hours of streaming video per week during quarantine, and over half said they keep a list of to be watched TV shows and movies.
Following the survey, we conducted 8 user interviews to better understand how users decide what to watch on streaming services and make viewing recommendations. Without fail, all of our users said they trust their family and friends the most when it comes to getting content recommendations and rely on sharing tv and movie recommendations to feel close to others.
Next, we conducted a heuristic analysis of the existing website for Peek. We felt that the site didn’t fully highlight the best features on the app and what makes Peek stand out. The bright colors could be challenging to read when it comes to accessibility, and there was dominating whitespace.
Peek Website
Definition & Ideation
We chose to do a SWOT analysis to better understand Peek’s competition. We analyzed 5 direct and 2 indirect competitors, noticing that a major strength of our competition is how easy it is to recommend movies and TV shows, while the biggest threat is the number of current active users. We see Peek’s greatest opportunity as being able to recommend, share and react to movies and tv shows all in one app. While many competitors have one or some of the features, no other apps have all.
In this stage of our process, our team wanted to hone in on who our user is to make sure our landing page has enough information to draw in our user while also still being eye-catching enough for them to stay on the page as long as possible. Our first step was to flesh out our ideal user more by creating a user persona, Jocelyn. We made our ideal user someone who is younger, who likes to binge-watch movies and tv shows, and is active on social media, but also does not have a lot of spare time. These decisions guided us with our design and content flow choices later on in the process.
Peek, is developing a social media platform to connect users with friends and family by sharing reliable, personalized movie and tv show recommendations.
Peek provides recommendations from the people you trust the most.
​
Our flow is very simple due to the fact that the landing page’s main purpose is to get our users to download the app. With this big goal in mind, and our research guiding us, we were able to begin building the site.
Prototyping
Our team began our prototyping phase with each of us creating a low-fi wireframe. Each wireframe was designed separately, but it became apparent quickly that our group was in agreement. We wanted a single page for our users to find information about the Peek app and give them several opportunities to click the “download the app in the app store.” button.
We decided to use 4 questions inspired by the book “Don’t make me think” by Steve Krug. We wanted to test our users' understanding of our landing page and the reasons why they should download the Peek app.
The results of this user testing were pretty clear: 100% of users understood what were the features of the Peek app. 80% understood the purpose of the landing page, but less than half of our users understood the functions of the landing page, and half said they would download the app
Style & Branding
We began our branding design process by putting a few Mood Boards together for visual inspiration. This would help us to later develop our final layout.
We struggled with color. We weren't totally satisfied with Peek's existing color scheme. We experimented with different combinations and researched color theory to develop a color story of our own.
We took a look at other popular social media and streaming apps and we noticed the color trend of utilizing a cool shade in tandem with a warm tone.
With this in mind, We wanted to create a colorway that felt relevant but individual to Peek. We landed on two on-trend blues; Pantone’s Classic Blue and the WGSN 2021 color pick AI Aqua. Additionally, we chose a complementary tangerine for accents.
We developed a clear style guide for our stakeholders with two clean typefaces and three energizing colors to differentiate our product and create brand consistency.
Testing & Iterations
For this iteration we implemented our branding and style onto a combination of our low-fi prototypes.
We again wanted to test whether or not our users were able to understand what the Peek app is about, and its value, but also understand that this site’s main purpose is to download the app. We were successful in getting the users to understand the features of Peek but unsuccessful in conveying that this website is a place for information with a call to action to download the app.
In our next set of iterations, our main focus was on the copy. Making changes like the language of the tagline and body copy so that in the first few seconds of viewing the website our user understands that this is an app to download.
We evaluated our changes by conducting a 15-second test in which we found that overall 77% of our users now said that the first thing they could do on this site was to download the app.
In the video below is our final prototype, which includes all the iterations we made throughout our process. At the top of the landing page there is a call to action to download the app, as well as a tagline and body copy to convey Peek’s value and purpose. Scrolling down, you’ll see the features section followed by how the app works. Then, an about us section for why the app was created and by who. Then, a reviews and a FAQs section to answer any doubts or questions the user may have about the app. Lastly, a place to share the link with your friends and family so that everyone you love and trust for movie and tv show recommendations can all be on the app together.
In Conclusion...
-
Our design team is grateful to have had the opportunity to work for a startup because it is a real-world experience.
-
We had several issues with finding the color scheme that fit the site the most. We learned to test colors for accessibility first.
-
We learned the importance of usability testing. After each test, we iterated and significantly improved the website.
-
We always kept our User Persona and Problem Statement at the top of our minds.
