Social Hub

All of your digital marketing needs in one place.

At a Glance

My Role: Lead Designer
Date: Sept 2017
Client: Ordereze
Team Members Referenced:

  • My project assistant
  • The company's CEO/Founder/Partner/President
  • The company's CTO/Founder/Partner
  • The company's international development team

Highlights:

SKETCHING

EMPATHY MAPPING

CONTENT INVENTORY

WIREFRAMING

INFORMATION ARCHITECTURE

STYLE GUIDE

social hub ipad.png

The Challenge

With a massive in-progress partnership weeks away from completion, Ordereze was feverishly aware of an impending once-in-a-lifetime upsurge in sales leads. With essentially one chance to secure this influx of clientele as customers, the company knew their products would need to be in pristine shape.

Weeks after overhauling their online ordering platform and months after tabling my earlier suggestions to do so, Ordereze decided to tear apart their coveted Social Hub Dashboard to reflect a more savvy, contemporary brand. 

Some sizable challenges loomed in the distance for my project assistant and I: 

  • Limited time - with the wave of leads only a month or so away, time was definitely a scarce resource. The President demanded the entire project be complete in under two weeks.  
  • Not much of a redesign - with a drastic difference in direction taking place, the only aspect of the old program we'd be able to take with us would be the general content portrayed by the dashboard.
    Every bit of UI & UX would need to be crafted from scratch.  

The Solution

Research

I developed a strong sense of contextual empathy to understand how this product's purpose of use would affect the users' potential interaction.

At the same time, the application of information prioritization would be absolutely vital. 

Construct

To really invoke ease-of-use, we decided on an environment rich with drag & drop widgets. 

With the embedding of an expand-and-collapse capability, information prioritization would be tested further. 

Design

I wielded color as a means of instilling intuition by guiding users to key elements.

I was able to supplement this guidance using functional interaction design.

The Results

Presentation & Development

The final designs were met with incredible reception - everyone involved with the project loved what they saw. Once the final files made it to the CTO, his meetings with the international development team were immediately underway. 

As we speak, the Social Hub dashboard redesign is currently being developed.
Estimated time to completion: Monday, October 2nd, 2017

Personal Takeaway

The critical reception for this project was incredible. From the CTO repeatedly describing it as "absolutely beautiful" to everyone involved, the development team expressing their excitement via Skype, and other employees reaching out to me, this experience was definitely memorable. 

I was particularly proud of this project in that I've always wanted to design a dashboard - something about a digital cockpit seems challenging and yet exciting. I personally love utilizing resources with dashboard interfaces. 

Company Results

The project is under development so updates will be coming soon.

Full Case Study: The Process

1. Research

The User

Empathy Mapping

The Product

Content Inventory

Define

Content Prioritization

Info Architecture

2. Construct

Ideate

Sketching

Wireframing

Validate

None

Budgetary Restraints

3. Design

Stylize

Color Palette

Typography

Finalize

Hi-Fi Prototypes

RESEARCH:
THE USER

Empathy Mapping

Purpose:

The first step I took for the Social Hub redesign was developing contextual empathy for the users at hand. 

I was able to utilize the User Persona data already generated during the Online Ordering Pro project to create and empathy map - this would allow me to get inside the mind of the restaurateurs as they enter the digital environment at hand.

Insights:

Despite greatly understanding our prototypical user, this practice helped to uncover specific user motives previously not considered (e.g. peer influence from other restaurant owners).

RESEARCH:
THE PRODUCT

Content Inventory

Purpose:

In most cases, understanding the product is just as vital as understanding the user.

To better understand the potential value this product would bring to its users, I conducted a Content Inventory of the company's current version.

Insight:

After aggregating every piece of content delivered by the current dashboard, I analyzed each piece's underlying purpose, as well as its relation to Ordereze's intricate catalog of products.  

This data allowed me to generate a list of all widgets the dashboard would need to feature, as well as all content each widget would need to provide. 

Ordereze's original dashboard

