HueGroup
Arrow - Regular Created with Sketch.

HueGroup specializes in understanding color. Color choices can seem subjective, but HueGroup uses big data to analyze how industries successfully use color in products and branding. Realizing how difficult it is to make the right color decisions without this knowledge, HueGroup wanted to create a set of tools that would help anybody make smarter color choices for their market.

CLIENT HUEGROUP    ROLE UX, VISUAL DESIGN, IDENTITY

TOOLS PEN & PAPER, OMNIGRAFFLE, ILLUSTRATOR, PHOTOSHOP, INVISION, FLASH, HTML, CSS, JQUERY

animation2animation2

THE GOAL

The idea was to create a site that introduced HueGroup and allowed users to sign up for their products. This site would then direct people to the appropriate vertical(s) for their interests. All the sites will have the same branding and style of modules, although the content varies depending on the industry.

 

PROTOTYPE FOR HUEFASHION

THE CHALLENGES

1

SEARCH

The search for these sites is complex and varies for each vertical. It starts broad, then allows users to filter the results. However the set search criteria (that will expand as the database grows) is large, but not infinite (so a direct input search field would not work). A way to view the available search fields and criteria was necessary. This was the most challenging part of this project and required sketching and comping out many ideas. While it was simple to get down different navigation ideas, it was tricker to judge the advantages and disadvanges of each.

2

EXTRACTING CONTENT

It became clear when doing user personnas that content may need to be captured so users could put it in a presentation, copy exact color values, add images to a moodboard, etc. After discussing with dev, it seemed the best solution was to allow users to download a jpeg of a screen. For the ui, this meant being careful not to hide too much content in rollover states or popup modules, since that data would be difficult to capture in one screen. This had to be balanced with showing mutiple modules so users could compare data. These restrictions lead to the main dashboard view leading to a detailed view of each chart.

3

VARING RESULTS

For each market, the data sets are different. Even within a module in one vertical, color palattes can start out with dozens of colors and as the search criteria is refined, can end up with on two to three color. This required both the infographics and the dashboard to be flexible and clearly show varing amounts of data.

wallpaper-newwallpaper-new

OVERVIEW

Following are examples for HueFashion, though all the verticals have this structure. There is a login, home page, search, refine search and a detailed view of the module.

overviewnewoverviewnew

GETTING STARTED

Example for HueFashion. Once logged, the user's homepage shows an image link for the most popular searches, which fades into color on hover. On the right are quick links to the user's recent searches and tips on using the site.

homePagehomePage

MAIN SEARCH

The search starts with a dropdown to select the main options (for fashion, it is category, color, designer, location, season and year). Next step is to define the search term from a dropdown that is specified to work with the criteria selected. Below are some examples.

MainSearchMainSearch

BROAD SEARCH RESULTS

The search brings up a page like below. Depending on the inital option choosen, the page varies slightly. For example, a designer page is different than a category page. Selecting the "Refine Your Search" button on the left provides options to narrow the data included.

searchPagesearchPage

REFINING THE RESULTS

When the refine button in pressed, the page animates down to offer addition selections to filter the scope of data shown. As one choice is made, there are less options in the other catergories, so they update to show as striked out.

RefinedMenu2RefinedMenu2

DETAILED VIEWS

To the right of module title is a link to a detailed view of the module. This provides users with exact percentages and color values in an isolated layout. It can also be saved to their account and exported (the other pages can be as well).

detailsdetails

IMAGES COLLLECTIONS

To view more images, users can select the more button and the page animates up to show collections. When a collection is clicked, all the images from that category are show and can be clicked on to show as a full-size in overlay.

ImagesLayoutImagesLayout

STARTING UX

The UX process started with user personnas to think about how the color data would be used and shared in different industries. Followed with lots of sketching, site plan, user journey, wireframes and prototyping. The graphs and search took a lot of iteration and incorporating of feedback.

UXlayoutUXlayout
searchDesignssearchDesigns

BRANDING

LOGO

HueGroup has a main logo using Gotham bold and Gotham Light with a drawn "H" as the mark. The verticals each have the same typeface and spacious kerning, but each H is a unique color pulled from the main 38 color palette HueGroup uses.

TYPOGRAPHY

Since color was limited to black and white, multiple typefaces where used for variation and hierachy. Gotham (ugh...i know overused but worked well here) has a great collection of condensed faces, which was necessary for labeling the charts and handling long color names. Oswald was used for numbers only and Open sans for the body copy.

ICONOGRAPHY

Created simple icons for both marketing and the product.