Overview
I developed visual identities, design systems, and style guides from scratch for my UX/UI projects, using data-driven research insights to guide my decisions. Design system excerpts are below for each project: Seapearl Properties, Aloha, and UC and Wellness.
MY ROLE
UX/UI Designer
DESIGNED FOR
UX/UI Immersive
PROJECT TYPE
Brand Development
DURATION
~1 month per project
My first step was to gather online inspiration for creating the brand—images, fonts, icons, and colors that are reminiscent of the sea. The look I decided upon was airy, inviting, and elegant, which aligns with Seapearl Properties’ listings and clientele.
Mood Board
Color Palette
Typography
Map Buttons
Primary Buttons (filled)
Secondary Buttons (outlined)
Tertiary Buttons
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Default
Default
Default
Hover
Pressed
Disabled
Hover
Hover
Pressed
Disabled
Pressed
$000,000
Default
Hover
Pressed
$950,000
$950,000
Variants
UI Elements
Dark Blue (default) / Hex #00426F
White / Hex #FFFFFF
Logo Creation
Padding / Maintain at least 44px of padding
Iconography
SEAPEARL PROPERTIES
For the Seapearl Properties website, I created a scalable design system, including logo development and UI specifications. Excerpts from that process and the brand guidelines are below.
#DFF2FF
#F5FBFF
#DFF2FF
#00426F
#086EB2
#0097FC
Grid for Icon Creation
UI Design Grids
Input Fields
Variants
Brand Application
Initial Color Palette
Color values and usage would need further review to ensure ADA compliance.
Logo and Typography
#00BEBE
#02A7A7
#DCF8F8
#FDCA00
#FFF4CC
#3DC836
#309D2B
#32AE2B
#FF547B
#402C2C
Brand Application
Game Icons
Lei Levels
Coconut Clues
Pineapple Pass
ALOHA APP
The color scheme of this Hawaiian Language learning app is fun, vibrant, and colorful, representing the lush, diverse beauty of the Hawaiian Islands. These were my initial brand concepts.
UC AND WELLNESS
UC and Wellness is a platform focused on improving the wellbeing of those living with ulcerative colitis. To add a touch of warmth and humor to a serious subject, Coco the Colon Cat was introduced—an animated mascot created to connect with users in a compassionate and approachable way.
Design Language System
Mission Statement
Logo
Typography
Colors
Grids
UI Components
Interactions
Animations
Tagline and Voice
Mascot
An excerpt from the design language system is displayed below.
Typography
Iconography
Common UI Components
Organic Shapes
Rather than relying on photos, which can be challenging for depicting ulcerative colitis, the app uses organic forms symbolizing the colon’s structure—the tissue and tunneling of the colon.
#3712A0
#593DE6
#6B47F
#7F1EE5
#AD14BD
#F8F7F7
#FDCA00
#000000
#FFFFFF
Purple was selected as the primary color because it represents the disease of ulcerative colitis.
Color Palette
Brand Application
Aura, Holistic Day Spa and Residence
NEXT section: interior design