WeSolv

Overview

Role

UX/UI Designer

about WeSolv

WeSolv is an innovative platform that connects top MBA students with each other and top companies to solve real business challenges.

The challenge

WeSolv allows students to find business challenges and other MBA students to collaborate with through two critical pages on their website – the Challenge Detail page and Team Detail page. I was responsible for redesigning these two pages by enhancing the look, feel, and overall user experience to help users quickly and efficiently apply to challenges and collaborate with team members.

Current product state of WeSolv's home page.

Defining The Scope

Initial meeting

The initial meeting with the Stella, the CEO, and Brittany, the Director of Product and UX, was to learn of the importance of the Challenge Detail and Team Detail pages, outline the scope of the project, and discuss new concepts they would like designed. To get a clearer understanding of what was anticipated in the redesign, I asked questions like, “Are you open to a different color palette? What are some adjectives you would want the new design to look and feel like? What do you think the competitors do well?” I was provided with past UX research, user interviews, wireframes, and mockups, which I synthesized and began ideating and designing.

Challenge detail page

Where students will find all the information pertaining to a challenge and apply if interested.

“We’d like some additional design eyes on it to help make sure that everything is readable and usable, given the amount of important data that will be displayed. In the future, we want to be able to share certain aspects of the ongoing challenge with students that are not involved in the challenge.”

- Brittany, Director of Product and UX

Current product state of the Challenge Detail page (left) and the new wireframe for the redesign (right).

Team detail page

Where students will go to see all the information about the challenge, any updates to the challenge, videos of touch-points, and where they will upload any deliverables.

“Essentially, we want this to be a one-stop shop of sorts where each team member can be updated about what’s going on with their team and the challenge. The data will be updating frequently, so we do want to have a scrolling list up updates and identifiers for new information, as well as eventually a place where team messaging can occur”

- Brittany, Director of Product and UX

The new wireframe for the redesign of the Team Detail page.

The Process

Challenge detail page

I started the design process by identifying three categories of the Challenge Detail page: challenge details and company background, project logistics, and navigation/CTAs. I started sorting the sections into one of the three categories and numbered them in order of importance. I began by sketching a low-fidelity wireframe of the basic layout and went straight to designing a high-fidelity mockup in Sketch.

Planning for the Challenge Detail page (left) and my low-fidelity wireframe (right).

Team detail page

The three main concepts I was asked to focus on within the Team Detail page were the challenge summary, workspace, and team members contact. When I first analyzed the initial wireframe, I noticed that all three components were on a single page, which contributed to information overload. I began to explore using a sub navigation menu and divide up the sections to better organize the content and lessen the cognitive load.

My low-fidelity wireframe for the Team Detail page.

First Version of Designs

meeting with the client

I presented my first version of designs to Stella, Brittany, and their Front-End Developer, and we discussed areas and pages that needed to be reworked.

First version of the Challenge Detail page (left) and Challenge Overview tab on the Team Detail page (right).

First version of the Tasks tab (left) and Documents tab (right) on the Team Detail page.

Feedback & Insights

Feedback: The client wanted to see an image for the company displayed on the Challenge Detail page.
Goal: Find an area where an image can be incorporated into the page without taking up valuable space.

Feedback: Challenge Detail page felt too long.
Goal: Stack the bottom half of the sections to save screen space.

Feedback: The deadlines section is placed too low on the page.
Goal: Explore how the dates can be visualized differently further up on the page.

Feedback: Incorporate a messaging team option into the tab somewhere. This page doesn't need to be designed.
Goal: Change the My Team tab to Messaging.

Feedback: Client wants another way to view documents.
Goal: Create a list view option for documents display.

The Solution

Final iterated designs

In my final meeting with Stella and Brittany, I walked them through the new Team Updates page, which included announcements, the team’s recent activity, and a WeFeed section. They were pleased with the way I visually represented their concepts and reworked their suggestions, and stated it was exactly what they were looking for. I wrapped up the project by creating a style guide to hand off to the developer and future designers to ensure my designs remain consistent as WeSolv continues to grow.

Final version of the Challenge Detail page.

Final version of the Overview tab on the Team Detail page.

Final version of the Updates tab on the Team Detail"page.

Final version of the Tasks tab on the Team Detail page.

Final version of the grid view of the Documents tab on the Team Detail page.

Final version of the list view of the Documents tab on the Team Detail page.

Check out my other work!