UX Team 1 - East and Center Group - Redesigning Navigation Bar


Context:

This project was done as part of a five week long UX design and research internship that aimed to redesign the StemAway navigation bar. StemAway is an online platform that creates project teams of various experience levels in various STEM fields under the lead of mentors and real world professionals. This team consisted of four people.

Overview of Process:

  1. Defining the Problem Statement
  • Interviews
  • Task Flow
  • Analyzing user interview insights
  • Affinity Mapping
  1. Brainstorming of Solutions
  • “How Might We” Statement Brainstorming
  1. Evaluating and Developing Solutions
  • Dot Voting
  • Impact Feasibility Matrix
  • Card Sorting
  • Information Architecture
  • Survey
  1. Prototyping
  • Low Fidelity Prototyping
  • Mid Fidelity Prototyping/Wireframing
  • High Fidelity Prototyping
  • Usability Testing

Process

Step 1: Defining the Problem Statement

In order to better understand how users interacted with the platform, we conducted 8 semi-structured interviews, half with StemAway users and half with non-StemAway users in order to identify key pain points in their usage and navigation of the website. We used affinity mapping in order to narrow down key pain points for users. The key insights we made from these interviews were that the majority of users had difficulty finding certain features, most notably the notifications and messaging features. New users had difficulty finding and browsing posts. We used these key insights to create our central problem statement: Users are not able to efficiently navigate frequently used aspects of the StemAway website in order to communicate with their team and view important updates.Our solution aims to redesign the navigation bar on the StemAway platform to increase accessibility to important features, while minimizing confusion and clutter.

Step 2: Brainstorming of Solutions

Based on the affinity map, we created “How might we” statements to address the main pain points interviewees had. Then, we brainstormed solutions for each “How might we” statement at a time.

Step 3: Evaluating and Developing Solutions

We conducted a few rounds of dot voting for each “How might we statement,” until we finally landed on two overall solutions, which we then evaluated using an Impact Feasibility Matrix.

However, after further thought about our solution, we decided it was a very simple solution that wouldn’t take much effort at all. We then realized that implementing some of our top solutions would not take too much effort from the company, but would still have great value for the user, so we decided to implement several of our solutions. During this time, we also decided that the focus of our project would be the navigation bar since that was what most of our solutions were concerning.

Next we decided on our information architecture, which we started by having interviewees do card sorting. Treating each option in the navigation bar as its own card, we had the users group all the cards together in whatever organization they felt made the most sense. Then, interviewees were asked to rank their groups based on frequency. Using this information, we came up with an information architecture.

Lastly, in order to decide on the order of the options within the drop down menus, we conducted a survey to find out which buttons users click on most frequently to least frequently.

Step 4: Prototyping

Using our constructed information architecture, we used Figma to create low, mid, and high fidelity prototypes. Structured usability testing was conducted in order to gauge the effectiveness of our solutions. Interviewees were given a set of simple tasks to complete within the prototype models in order to gauge their ease of finding various features. The same tasks were also performed on the current StemAway website in order to gauge improvement.

Final Product:

Search bar:
Tags are now included in the search bar for users to browse, with most recently used tags being recommended immediately as well as the option to view all tags.

New Messaging Icon:

Messages are now directly accessible from the task bar in order to increase visibility and encourage usage. On the old StemAway model, many users had difficulty finding the messaging system, with some not even being aware that there was one at all. With our new model, users were able to instantly recognize the envelope icon and access messages in one click.

The introduction of the Bell Icon:

As users were consistently confused on how to access notifications, we decided to implement a bell icon, as it is instantly recognizable by users due to its popular usage in many major social media platforms. This recognizability reduces confusion for new users looking for notifications, as is more intuitive than clicking on a user profile picture for notifications.

Getting Rid of the Hamburger Menu and Introducing Forums:

During usability testing with the old website, users spent considerable time reading through the hamburger menu and trying to find target features. During card sorting, users consistently ranked using the categories button to be the most important feature within the old hamburger menu, as it was important for them to be able to access posts.

However, within the old model, many users were not able to find requested posts during our usability testing. The acronyms used for pathways did not make sense for first time users, and many did not seem to associate the word “categories” to mean forum posts.

The new forum button allows for users to intuitively browse forums and posts by their respective category and pathway. The General section of forums take the users to posts that are non pathway specific, whereas the Pathways section directs users to pathway specific forums. This allows users to effectively find and browse target posts. The forum button is also placed in the location of the old hamburger menu, so returning users would still intuitively click here when looking for posts.

User profile icon:

Instead of having notifications, messaging, and bookmarks under the user profile icon, we decided to have it contain features that were specific to each user, as this would be more intuitive. The log out button is also included here, as users consistently grouped the log out button with other user centric features since they are logging out of THEIR account. Furthermore, moving the log out button from the directly on the taskbar reduced confusion for the users who would accidentally click it when looking around for features.

Other Solutions:

Besides the information architecture above, we also created two other ones, but decided not to proceed with them, because we did not want to have a hamburger menu in our solution, since we felt a hamburger menu was not the best way to organize the options. As for the second one, we felt it was too complicated to have an additional drop down menu.

1 Like

Link to High Fidelity Prototype:
https://www.figma.com/proto/pXQL7p9w06PKIyma34f3QW/High-Fidelity?node-id=44%3A748&scaling=min-zoom

This is extremely good! Great Work!

Add your Lo-fi and first Hi-fi iterations and you have a great portfolio project!