“I am excited to share I had another off-the-charts successful experience with a UMN Design U cohort. I am just so proud of these young powerhouse leaders and know you would be as well.”

- Our client, Katy, referring to the team of five students I was on for this project, sent to the president of the University of Minnesota.

TeamWomen Website

  • client work

  • UI design

  • wireframing & prototyping

  • user testing

Overview.

As a part of the digital division of the pro-bono consulting club Design U, I had the opportunity to be a part of a team of five students and redesign a website for TeamWomen, a professional women’s organization that provides mentorship for women to help them develop their leadership skills.

This was a semester-long project divided into 5 sprints. The project’s final deliverable was a high-fidelity Figma prototype with improved information architecture, a simplified user interface, and clearer information regarding events and COVID-19 updates.

Sprint 1: Problem Definition & Paper Prototyping


How Might We…

establish credibility? increase website retention? show who TeamWomen is? show that they value diversity & inclusion?

Problem Definition

Our client’s main focus was to increase the number of TeamWomen members and sponsors. But, their website was hard to navigate and slightly overwhelming, with lots of information that wasn’t well-organized.

In addition, we believed that the lack of COVID-19 information could confuse users because they might not know that the organization is doing virtual events, socially distanced events, or if they’re not hosting any events at the moment.

The Game Plan

01 | Information Architecture

There were a lot of tabs in the navigation and tons more subpages. All of these options could be overwhelming and confusing for the user. We knew this could be simplified quite a bit.

02 | Homepage Redesign

Initially, we were only going to flesh out the homepage’s UI, but we ended up spending a little time on all of their webpages. However, the homepage stayed our main focus.

03 | COVID-19 Updates

We wanted to ensure that users were in the loop on events, COVID-19 precautions, and any other important information so that they had all their questions answered right away and knew what to expect.

Paper Prototyping

Here is my paper prototype for the homepage. Note that each team member made their own paper prototypes that we would later discuss & combine to create the best design.

Sprint 2: Web Implementation of Design


Lo-Fidelity Figma Wireframe

Again, this is my individual wireframe. In the next iteration, we make hi-fidelity wireframes together.

Hi-Fidelity Figma Wireframe

This is the Figma wireframe we made as a team based on what we liked best from all of our individual wireframes.

Sprint 3: Brainstorming User Flow & User Testing


User Flows for Testing

Users must stay on the homepage and we ask them what their understanding of TeamWomen is. We are looking to see if we successfully displayed the “big picture” of what TeamWomen is.

Flow 01 | Who is TeamWomen?

Flow 02 | Becoming a Member

In order to see how users navigate the new structure of the website and to analyze the user flow for learning about membership, we ask the user to find more information about becoming a member. Like what kind of benefits are there? How much does it cost? How do you join?

Flow 03 | Virtual Events

To further test the website’s flow and to ensure COVID-19 updates are clear and accessible, we ask users to go to the Events page. Here, we ask them to tell us how TeamWomen is handling events during COVID-19 and to try registering for a virtual event.

Overall, user testing showed that we were quite successful in creating design solutions that met users’ needs as well as the clients. We made a few small tweaks to our designs before moving to our final sprint.

Sprint 4: Analyze Data from User Tests & Evaluate Design


Sprint 5: Create Final Deliverable


Our final deliverable was a clickable Figma prototype.

Previous
Previous

Wabasha Street Caves

Next
Next

Designathon