Situation

After 3 years of implementing anecdotal feedback for every client feature request, HeroX's user interface was showing signs of "feature bloat" apparent in the complex client portal dashboard. 

Challenge

The challenge was how to transition the product team away from "waterfall" style development and to Agile? 

Here, we can see the annotated markup of the information architecture on the user interface for the client portal. 

The left column navigation grew out of control. Prior to this it had been horizontal, and it ran out of real estate to continue adding features. 

How do we transition an organization away from the thinking that this is some how "scaling" when in fact it's "experience rot" or "feature bloat?"

Solution: Card Sorting

This is the complexity and depth of information I led the team in organizing using Card Sorting Research. 

By including the project manager, CTO, and other team members in on this card sorting excercise we were able to reduce the information architecture's complexity.

Here, you can see just how complex the information architecture was. It had largely been ignored.

Card Sorting Continued

Here Our team is sorting using Google Drawing. As a team we were able to reduce complexity by getting rid of redundancy and unused items.

Task

My role was Senior UX Designer. I was tasked with leading the team of CEO, VP of Challenge Success, CTO, CMO, and Project Manager through the Design Thinking process.

Action

I used Design Thinking combined with CORE strategy to align stakeholders and to find the root cause of the organizationl teams' malfunction. I then incorporated that with Agile in order to collaborate with the developers.

Sketch Wireframe

In this sketch wireframe, you can see how I was organizing all the information architecture into the left column. I decided to start the admin portal dashboard out with the metrics screen. This way we could prompt the customer to do additional tasks from the left column. For example, we could encourage the customer to add a video, and upsell them with a partner videographer offering or merely allow them to embed a youtube video.

What's important here, is to notice how I've changed the left column navigation from required assets to "additional." 

This expedites the adoption rate of your software, because less is required up front to get to value. The sooner a company gets to value with its customers the higher conversion rates will be across all your KPIs. 

Starting with "metrics" as the default tab, allows the CMS client portal to provide a dashboard of insights and progress for the customer target persona. This immediate feedback informs the customer with real data, and suggests to improve or evolve their challenge overtime using the "additional" features on the left. For example, if the customer's headline was successful, and they wish to improve it they could opt for adding an image or video which could in some cases increase conversion between 25-85%. 

Micro-Interactions

In this medium fidelity wireframe on the right, I was documenting the micro-interaction of "starring" or "following" a challenge from the explore page. Doing so would trigger a notification number near the bottom right user icon. Once the user icon was tapped, the user modal would slideout from the right, and display a leaderboard. The intent was to increase engagement by users competing against one another to see who could "star" the most challenges on the platform.

Functional animations described here, show the correlation between "starring" or liking a challenge, and the user's account where the challenge is stored for reference.

Ergonomics

In this sketch, I mocked up the different screens that users would go throughout their experience on HeroX. From home page with Facebook Login (which was the most used social login) to WebSocket Messenger, to profile, discovery, and leaderboard. 

Positioning the bottom nav on the bottom of the screen made it more ergonomic on mobile, thus becoming more usable.

Final Leaderboard Design

Legacy Information Architecture

New Information Architecture

Here we can see how much slimmer the information architecture stack is in the CMS. This allowed for a much simpler experience, and as a result reduced cognitive load.

Tree Test Navigation Behavior Flow Results

In a multi variate test using Usability Hub, I was able to see the tree test navigation with Option #3 converted the best. Aesthetics that were in Option #3 were distinct from the other options, and as a result the user experience greatly improved.

Design System

Brand Style Guide

Call to Action Everywhere

Mobile-first Strategy

Result

By consolidating calls to action together using encapsulation we were able to increase user acquisition for NASA by 1700%.