RocketBlocks

• Questions are contained in one page for all course tracks

• No use of contrast or separation for new content, sidebar navigation or header content

• Course tracks are indicated in a side bar

• Active states, links, main navigation and buttons are all brand color = brand reinforcement, lacking in providing signals for the user.

• New sidebar navigation communicates the user has a new flow of information to discover

• After checking all tracks, each course track looks identical (same photo header, no variation)

• No indication of active state in main or sidebar navigation

• Purple circles indicate content I can access, not active content

• Successful hierarchy of Module title

• Main nav bar, header and page content each clearly separate using high contrast

• Poor use of active states for main nav increases cognitive load for user

• Main Nav + sub nav side bar organizes content in layers

• Successful separation of side bar navigation and content

• Lower-left placement of user info

• Title of “track/course” displayed with the user avatar

• Navigation module accessible from user avatar

• No active state, assumed logo will return to main Dashboard

• Successful use of minimal line icons throughout the interface

Opportunities:

1. Module title Product Marketing in yellow feels like an active navigation item rather than a header.

2. User assumes returning to the dashboard target is Product Marketing however, the flow back to dash is the RocketBlocks logo.

3. User flow to switch to a new module is not visually associated with the module title.

4. No indication on the dashboard content as to what the user is studying or which module is live.

1. Move module indicator to the far right, where the trigger for switching modules is already located. Add a color “chip” to anchor navigation and distinguish each of the four modules. Combine title with username to reinforce the module selection is directly linked to the user, not the navigation.

2. Add hierarchy to the dropdown menu highlighting the 4 modules with color + icons.

3. Add color and iconography to create visual separation between modules that remain consistent on all pages for each module.

4. Add module “reminder” to the progress tracker card on dash

• No separation of the two main pillars Drills & Concepts

• No indication of progress, but a running tally of completed work

• Add module title and module brand color combined with a progress bar

• Distinguish Concept progress from Drill progress

• Add numerical indicators of progress as well as “complete” and “in progress” identifiers

Opportunities:

1. Consider a sticky navigation bar structure, this will open up some UI options for active/progress states and ensure nav access while scrolling.

2. Add the Concept title or bread crumb menu This Concept page is “Product Analytics” but the parent category is not listed in the content nav or content.

3. Improve active state with color use and tints instead of red bar (avoid red to reduce the impression of an error).

4. Collapse inactive categories to simplify and organize the content navigation.

1. Add active states to navigation (brand color + underline)

2. Continue active state pattern to progress sidebar / lists (brand color + line)

3. Design curriculum lists in segments signifying the open sub-track, progression of the sub-track, and user’s location.

4. Collapse other sub-tracks to reduce cognitive load on screen

5. Add concept subject title to each track combined with “see all tracks” back button.

Consideration: Sidebar + Contrast

In order to open up a new set of UI options for the side progress bar in Concepts, I proposed a classic sidebar design that would use a white container, and more blue tints for active states.

Ultimately, stakeholders were concerned that the sidebar and white container competed too much with the core content.

Opportunities:

In the Drills pillar, users would benefit from simple indications of which Drill is active. This could be solved with a simple breadcrumb menu at top or a header.

Drills may also benefit from a progress tracker (ex: 1/10) to orient users within the module.

Lastly, consider a sidebar structure to create consistency with Concepts pages, and gain access to progress and navigation after scrolls.

1. Indicate which drill the user is studying.

2. Move breadcrumb content to act as a header for each drill with drill track and sub-topic, rather than embedded into the drill content.

3. Create an indicator to return to drill “review. The same function is possible and visually similar for Concepts, creating consistency and a parent page for drills.

4. Add simple number tracker system to indicate how many drills are available and how many have been visited.

• Grid format: drills are not linear, rather, they are like a deck of cards. It was important to display in a grid instead of a list.

• Numerical progress tracker: reinforcing a sense of progress

• Dual routes: users are review completed drills (ghost button) or run their drills (solid button)

1. Switching Modules (PMM, PM, COM, S&BO) the functionality was good, but the balance was off. I designed a new option moving the color "chip" to the right and added a two-tone dropdown button to balance the screen and reinforce the button’s function.

2. Module Header: the banner and progress bar worked well to identify the module, but there was some tension here visually. I decided to wrap in some of the copy from the intro/welcome back dialogue on the live product to create a new card that featured the module name.

3. Progress Bar: Changed to progress dial and color changed to RB blue across all modules.

4. Run Drills feature allows users to identify how drills are being fed to them, and gives users the power to sort their flow of drills, or continue with random drills.

5. Organized Drill Topics: Taking some patterns from Concepts navigation, the Drills nav features all topics, how many drills are in each topic, and each topic can be inspected to see drills. (see #6)

6. Inspect Drills: Like Concepts, Drills expands to another tier, allowing the user to see each drill, return to drills, and gauge which are complete.

More Projects

Ralli | Mobile Voter Guide

An end-to-end study and solution to help young voters vote.

WineSavour Virtual Shop

A full-stack UX/UI study built alongside wine lovers, for avid wine shoppers.