Let’s face it, large quantities of data are not a very simple or easy thing to read and understand. It is key for DataHero to transform that experience into a simpler, more positive experience; one that wouldn’t require a user to constantly problem solve and stumble through various steps in the process.

This means consistently designing with the correct signals and conventions in our product that allows them to quickly understand and harness the full power of DataHero.

Successful design solutions are are tackled with a process that caters to your product and your team’s needs and resources. We’d like to share DataHero Process we have honed over time.

1 – Analyze the problem. Be inquisitive!

No matter the size of the problem, we always spend a bit of time analyzing it. It is easy to get caught up in the notion that one single sweeping solution will make everything alright, which usually translates to taking a problem at face value. I liken it to walking down the street and seeing a fire truck parked in front of a house and immediately jumping to conclusions. Our innate need of knowledge makes us react by putting together the facts at hand and string them together into a plausible story. Another person passes by and asks you what is going on and you answer rapidly that it’s a fire. After all, it is the truck’s main purpose to put out fires, so it is a valid assumption. It takes walking the perimeter, asking the people involved what happened and gathering evidence to properly construct the full picture of what may be the problem. For all you know, the fire you touted as the problem may have actually been a lady trapped with her fivee cats in her house due to a pile of newspaper jamming the front door. So no matter how straightforward the problem, always take some time to gather data around it and view it from as many angles as possible.

2 – Find the pain points. Be a detective and gather all of the evidence.

This leads us to the second part of problem analysis: Never expect it to be just one problem. In usability a problem tends to be the accumulation of multiple pain points. A user who can’t find something on your site isn’t missing it just because of the color of the item, it is probably also the combination of the location, the content surrounding the item and the visual hierarchy it has been assigned. So as you analyze, take note of all of the points that encumber the user from reaching his/her goal.

At DataHero, we follow these steps to gather all of the necessary information:

• Gather analytics on the problem that the users encounter.
• Speak with users in person and gather feedback. Looking through help tickets related to the problem is also a very useful course of action.
• Solicit critiques from your team – they are the foremost experts on our product and offer valuable insight.

3 – Locate key pain points and define the problem clearly.

One of the factors that all designers have to work with is a limited amount of time and resources allocated to each project. So to harness your resources to the fullest, always locate the most critical key pain points within the list. These should be relatively easy to find since they will probably have one or more of the following characteristics:

• Repetition – This pain point has been repeated as complaint / observation / request / issue by the user and or internally by the team.
• Major road blocks – This is a pain point that keeps a user from completing a task every time.
• Time vortexes – This is a pain point that takes valuable time from a user to achieve their goal
• Misalignment with company goals – This is a pain point that keeps a user from discovering a feature or a simpler way to work with your product.

Once the key pain points are gathered we can begin to map a path that will cause the largest domino effect in improvements with the simplest set of solutions.

4 – When you start designing, don’t only design for the best case scenario.

It is easy to get excited in the design process and start re-inventing a better solution that plays to all of your company’s and/or product’s strengths. It is unfortunately a very inefficient process for the time-strapped designer. A perfect solution rarely ever translates gracefully into a solution that applies to every scenario, outlier, and state. This is why  during the first iterative process we try to design 3 case scenarios is parallel. These usually are:

• Very empty first time user state
• User who has the worst possible combination of items
• Beautiful perfect view (a la dribbble).

If your worst case scenario works as well as your best case scenario then filling in everything in between becomes a lot easier and intuitive. Chances are, you had to resolve a lot of architectural, content and hierarchy problems when designing the less-than perfect views.

5 – Test internally, run it by peers, fine tune before you test externally.

Next, we run these designs by the team. Because they know the product best, they will be able to quickly identify any issues with various flows or outcomes. Teammates offer the first line of defense before you expose the product to the public, and  allow you to fine tune the design to eliminate any major snags. Once you incorporate their feedback you’re ready for the next step.

6 – UI testing 101, getting random people to help you.

