Logo
Swash hero banner
My Role

UX - Interaction Design, Visual Design, User Flows, Rapid Prototyping

Deliverables
  • Design System
  • User Flows
  • High Fidelity Designs
Team
  • Product Managers
  • Developers (Web and Mobile)
  • Clinical Advisors
Year

2023

Project Introduction

Swash design process
1

Understanding Requirement

Gather requirements from stakeholders to understand the objectives, user needs, and desired features of the dashboard.

2

Wireframing

A wireframe is a low-fidelity visual blueprint of a product's layout and structure. It shows content placement, navigation, and user flow without visual styling. Wireframes help teams validate ideas early and align before detailed design.

3

Visual Design

Visual design focuses on the look and feel of the interface, including colors, typography, icons, and spacing. It enhances usability and brand identity while making the product visually engaging.

4

Prototyping

Prototyping is the process of creating interactive models to simulate user interactions and flows. It helps test ideas early, gather feedback, and refine the user experience before development.

Swash banner

Clarity and Efficiency Flow

Swash flow 1
Swash flow 2

Precision Design with Grid

Swash grid system

Visual Design & Wireframing

BrandingGuide

Brand Priority Keywords

Keywords or phrases used to describe the characteristics and personality attributes of a brand.

These are the words that the brand wants to be associated with its image and identity.

Branding guide 1Branding guide 2
Swash banner

Typography

AaHiragino Sans
MediumSemiboldBold

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Colors

Swash colors 1
Swash colors 2
Swash colors 3
Swash colors 4

Design System

Swash design system

UI Screens

Swash UI screen 1Swash UI screen 2Swash UI screen 3Swash UI screen 4
Let’sTalk