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.

5a999e96ac644700014bf0af_Meeting notes.p


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

5a99abc008aff7000155119f_detail challeng

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


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

5a99af5fbcf1370001c32f58_team detail.png

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


The Process


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).


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.

5a99c3fc7a31860001bb0a6f_Team detail wir

My low-fidelity wireframe for the Team Detail page.


Version 1 of Designs


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).

5a99db4d7a31860001bb2387_Group 57-p-2000

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


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


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.

5a99e36c4457090001fe80ce_Group 62.png
5a99e38f3c10db0001e773a4_Group 63.png
5a99e4c23c10db0001e773eb_Group 64.png
5a99e4224457090001fe80f5_Group 65.png
5a9a22cd0207720001054d0d_list view.png
5a99e4d6d97d1f000101eec3_Group 66.png