A UI design project for Omi Medical website, which supports customers who are interested in the company's products and services.
Omi Medical creates new technologies and products in the medical and healthcare fields, earns trust from all over the world and promises to bring a bright, prosperous and brilliant future to the world.
Conduct user interview
Identify user pain points
Create empathy map
Create personas
Craft user stories
Build user journey maps
Create problem statements
Outline User flows,
Information Architecture
Create storyboards
Create wireframe
Build UI style guide
Create mockup
Create lo-fi & hi-fi Prototype
Conduct a usability study
An emphathy map is an easily understood chart that explains everything designers have learned about a type of user. An empathy map consists of four shapes, which show what the user says, does, thinks, and feels. The word user goes in the middle.
Persona are fictional users whose goals and characteristics repersent the needs of a larger group of users. Personas can help us identify patterns of behavior in users. These patterns might point to a common pain point that a group of users experiences.
A journey map is just what it souds like, an illustration of what the user goes through to achieve their goals. A user journey is the series of experiences a user has as they achieve a specific goal. User journey built off the personas and stories that have been already created.
User flow is a type of diagram used in UX design, It represents the workflow or process form users perspective. In the basic form, User Flow represents the task in form of picture with blocks connected by arrows. Diagram does not have to belinear, just like taks in the application. It may have alternative paths, loops, etc.
A sitemap lists all the (labelled) pages in entirety and shows hierarchy, structure and often page goals and content/functionality that happens to be on that particular page
Information Architecture (IA) is a process that forcuses on the structure and organazation of content within a digital product.
The goal of information architecture is to organize content in a way that makes it easy for users to learn, adapt to, and navigate a product quickly and with mininal difficulty
A wireframe is a two-dimensional illustration of a page's interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics.
First, I sketch the low-wireframes on papers and then, I transition from paper to digital wireframes.
After I've explored multiple ideas for wireframes on paper, and i understand which wireframe elements will provide the best user experience, it's time to bring my paper wireframe to life digitally. While drawing wireframes on paper is fast and inexpensive, things get a little trickier when i move to digital wireframes.
Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.
A design system is a collection of reusable UI components. In it, I defined UI elements such as buttons as well as text elements and other elements that I'm sure will be reused throughout the design file. This makes the design workflow very easy.
For my design system I use a methodology that called Atomic Design to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.
To ensure the consistency between design and coding, I have to build a basic guideline for the dev team,
providing all necessary specs for UI coding.
Based on the digital wireframe high fidelity mockup for the most important screens has been designed. All screens have been connected into high fidelity prototype
Responsive web design, also called RWD design, describes a modern web design approach that allows websites and pages to render (or display) on all devices and screen sizes by automatically adapting to the screen, whether it’s a desktop, laptop, tablet, smartphone, or even a smart TV!
A prototype is “A simulation or sample version of a final product, which UX teams use for testing before launch.” The goal of a prototype is to test and validate ideas before sharing them with stakeholders and eventually passing the final designs to engineering teams for the development process.
Thank you for your time reviewing my work! If you’d like to
see more or get in touch, my contact information is provided below.
