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.

What if I don’t 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, I sit down with the product team and hash out an initial 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 and framework 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 my designs so that I can share them with all members of the product team and stakeholders.

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, it is time to create a working prototype. I leverage Invision to demo prototypes with real users to get feedback before actual development takes place.

I also like to demo a prototype with an individual user, as this allows me to better understand the thought process behind their offered opinions. You can also gauge their un-voiced reaction through their body language.

  • 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. Optimal Workshop is a favorite of the Kent State User Experience program, so I have significant experience issuing Treejack and Chalkmark tests.


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.