collection

dashboard process

product design
consulting & strategy
information architecture
ux discovery
ux research
ux writing

collection

case study

CLIENT

dashboard process

Heading

company profile

International Wellness Network is a fictitious company. I’ve recreated a dashboard application case study based on recent projects that I cannot yet share details of.

my roles

product design
consulting & strategy
information architecture
ux discovery
ux research
ux writing

tools & tech

figma
angular js
Bootstrap
css
adobe illustrator

getting started

Project overview.

What we know.

THE COMPANY

International Wellness Network is an application that connects wellness resources with people around the globe. The company includes a robust team of subject matter experts who have published and curated resources and team members who have established wellness focused groups in their local communities.

THE PROBLEM

There was a wealth of content but it wasn’t organized into a working product.

THE BIGGEST CHALLENGE

There was no centralized location to collect and organize information.



project brief

What did we need to do?

1

Audit

2

Establish communication across all teams

3

Identify all audiences

project brief

What did we need to do?

block layout > hi-fi

Multi-tier system that can go from block layouts all the way to fully polished UI

flexible

Layouts and components are based on relative values to allow for easy nesting and reusability

designer-friendly

Customizable, programmable UI system components including brand guides

developer-friendly

Semantic naming structure and responsive system facilitates easy dev hand-off

simplicity is key

This is a portion of the system that was used to build a system map and blocked layout of dashboard web application.

These are high-level categories that help define the hierarchy of the application and include areas for notes that explain the purpose of the element.

The scale and contrast of the grayscale elements are designed to help facilitate an understanding of the general layout distracting design elements.

DISCOVERY  > Kick-off

The discovery phase needs to show you what questions we need to ask.


Speaking with stakeholders is about people, not tech. Productive conversations require designers to empathize on a human level. Part is to build rapport and part is because organic conversations is how humans can best verbalize their needs and wants.

(original)

updated logo

difficult navigation

The menu structure required users to follow a path that was defined for them.

Store content and company content was intertwined, making it unclear where users were and where they were able to go.

DISCOVERY  > What we got

A clear voice.

checklist

accessible on mobile

Content broken down into clear and concise sections, each occupying approximately 1 screen-height

bold & fun, yet polished and sophisticate:

Bright colors, bold text, and large product shots

the location is just as important as the amenities:

Maps with landmarks, transit routes, and locations of everyday errands.

unclear hierarchy

With only one color and minimal text styling, there is no clear visual hierarchy.

initial version presented (rejected)

logo construction

rejected variations

research > audit & sort

Exhilarating? Overwhelming…?

horizontal orientation, light & dark

single color

company messaging given no focus

The company mission statement was buried well within the site. We loved the message and wanted to move it front and center to promote the brand.

property pages content flow

Brand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

mobile first approach

The site looking great on mobile was a must. I knew The WIHN wanted a bold design and what better way to achieve that with heavy font weights and splashes of color?

product data example

Pico's product catalog includes machines with comprehensive specs. The current layout wasn't optimally organized and was inconsistent across the catalog.

looks pretty zen to me

photoshop > filter > mosaic

warm, sunset colors juxtapose the cool hues

tints and shades of hues from the palette are used to build the grayscale palette.

PRODUCT DIRECTION > IDENTIFYING USERS

“But it’s for everyone.”

a typeface for each voice

ui cards and icon set design direction

typography and supporting UI ELEMENTS

Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

PRODUCT DIRECTION > Tracks

We used a pre-navigation bar that allows users to switch between Pico companies. As companies are added, additional tabs are added.

The main navigation is used for navigating through global contact which is defined as anything that isn't unique to a company page. This includes contact forms, theblog, FAQs, etc.

which property is for you?

Location and amenities can be a deciding factor. Most tenants don't have cars and need easy access to both local and regional transit.

PRODUCT DIRECTION > Feature Anatomy

posts breakdown

news

Pico-published news, upcoming events, promos, guides to other areas of blog or site

press

Defined as articles and references from non-Pico companies

blog

Content published by Pico

past tenant review

Knowing what others say about the neighborhood is a great way to get a feel for the areas you're considering.

WIREFRAMING > App flow framework

WIREFRAMING > Full track views

WIREFRAMING > Screen Anatomy

WIREFRAMING > Block Kit

WIREFRAMING > (spreadsheet)

next project