SUPERIOR OPTIMIZATION

A multi-faceted  industrial energy systems optimization company

Superior needed a website that de-mystified a complex and diverse company, into one where clients and employees easily find what is valuable to them

TEAM

ROLE

Duration

Winter 2019

Jonathan Ezell 
Lukas Kelsey-Freidmann

Charles Moonen

Project Manager &

Lead Designer

DESIGN METHODS

Whiteboarding

Wire-framing

Prototyping

Redlining

Contextual Inquiry

Affinity Mapping

Usability Testing

Business Analysis

UI Comparative Analysis

PROBLEM 

OPPORTUNITY

Design an experience that allows a variety of different clients to find the information they need, and easily reach a point of contact with the company

In order to match a multi-faceted company with the right clients and talent, complex and technical information needed to be presented in a digestible, and easily navigable way 

FINAL PRODUCT

Throughout the site, a clear information hierarchy guides users to the areas that are most important to them. Understanding the services provided by the company was a top priority for our users - from the start page, they are prompted to engage with the services by multiple calls-to-action.

 Universal Iconography and UI organization creates uniform connectedness and allows the user to intuitively navigate to the information they need.

Throughout the site, global affordances were implemented that allow users to connect, start a conversation and engage with the company through their various online mediums.

MOBILE

TABLET

RESEARCH

Through implementing a participatory design strategyI Identified the business goals and target users. 

Additionally, I performed a contextual inquiry with several participants to identify the heuristic shortcomings of the previous site, a business analysis to determine the role of the website within their greater marketing schema, and a comparative UI analysis to inspire design decisions, and understand the scope of the re-design.

Participatory Design 

The stakeholders had priorities that consisted of:

- catering to audiences of all generations in all scenarios

- improving the "aesthetics" of the current site

- updating copy and to present and adjusted business model.

Additionally, I gained insight into typical clients, competitors, and prospective employees.

I periodically met with them on design decisions to ensure a clear reflection of brand identity was implemented

Contextual Inquiry

Quotations from research participants included:

"can I see this on a computer instead"  

"This looks like a grocery list"

"What are these photos for"

"This just seems old"

This method allowed me to see specific, non-visually appealing affordances that detracted from the information on the site

Comparative UI Analysis

I performed heuristic evaluations on more than a dozen companies with similar business models that provided inspiration for: 

-Information hierarchy strategies.

-Visual design affordances that alleviated ambiguity and prompted user engagement.

- Understanding the scope of the re-design to ensure the site was amoung the best of competitors.

Business Analysis

 The majority of online presence for Superior historically existed via Facebook and LinkedIn. Both pages have more engagement but lack the depth of information present on the company website site. Superior needed both aspects to present their whole picture on the web, and therefore needed connective tissue between the separate entities.

Design Hypothesis: In order to create a site that allows users to find the information they need and engage with the company in a meaningful and legitimizing way, we must implement a clear informational hierarchy, universally accessible online presence, and present complex information in a way that is both understandable visually compelling.

ITERATION

I drew several low fidelity sketches before moving to medium-fidelity, in order to flesh out what types of features I would end up using, and how the combination of features would fit together visually. Rapidly prototyping in this way allowed me to gain insight into what features might work together, and what features would need to be re-thought before more time was invested. In the low-fidelity wireframes, I began to flesh out the visual weight of affordances, information hierarchy, and navigation, before thinking about specific copy, colors, or animations.

My lead developer was not in my geographic area for this project,

developing objective and synchronous methods of communicating the design to ensure proper implementation was essential. 

I created a universal style guide and redlined all high fidelity wireframes to ensure the development retained as much of the original design as possible.

DEVELOPER HANDOFF

TAKEAWAYS

Design and development are two very different things, and turning a design into product costs time, money, and know-how. As a designer, understanding that relationship, as well as the expertise and limitations of your development team, is key in assessing timeline and costs. The final product had several diversions from the original design due to development know-how and timeline limitations. In order to create a beautifully designed product, all stakes and phases must be considered. 

  • Spotify
  • pngguru.com

©2020 by Jonathan Andrew Ezell.