The current internal admin web app is difficult to navigate because of the inconsistent sidebar design.

Users are also having issues with the save functionality. Overall lack of confidence in the app saving functionality causes users to press save repeatedly.
‍
AMOpportunites (AMO) is a web based marketplace that provides clinical training solutions to medical trainees, schools, and hospitals to increase access to U.S. medical education for international students. Students are able to purchase program packages for medical rotations on the web app.

The why

Revenue-driving program team workflow must be optimized

The current sidebar and save button cause an inefficient internal program team workflow. This increases manual labor, decreases internal efficiency, and overall will cost the company more $money$ in the long term.

Design Goals

Improve Navigation

Efficient Workflow

Reliable Saving

old sidebar pain points

The lead product designer Daniela filled me in on pain points according to stakeholder feedback. With limited company resources, we did not conduct a usability test on the old sidebar. Instead we depended on reviewing accounts from service desk tickets.

Conducting User Research

Research Goals

Determine industry standards for save button

The current sidebar features a save button that is hidden and hard to view. We wanted to understand other ways to implement a clear save feature.
‍

Find sidebar design inspo from app with similar architecture

Using industry standard applications, we wanted to find design inspiration for the sidebar that fits most with the architecture of our app.
‍

Determine save button CTA industry standards

The save button will be a call to action. We wanted to determine the optimal placement for the new save button based on UX principles.
‍

secondary researcH insights

Autosaving breaks with user expectations

Jira sidebar as design inspo with similar framework to AMO

CTA save button should be on bottom right corner

- Breaking insights down -

01. Autosaving breaks with user expectations

According to Baymard research, users want to know their changes are processed by the system. The AMO save feature must therefore include an active button for saving.

02. Jira sidebar as design inspo with similar framework to AMO

Jira has as similar app architecture to the AMO internal app. Jira is an industry standard tool, and the sidebar is efficient and could serve as inspo following UX best practices.

03. CTA save button should be on bottom right corner

Gutenberg Principle : One way users visually scan a page is in a z formation, particularly when there is CTA (placed at the end of the Z). Placing save button at end of Z will increase it's visibility.

Defining the User

internal amo employees

Our users are internal AMO employees that work on program management. They work closely with outside hospitals to understand their medical internship offerings and input them into the app marketplace for sale to medical students.

Why Them?

Program team internally inputs revenue driving products into app marketplace

When program managers work quicker and more efficiently at onboarding programs into the system, this translates directly to the companies $ bottom line $ as there are more programs available on the app for sale.

The Admin Workflow

AMO offers medical rotation programs for sale to medical students on the marketplace. The program team helps to input available programs into the system on the backend via admin panel. Once inputted, it will show up on the marketplace below.

Being new to the company, I sat down 1:1 with the Chief Product Officer and an AMO program management employee to understand the workflow for the particular page I was redesigning the sidebar for to keep within their process.

Use Case - admin app navigation

Internal admin employee wants to view a specific program and make edits to that program internally via admin panel. They will need to navigate between pages to make these edits, and using the sidebar will assist with this navigation process.

Conceptualization

Sketching Phase 1 - Linear Design x

Preliminary sketching included a strict linear sidebar which traced the steps of the employee workflow in a linear fashion. User has to input information at step 1 in order to proceed forward to step 2.

Phase 2 - Flexible design ✔

The approach to the workflow can vary from employee to employee, and that wouldn't suit a linear design. Some employees may input information in one category, but not another due to having limited information themselves from medical centers at the time of input.

User autonomy in their workflow approach needs to be reflected in the sidebar design. Toggles and categories accessible at all times optimizes workflow.

Save button footer will float up when user has made a change to the page. Gives users update on system status and confidence in saving.

Stakeholder Feedback

Use an accordion in the sidebar to reveal subcategories

In sketch 2, the sidebar had main categories and subcategories. Subcategories were accessed by clicking the arrow right, which would flip a page of the sidebar to reveal the subcategory contents (like Jira's sidebar).

But stakeholders need easy navigation between categories. An accordion style sidebar instead would allow for main categories to unfold and reveal subcategories without a page turn, making it visible at all times during the workflow.

Hi-fi design for testing

Usability Testing

Test Setup

5 user tests were conducted via Loop11 where users interacted with the prototype. Participants were AMO employees that have used the admin app before. They were asked to complete 7 tasks and answer survey questions to provide quantitative data in addition to the qualitative. The lead product designer and I took turns moderating the usability test and taking notes.

Task Scenarios

Each task was created to understand how users are navigating through parts of the program edit page using the new sidebar. The task scenarios reflected the page workflow.

Usability test Insights

Users were able to complete all of the tasks. Some were initially concerned that they wouldn’t know how to use the program edit sidebar because the scope is outside of their day-to-day workflow. Nevertheless they easily navigated using the sidebar.

Positive User Feedback

Highlighting on sidebar to help users know where they are navigating and what tab they are currently browsing.

Felt it was easy to save with floating footer, and overall easy to navigate the page.

Pain Points Revealed

Wished accordion would close automatically when they click outside of the accordion.

Contents inside of the program actions dropdown were not aligned with every use case in the workflow.

The Solution

Sidebar redesign improves autonomous workflow efficiency and promotes program team's revenue driving capabilities

As a revenue driving team, program management needs to be able to efficiently navigate between pages and optimize their workflow. This will allow the business to be more efficient and scale quicker by allowing the revenue driving products to be inputted into the app quicker.

Before & After

Save button Footer

Save button inspires confidence in it's users through interactive UI elements. Users are aware when a change is made on the page because of the save footer slide up interaction. Users have confidence their work has saved when the save footer slides down.

Final Product

Project Reflection

01. Process Improvement

Shadowing more people from the Programs team to understand how they use the current design and ensure it aligns with other teams workflows too.

02. Product Improvement

Before adapting the newly redesigned sidebar into other pages of the admin app, making sure to adjust the interaction elements on the sidebar to suit user feedback from the usability test.

03. It's ok to venture outside of the design system at times

If the solution is the right one, it might be best to venture outside of the design system so long as the solution matches user needs.