APPENDIX

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.

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.

HI-FI WireFrames

I Then created Hi-Fidentliy wireframes for each page for both mobile, and desktop, and created 2 clickable prototypes in order to make the development translation as seamless as possible.

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

  • Spotify
  • pngguru.com

©2020 by Jonathan Andrew Ezell.