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. 

Edit Admin

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.

Information Architecture – HeroX V3
Information Architecture – HeroX – Oct. 4th 2017

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.

Herox-team

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.

1-better-together-infographic
IMG_2372

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.

IMG_2198
IMG_1716

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.

Gamification

Here is a close up of the leaderboard screens, and the concept of replacing the star with a trophy. This gamification experience would allow users to compete against who has the most potential award earnings. The more challenges you followed the more potential prize money you'd earn.

Here is a close up of the leaderboard screens, and the concept of replacing the star with a trophy. This gamification experience would allow users to compete against who has the most potential award earnings. The more challenges you followed the more potential prize money you'd earn.

IMG_1717

Final Leaderboard Design

Leaderboard-Top-5-V2-09-20-2016
IMG_1686

Innovator User Flow

Here is an overview of the user flow from a high level. I made sure to include growth hacking into the onboarding funnel right after the user signed in with a social network. 

Here is an overview of the user flow from a high level. I made sure to include growth hacking into the onboarding funnel right after the user signed in with a social network. 

ShiraX-User-FLow

Judging

Here I'm exploring the tab experience on a challenge detail page. 

Here I'm exploring the tab experience on a challenge detail page. 

IMG_1670
IMG_1671

Three Tier Information Architecture

Here I'm exploring the back and forth user experience combining two levels of information architecture in attempt to distill the complex user interface into a simple and easy to use enterprise level software.

Here I'm exploring the back and forth user experience combining two levels of information architecture in attempt to distill the complex user interface into a simple and easy to use enterprise level software.

Legacy Information Architecture

Judging-Activities-Page

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.

Screen Shot 2018-12-12 at 3.18.17 PM
Go Fly SponsorAdminModerator Judge Task Flow
Results-heroX-multi-variate-test

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.

Mobile-Menu-IX-GIF
menu-ix-design

Design System

cards-v2

Brand Style Guide

HeroX-Style-Guide

Call to Action Everywhere

Eye-Direction-Example-V2
Screen Shot 2018-11-08 at 10.11.30 AM

Mobile-first Strategy

Screens-NASA
Screen Shot 2018-12-14 at 4.03.42 PM

Result

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

Selected Works

Machine Learning Society & COCrowdsourcing Data Science

The Design LabAcademic Design

C2GroupStart Up Design

ApliiqeCommerce