This is the part where you, at least partially, unveil the design to the world. You get to test your design on virgin eyes, and get the most objective feedback possible. Ensure that you do some research beforehand so you can ask the right questions of your users to get to the core of the UI/UX problem and how you’re solving it. These in-person interview sessions will provide invaluable feedback on how not just this process is viewed, but potentially your product as a whole; which you can later incorporate into future designs.

7 – Iterate and set the right analytics in place. 

Now you’re ready to reiterate on your design with the feedback you received. You again return to the main problem you are trying to solve and create even more mock-ups and wireframes to address it in the best way possible. Sometimes this circuitous process can lead you back to your original design, or somewhere very far from your starting point. Even if it leads you back to your starting point though, you’re able to select that design/solution with confidence and have the data to support it. One of the most crucial steps of this process is to ensure you have the right analytics in place to track progress. If your new design actually shows a decrease in any behavior you’re trying to encourage, take this as an indicator that you need to go back to the drawing board.

Designing to solve a UI problem to create a better experience for the user is a circuitous and long process. It requires an open mind, some sherlockian detective skills, a lot of experimentation. It also requires humility to know when to pivot the design, polish or start from scratch. Use conventions and processes to inform your design as you get to understand what your users need from your product to create a memorable experience.

Roughly a year ago, I sat across from DataHero’s co-founders to present my initial ideas for the company’s brand and to get a better feel for their long-term vision. It was that meeting that triggered a realization: just as DataHero’s goals stretched beyond any other data product in the market, so must its brand. Simply choosing a few fonts, a logo and some colors would never do justice to the multifaceted and rich product that Chris and Jeff envisioned. The goal: to create an illustrative language that would capture and convey the essence of DataHero.

The first rendition was all about creating a singular superhero. Making it an almost stick figure reflected the product’s ease of use. For color and depth, we’d give a nod to the comic industry by using a play on the Ben-Day Dot.

We had a great response to our first hero, but ultimately he was too 2-dimensional and reflecting an art style not flexible enough for the range of media we needed to apply it to. As a line-art character on a white or light background he worked fine, but place him on any other texture or on a visually busy web page and he’d immediately get lost.

This led to a re-evaluation of our main character, which began with some research. Superheroes as icons reached their highest point during the silver age of comics in the 1950’s. For the next series of sketches and concepts, I focused on representing aspects of that time period into the design.

Although this was an improvement over our original hero, as I worked on these concepts and DataHero evolved, it quickly became apparent that there were limits to the use of only one titular character to represent the many aspects of our product.  DataHero’s goal is to make a hero out of every man and woman. How could one character represent everyone properly?

Expansion into this idea led to a series of sketches and studies of everyday people with a superhero twist. The art style would maintain that 50’s look by using offset blocks of color as a nod to the Ben-Dot printing system and expanded upon it by stylizing the dress and look of the characters to reflect the time period.

Unfortunately, the sketched art failed to reflect the simplicity and accessibility we wanted to convey (and that we had captured so effectively in the early concepts). My next move was to strip off the pencil art, leaving me with color blocks that silhouetted the illustration perfectly. Building upon that as minimally as possible, I added the details: eyes, glasses, lips, etc., using geometric shapes and capturing an almost cut paper feel to the art.

As we further delved into this illustration style, we started questioning using actual superhero figures at all. In our world, real heroes don’t wear capes or their underwear over their pants, they are average-looking people who accomplish amazing feats.  Representing the empowerment of everyday people meant shifting our concept to depicting ordinary men and women about to do extraordinary things with their data.

We started to focus on that split second before the Clark Kents of the world became something more.  The result is the heroes that represent DataHero today: regular men and women on the verge of doing the extraordinary.  They are depicted taking off their glasses moments before becoming their inner hero-self, looking over their shoulders before delivering great data, or grabbing an everyday tool as they head forward to simply get things done.

Spending more than six months iterating on a visual art style that would represent not only our brand, messaging and philosophy but also capture the essence of our users was an incredible experience.  If you want to see more of the final result, sign up for DataHero and take a look for yourself!

Sign up FREE and unleash your inner hero!