WeSolv is an innovative platform that connects top MBA students with each other and top companies to solve real business challenges.
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
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.
THE 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).
THE 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.
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.
Version 1 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 FROM THE WESOLV TEAM
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.