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.
Home page Service Prompts
Automation
Process Operation
Home page Service Prompts
1/5
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 strategy, I 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.
