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.
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?"
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.
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.
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.
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%.
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.
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.
Final Leaderboard Design
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.
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.
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
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.
Result
By consolidating calls to action together using encapsulation we were able to increase user acquisition for NASA by 1700%.
Selected Works
Artificial Intelligent Chat Bot For People 50-plusArtificial Intelligence Design Research | AARP
How to increase user engagement with UX writing.UX Writing CyberSecurity Legal Innovation |CYBERLUCENT
Crowdsourcing Data Science Designing SearchMachine Learning Society & CO
Increasing Engagement Amongst StakeholdersThe Design Lab at UCSD
Guerrilla Field Research For Anticipatory Design Increases DelightC2Group| SDG&E | Construction Management
eCommerce Innovation Through Crowdfunding and WholesaleApliiq, Inc. | American Apparel Inc.