Silvergate UI Design

Specifically showcase my design thinking and iteration process on user interface design.

Mockup image
Design System

Besides redesigning the interface, I also built a design system to make sure the consistency and keep the efficiency while transforming to engineerers.

Mockup image
Design Thinking

How I made decisions between components, positions, and texts to make sure the design fits perfectly with common situations and also follows the guideline.

Mockup image
Case Study ↗

Check out my UX reserach process before designing.

Design system display image

Design System

Besides redesigning the interface, I also built a design system to make sure the consistency and keep the efficiency while transforming to engineerers.

Colors

Color image

Typography

Typography image

Components

Tab bar
Tab bar image
Info card
Info card image
Buttons
Button imageButton imageButton image
Stepper
Stepper image

design
thinking

How I made decisions between components, positions, and texts to make sure the design fits perfectly with common situations and also follows the guideline.

Sign up

#CTA

#secondary button
#header
Gather similar CTA together

Moved the position of the secondary button "Build later" from the top right to the bottom (also below the main CTA). This can make sure users know where to touch each time they want to move to the next step.

Simplify texts in the CTA

Reduce users' visual burden.

Adjust font-weight and gray color

Follow the primary and secondary relations.

Sign in image
Arrow image
Sign in image

Choosing Elders' Body Situation

#checkbox
#card
#ios UI kit
#segmented picker
Use the ios segmented picker

Use the original ios component to easily switch between different options. Also, gather the whole content into the viewport without scrolling.

Change the type of options

Users aren't sure if cards are choosable, so I decided to change the type.

From Card → Radio button → Checkbox

The checkbox represents multiple-choice without literal explanations. Preserve illustrations while changing the type of options.

Iteration image
Choosing body situation image
Arrow image
Choosing body situation image
Arrow image
Choosing body situation image

Customize Ordering

#tag
#color
#ios UI kit
#segmented picker
The usage of ios segmented picker

Use the original ios component to easily switch between different options.

The color and type of tags

Change the design to fit its unclickable attributes.

pink, filled tag → text only (function: provide information)

Iteration image
Customize ordering
Arrow image
Customize ordering

See more projects

UX design

Silvergate App Re-design

With a team of 7 UI/UX designers, our final goal was to re-design and create a better user experience for Silvergate's App.

Project cover image