Gene Steratore
cropped-ui-wall1.png

UX Design Process

 
IMG_0684.JPG

UX Design Process

By Gene Steratore

 
 

Persona Example (MS UXD Project)

Discovery & Framing (D+F)

Any successful project must be built upon a strong foundation, grounded in relevant research and discovery. Having a solid evidentiary base ensures that personas are accurate and that user needs are effectively identified.

  • Stakeholder Interviews

    • What better way to start a project than to talk to stakeholders about their needs? Stakeholder interviews provide invaluable data and background on what the end-users wish to accomplish.

  • Persona Building

    • Once stakeholder interviews have concluded, detailed personas can be created. As the project progresses and testing occurs, frequent revisits to personas will help keep the product vision in focus.

  • Problem Identification

    • Identifying and prioritizing problems is critical to ensure that you are on the right path. This can be done in tandem with stakeholders and other product team members.

  • Competitive Analysis (If Applicable)

    • If there are direct competitors or solutions that address similar needs, it is always a good idea to embrace what they do well and implement similar features. It is equally important to engage what competitors struggle with, as these struggles could be indirectly applicable to the proposed solution or directly applicable to the existing user base.


Initial Design

Once initial D+F has been completed (discovery is never over), the next step is to start crafting an initial design.

If your company does not have a Design System

Use a framework. Material Design and Bootstrap come to mind. These design frameworks have solid rationale for their design decisions and each component is carefully crafted to be accessible for all users.

Tip

If drawing is not your strong suit (it is not mine), stick to a whiteboard for basic outlines and utilize programs like Sketch and Axure for detailed digital representations.

  • Process Flows

    • Before I begin wire-framing, first I sit down with the product team and hash out a process flow. This is a great way to identify gaps in an existing system that you are replacing or to discover areas of opportunity when creating new applications.

  • Wire-framing

    • Wire-framing is a large part of the initial design phase. I lean heavily on Sketch to create wire-frames, as it’s Design System friendly (Material Theme Editor is my favorite). Initial wire-frame aspects contain general elements such as potential page layouts (article, table, splash) and can also include specific elements if the proposed solution calls for something more specialized. I personally use Zeplin to export the designs so that I can share them with developers.

  High-Fidelity Wireframe (Dick's Sporting Goods - 2018)

High-Fidelity Wireframe (Dick's Sporting Goods - 2018)


Invision Prototype (Dick's Sporting Goods - 2018)

Prototyping

Once the wire-frames have been approved by user testing/product management, comes the creation of a prototype. I have used Invision to demo prototypes with real users to get feedback before actual development takes place.

Meeting with users individually is an excellent way to understand the thought process behind their offered opinions.

  • Dummy Data

    • Before actual data implementation or manual creation, its smart to use dummy data to reflect where elements would appear on screen. This is an effective way to avoid having to completely re-create something if it is not received well by stakeholders.


Vendor Direct Dashboard (Dick's Sporting Goods - 2017)

Testing

When prototyping concludes, its time to test a workable design to your target audience.

For Limited, Specific Audiences

The testing process is handled differently than if the product was public-facing. I have had the luxury in the past of meeting one on one with director-level, manager-level and analyst-level positions in which specific feedback and suggestions are provided.

Public-Facing Audiences

For public-facing tests on prototypes, tools such as UserTesting.com, Optimal Workshop and others are excellent ways to garner valuable input. I have issued usability tests built with UserTesting.com to audiences that met specific conditions that I detailed in a screener. These tests were geared towards testing specific elements within the taxonomy of Dick's Sporting Goods website.


feedback.jpg

Enhancements

Lastly, no project is ever really "complete". UX enhancements to whatever product is created last for the entire life cycle of the product. It is always important to build upon the solid foundation and boost usability as technology and user base evolve.