Jessica Ehleben Shields

UX Expert, Visual Designer, Web Developer, Leader

Jessica’s Design Process

My approach to UX leadership.

Think First. Design Second.

UX Design

Functionality and Flow

Product Needs

Define Success

UX defines what success means for a product and prioritize needs.

Business Needs
What are the business goals that need to be achieved? How are these goals demonstrated & measured?

User Needs
What do users want to accomplish? This goes beyond viewing data to determine what they will do with the data.

Interviews

User Interviews & Usability Testing

Interview users directly to understand how they use the product, what works, and what doesn’t work.

When access to users is unavailable this research can extend to customer service employees or sales reps who have direct knowledge from interaction with users.

Audit

google analytics screenshot

Review Analytics

Statistical data is analyzed to determine patterns and performance. Analytics can help surface and answer questions such as:

– How do users land on the site?
– Where do users leave the site?
– What is the sequence of interactions on the site?
– Which content is underperforming?
– Do users return unnecessarily to pages?
– Are there issues with behavioral flows?
– Are there underperforming goals?
– Do users succeed on the first attempt?
– Do users complete on time?

Visualize

User Persona: Jane Interviewer

Personas & Diagrams

Develop personas that create reliable representations of key audience segments to be used throughout the design process. The personas summarize and visualize the needs of users.

User flows clarify the scope and visualize the main user flows through the product. They hep identify areas where flow can beimproved.

Evaluate

Evaluate Interaction States

Evaluation will consider language, priority, visual clarity, and problems in three states:

The blank state sets the bar for the quality of the user experience. Does it answer user questions and expectations?

The working state where users work with the product. Is it obvious and forgiving? Are they able to act and react intuitively? Are the visuals consistent?

The error state is crucial for user retention. How does the product handle errors and notify users? Are notifications useful and clear, written in plain language? Do users know how to fix the error?

Recommend

Clarify Scope of UI Design

Summarize the research and make recommendations to improve the user experience.

Determine how to solve underling issues. These recommendations outline the scope of what the product design and UI design will address.

UI Design

Visual Communication

Wireframe

Invision Freehand Wireframe for jessicashields.com

Create Wireframes

Wireframes can be quickly developed to explore several design options and allow for collaborative design. This is the start to explore visual solutions that meet needs.

Feedback

Design Feedback and Revision

After wireframes are refined it is helpful to get feedback from internal and external stakeholders. Internal design discussions improve the solution and it is sometimes appropriate to have external discussions for early feedback before designs progress.

Prototype

Invision prototype single portfolio item

Create Prototype

Once the design direction is finalized through wireframes, the next phase is to create pixel perfect prototypes that visualize the design solution with great detail.

Feedback

Design Feedback and Revision

Internal feedback helps to refine and improve the design before it is presented to external stakeholders.

After internal review the design is reviewed with external stakeholders and may undergo usability testing. Feedback and concerns are collected.

Finalize Design

Revise and Finalize Prototype

In the final design phase all feedback is reviewed and concerns are addressed. When the design is finalized it can be moved to production.

Development

Coding and Validation

Development

Code Development Screenshot

Development

The product is coded to fully develop functionality that implements the design solution.

Design Verification

Design Verification

The visual design is verified for completeness and accuracy.

Validation

HTML Validation Report

Validation

All code (HTML, CSS, JS, etc) is validated to ensure it complies with current standards.

Functional Testing

Functional Testing

Function tests are performed to ensure that all aspects of the product work as designed.

Accessibility Testing

WAVE Accessibility Report

Accessibility Testing

Accessibility tools, such as WAVE, are used to ensure that the product meets current accessibility standards

Deployment

The final product is deployed and results are determined.
Additional sprints may begin.
Other iterations make take place as testing is conducted.