Breathalyzer Calibration Device - Touchscreen UI

Designed a touchscreen experience for calibrating alcohol breathalyzer devices

-g-Role Copy.png

Role

UX Strategist

-g-Process.png

Process

Foundational Knowledge

Concepts

Interaction Design

Visual Design

Tools.png

Tools

Whiteboard

Paper & Pencil

Sketch

Zeplin

GOAL

Design a simple UI with clear instructions for calibrating an alcohol breathalyzer device.

FOUNDATIONAL KNOWLEDGE

This is the first step to creating a compelling UI. It is essential to understand what the product offers, it’s roadmap, business drivers, competition, and users. Services provided for this project included: Heuristic Analysis, Stakeholder Interviews, User Research

 

HEURISTIC ANALYSIS

Evaluating the current product to asses its overall usability. The end result gives insight on areas that work well and those which need improvement.

Old UI

 

CONCEPTS

Based on a products needs and a defined set of experience priorities, concepts are developed around task flow, navigation, and screen layout. The concepts cover the primary use cases so that we can see how the system will behave at a macro level. Services provided for this project included: creating a Feature Mind Map and multiple rounds of Concept Wireframes

 

MIND MAP

 

CONCEPT WIREFRAME SAMPLES

INTERACTION DESIGN

This stage is where the concepts become reality. While adhering to technical restraints, ISO and industry-specific guidelines an experience is crafted which is both usable and complaint. All features and functionality will be documented in detailed wireframes that help ease the transition from product definition to development. Services provided for this project included: Detailed Design Wireframes

 

Detailed Design Wireframes

VISUAL DESIGN

During the visual design phase, artwork and graphics are applied to the interaction design. Clarity and meaning are brought to the user experience by carefully crafting visual themes, color schemes, typography, and icons. Services provided for this project included creating: Screen Renderings, Graphical Interface Elements, Icon Designs, and Style Guides.

 

VISUAL DESIGN SAMPLES

STYLE SHEET

 
Previous
Previous

Real Estate Software - Web Design

Next
Next

Interactive Lab Wizard - iPad App