RePicture Homepage Redesign

Project Overview

Design Processes

We ran 3 design sprints and each design sprint lasted from 3-4 weeks.

Understand the Problem

Step 1: Get to know the company & product

We kicked off the project with a meeting with the CEO and a co-founder of RePicture and learned that:

• RePicture’s product and services include RePicture.com and an online career exploration program/bootcamp.

• RePicture’s long-term business goal is to increase the number of new college & high school student users.

Step 2: Map out the current user experience

During the meeting, we created a map to capture how RePicture users currently interact with the website.

Step 3: Define project scope

Then we generated some How Might We (HMW) questions to help us frame the problems and picked a targeted area on the map (from browsing homepage to creating an account).

Define the Problem

Problem Statement

The homepage needs to communicate RePicture’s mission and value clearly and show users how they can benefit from this website.

Set Design Goals

After consolidating and analyzing the data we collected, we set some goals for our design solutions:

• College and high school students need to understand RePicture’s mission and value through its homepage.

• The content and the design of the homepage need to be engaging in order to entice new users to sign up.

• The homepage should encourage users to create a RePicture profile.

Sketch

After learning about college & high school students’ goals and needs and researching similar products/features, each team member created a set of solution sketches and then voted for the best solutions. The image below shows the solutions that received the most votes and were chosen to be included in the final prototype for each sprint.

Low/Mid-Fidelity Wireframes

In order to provide intuitive experience and engaging content for the users, we created some low/medium-fidelity wireframes to visualize the page structure and information hierarchy as well as get some feedback from the clients and some potential users.

Sprint 1: Created based on user feedback on the current homepage as well as inspiration from our competitor research.

Sprint 2: Iterated on sprint 1 design based on user testing results and stakeholder feedback.

Sprint 3: No wireframes created (focused on visual and interaction design).

Design System

In order to establish a stronger visual identity, achieve consistency across the product, and improve design/development efficiency, we created a new style guide and built a design system for RePicture.

Design Principles: Professional but Fun

• Professional = simple, clean, and minimal

• Fun = Light with moments of subtle whimsicality

Style Guide (Selected)

Component Library (Selected)

Final Prototype

We incorporated the new style guide into the final prototype and replaced the design elements with reusable components in Figma.

Prototype Highlights

User Testing & Survey Results

We conducted remote moderated testing with 7 college students and received 57 survey responses (3 high school students & 54 college students). Here are some of the key findings:

Pros:

• Users liked the ability to filter benefits by their roles as it allowed them to find the benefits most related to them quickly.

• Users liked that each benefit was also presented in its own section. This made the information easier to digest.

• Users enjoyed the ability to filter testimonials to see those most relevant to them.

  • Showed RePicture is for them  

  • Showed real people use RePicture

• Users were able to easily and quickly identify where to sign up for a profile.

• Users liked the visual design.

Cons:

• Some users felt that the page is too long.

• Some users didn’t fully understand the purpose of the “Meet Our Community” section.