RESEARCH:
DEFINE

Content Prioritization

Purpose:

Although the Content Inventory allowed me to figure out which widgets the dashboard would require, as well as what content each widget would need to deliver, the content would need to be organized further. 

I decided to organize each widget's featured content based on prioritizing. This would allow me to better get a grip on each widget's Information Architecture. 

Insight:

With a concrete breakdown of each widget's content prioritization, I was ready to properly undergo information architecture.

Information Architecture

Purpose:

I knew that by developing each widget's information architecture, I could get a fundamental idea as to how content would be physically structured.

As usual, IA provided a great foundation for UI construction. 

Widget IA

  • The previously organized content will be displayed in a natural order of significance with a view-more-type call-to-action sitting along the bottom.


Dashboard IA

  • As requested, the CTO's sidebar sits along the right hand side - the closest bezel layer (on the Z-axis). 
  • The widget area will house the widgets. Here users can collapse & expand, drag & drop, click & interact, etc.
  • Essential information not pertaining to widget content will run along the top for simplicity purposes 

Construct

CONSTRUCT:
IDEATE

Sketching

I took to my notebook to sketch various UI concepts for various widgets, as well as the dashboard, as a whole. 

I found this process very fluid with the IA already decided. 
The toolbar-aspect of the dashboard UI was actually already decided by the CTO, so the dashboard as a whole came relatively easy. 

Widget Sketches

  • I determined the Vital section to be comprised of a statistic on the left and a supplemental visual on the right. The vital statistic would need to be the most iconic stat reflecting that widget's purpose (e.g. revenue/order activity for Online Ordering Pro)
  • Important statistics would sit side-by-side across a status-bar like section right below the vital information. This would be the last item before-the-fold for the collapsed version of the widgets. These figures would decrease in significance from left to right.
  • More in-depth visual information would be revealed upon expanding along with a newsfeed environment of recent activity.


Dashboard IA

  • I decided to house the profile at the top-left. Here users would have access to a drop-down of account settings, as well as link to their homepage. 
  • Notifications regarding their accounts, other Ordereze products, tickets they've submitted with the company will be to the top-right. Upon clicking these icons, drop-downs with associated information will appear, while simultaneously dimming the widget environment that sits behind it. 

Wireframing

After completing the sketches I knew what each widget would look like. Now, I just needed a higher fidelity version to show both the President and CTO. 
With my personal laptop on-hand, I launched Sketch and got to work. 

Elements

  • Large graph - more complex data than Quick Graph
  • Feed - news feed showcasing recent activity
  • Button - Linked to fullpage analytics (these are housed in an older program, yet to be overhauled)
  • Other - Previously explained in IA section

Spacing:

  • Yellow - 14px
  • Pink - 18px
  • Green - 32px
  • Blue - 64px


Widget UI:

Expanded

Expanded (with spacing shown)

Collapsed

Collapsed (with spacing shown)

Dashboard UI:

Without spacing

With spacing

DESIGN:
STYLIZE

Color Palette

Based on time restraints, the President and CTO both decided to let the development team choose coloring on the fly. 

To help them out, I was able to take various color schemes into consideration to make their lives a bit easier - they wound up loving my selections.

Typography

Typography was simple - to satisfy both readability and thematic purposes, a standard sans-serif font was chosen. 

I brought up the idea of allowing the dashboard to pull typefaces from each restaurant's website for widget titles, which the team loved. Hopefully, widgets adapting to HTML h-tags will be introduced in an early product update.

Social Hub colors.png

DESIGN:
FINALIZE

Hi-Fi Mockup

Take a look at the final creation! For information regarding final presentations, results, and more just head to the Results section

Let's Talk

Contact

15 All Points Dr., Holbrook, NY 11741
+1 (631) 338-5549
AlexBennettUX@gmail.com
AlexThomasBennett26@gmail.com
Linkedin.com/in/AlexBennettUX

Copyright © 2017 Alex Bennett UX

SIMBLAWebsite Builder