Hunchera - Business Inelligence.

A Business Intelligence website that allows users such as Investors, Entrepreneurs, and Journalist to analyze data based on search or trend criteria.

Timeframe: Two and a half weeks | Deliverables: Competitive comparative analysis, site map, wireframes, style guide, branding, high fidelity comps, | Software: Sketch, Omnigraffle, InVision | Methods: Low-high fidelity sketches, low-high wireframes

Role: Information Architect and Visual Designer 

Team Members: Researcher - Elizabeth Hansan, Interaction Designer - Elmira Cheraghi

The Project As a team of three, we were given the challenge to create The Hunchera website. We met with our client to discuss the scope of work and the need was to create a search and trend architecture flow that would provide searchable data on businesses using Artificial Intelligence. My role on the team was the Information Architect and Visual Designer whereas Elizabeth Hansan was our Researcher and Project Manager and Elmira Cheraghi was our Interaction Designer.  

We supported each other along the way to make sure that we were all on track and immersed in each other's work to create a cohesive product.  For instance, we all took part in the research as far as helping out with interviews, usability tests, and comparative competitive analysis.  We partook in a “Design Studio” to figure out a scenario that we would not have been exposed to unless we did a collaborative workshop.  

Most importantly we involved our client every step of the way so that all stakeholders would have ownership of the product created.

“I need a way to get specific, decision supportive information that is believable, credible, and understandable.” - Persona created by Elizabeth Hansan

“I need a way to get specific, decision supportive information that is believable, credible, and understandable.” - Persona created by Elizabeth Hansan

Meet Rick McKowski

Rick is considering starting a new business and is wanting to find the best resource for research. He wants accurate information in a short period that will not cost much money.

Rick’s Missed Opportunity: Rick needs a way to find credible, verified information quickly, and intelligible information on businesses and industry trends for him to make necessary informed business decisions because he does not want to waste time and money while researching.

Rick’s Opportunity Rick would like to find a product that has a search engine that easily allows him to find and understand the search results so that when he leaves the Hunchera site, he feels confident in the quality of the information and trends.

The Process:

•User research - Competitive comparative analysis

•Information Architecture - Sitemap, navigation

•Visual Design - Style guide, branding, high fidelity comps

 

Research

Competitive Comparative Analysis

Key Takeaway - finding Craft and Cruchbase to be leading competitors while inundating users with information the goal was to minimize Huncheras navigation

I compared five websites for the proposed Hunchera website and cataloged various features of the websites. 

Through the analysis, we found that Craft and Crunchbase to be the most robust competitors due to their AI technology and what Hunchera would offer.  Although the companies are strong competitors the information provided on the websites is overwhelming with copy, iconography, and imagery.  The team knew that cognitive overload would occur if we allowed for the same architecture as well as the visual design.  

During our initial client meeting, she expressed that she wanted a layout to be minimal as not to overwhelm users.  We could not have agreed with her more! We received insights from in the following bulleted summary.

• Minimal design

• Natural Language Processing

• Machine Learning

• Business Intelligence

Once we established our findings, we were able to create a site map using a closed card sort.  We found terms from our competitors and wanted to use similar terminology as not to confuse users from products in the market-space.

Competitors

Competitors

 

Information Architecture

Closed Card Sort

Key Takeaway - as business intelligence platforms have specific rhetoric the goal was not to stray far from the verbiage but minimize choice and allow AI to aggregate response

Once we established our findings, we were able to create a site map using a closed card sort.  We found terms from our competitors and wanted to use similar terminology as not to confuse users from products in the market-space.

use this one 3.jpg
use this one 2.jpg
use this one 1.jpg
 

Site Map

Key Takeaway - truncating primary navigation allowed users analyze information with ease at first glance

From the findings in the card sort, I was able to create primary navigation of four terms keeping in mind our client's minimalistic need. The navigation allows users to browse the website with ease while analyzing complicated information. Compared to Crunchbase and Craft the primary navigation is straight forward and does not over stimulate the user's ability to maneuver through the navigation schema.

 
P4 sitemap.jpg
 
Color A B Testing

Color A B Testing

Visual Design

A/B Testing

Key Takeaway - listening to the clients needs and users feedback allowed for purposeful visual design.

To create the visual design we started with color, while the research and interaction design was being conducted and produced. 

The choice was number one

The choice was number one

I offered participants four color schemes to choose from via A/B testing.  Furthermore, I researched color theory and was informed by words that our client expressed in our initial meeting.

I informed myself before testing by researching color theory.  Through research, I discovered what colors paired well together and what colors convey.  Here participates ruled out options two and four and our client chose one and three.  Our team had to make a decision, and we chose option one.  Amongst to us, our client responded later to option number one. We all went home happy!  

As the choice of color was solidified, I moved on and started to create a style guide which would set the tone for the layout of the website. I conducted tests upon our first style guide and received feedback that it was unintentional, cluttered and not cohesive. I revisited the style guide and wanted to capture the essence of the website in the document as not to stray far from our goal minimalism.

 
Intial Style Guide

Intial Style Guide

After further testing, I came to the final result. The predominant color is navy blue to refer to the knowledgable business person as well as keeping the Hunchera logo in the foreground pronounced. I established that orange would be the call to action color and light blue would be our secondary color usage.  The copy varies between navy blue, light blue, and white.  We produced active and inactive state buttons, iconography, UI elements as well as form elements to inform the visual design.

Final Style Guide

Final Style Guide

 

Usability Testing

Key Takeaway - finding pain points via visual design and changing the outcome for a more intuitive experience

Once the visual design was embedded into the interaction design, we continued to run more usability tests and found two problems were users could not find the information or they were overstimulated by the content in view.  

Here users found in the Trend aggregated search filter on the left not pronounced enough to allow them to get a sense of what to do whereas the aggregated filter on the right users could discern what actions to take. Users felt the fields were more succinct to conventions used, and they also appreciated the design element of repetition where the primary navigation is repeated in the aggregated search bar.

The intial design prior to usability tests

The intial design prior to usability tests

 
Produced by Elmira Cheraghi

Produced by Elmira Cheraghi

The revamped design after the usability tests

The revamped design after the usability tests

 
Trend Results on carosal.jpg

Above before finalizing the design, the wireframe on the left had too much visual and contextual information that it could overwhelm users cognitive ability to understand the information provided. I decided to limit the information to six elements were logos, and the companies name could be understood.

 
Huncher web.jpg
 

Reflection

I learned that when working with a client, you must listen to their visual needs and the user's feedback. In tandem, the decisions that you make are guided by research that leads the design to a viable product. With the rich information procured from the design process, the composition tells a story.

I am proud of our team for creating a purposeful website application that our client was pleased with and offered her new opportunities to view her work. Through user feedback, we were able also to suggest features that prospective users would find to be useful.

Next Steps

  • Establish the Compare flow, and finalize the design with additional user testing

  • Create a mobile experience

  • Buildout the rest of the site

  • Create a customized transformation of visuals to meet styling needs for the user