Violet Li

I design ways for people to find their bearings—and each other.

I'm a UX designer pursuing my MFA at SCAD, with a background in design marketing from Kingston University in London. That background shapes how I approach design: understanding what matters to people, then figuring out how an experience can support them.

Explore my work
Portrait of Violet in a black dress on a museum staircase, beside framed mosaic panels
hello from Violet

Selected work

Huddle cover: the Huddle logo and tagline
Project 01

Huddle

Helping college students take the first step toward social connection.

Discipline
UX Research & Design
Context
Academic Team Project
View case study
Ornata cover: the Ornata wordmark above three phones showing the home screen, the welcome screen and the Buyi pattern collection
Project 02

Ornata

Enriching museum visits through an app concept that lets visitors scan, learn about, and collect traditional patterns found on artifacts.

Discipline
App Design & Marketing Strategy
Context
Academic project
View case study
Kingston Campass cover: the compass logo and name with credits for Neil Cai, Cathy Zhou and Violet Li, beside phone screens for routes, a daily planner, AR directions and the home screen
Project 03

Kingston Campass

Helping students navigate unfamiliar campuses with clearer routes and directions.

Discipline
UX/UI Design
Context
Academic team project
View case study

Let's connect.

I'm open to opportunities in UX/UI design, UX research, and product design.

Email hiivioletli@gmail.com
LinkedIn ↗ Résumé PDF coming soon
Portrait of Violet in a black shirt, seated beneath a candle chandelier by a wrought-iron balustrade
see you soon
About me

A little closer.

Have a look around my desk. Pick something up and get to know me a little better.

Drag things around the desk, or click one to open it.

Say hello.

If you’d like to talk about design or a potential opportunity, I’d love to hear from you.

Email me ↗LinkedIn ↗Download résumé ↓
On my laptop

On my laptop

The tools I use to shape ideas, organize my projects, and bring designs to life.

Tools I work with

Select an app to see what I use it for.

On my Kindle

What I’m reading lately.

Most of my reading happens on my Kindle. I especially enjoy detective fiction and fanfiction.

Currently reading

Dark Matter

Blake Crouch

On my shelf

An author I keep coming back to.

Detective fiction

Murder on the Orient Express

By Agatha Christie

My Kindle holds what I’m reading now. This one stays on the shelf.

Travel journal

A few places I’ve kept with me.

Cities around the UK, places I’m discovering in the US, and the museums, galleries, and walks along the way.

Tate Modern

London · Museum visit · Oct 2022

A tower of old radios, lit in blue.

Click a page, or lift its corner, to turn it. The tabs jump to a place.Swipe, or tap a page corner, to turn it. The numbered tabs jump to a place.Page 1 of 13
Playground

What happens if…?

Stories I love, ideas I wish existed, and the work I make from them.

01 / Typography · Book design

The Bamboo Cutter and the Moon Child

An interpretation of The Tale of the Bamboo Cutter, following a girl found inside a bamboo stalk whose home lies beyond Earth.

02 / Typography · Poster design

The Night Route

Inspired by my love of Murder on the Orient Express, an imagined evening of mystery and role-play aboard a train departing London.

Hover to lean · Click to openTap a folder to open it

01 / Typography · Book design

The Bamboo Cutter and the Moon Child

Discovered inside a glowing bamboo stalk, Kaguya grows up on Earth before returning to the Moon. I shaped this Japanese folktale into a book in three chapters—belonging, pursuit, and departure—following the connections she forms and ultimately leaves behind.
02 / Typography · Poster design

The Night Route

What if you could step into a train mystery yourself? Inspired by Murder on the Orient Express, I imagined The Night Route: an immersive nighttime event where passengers take on characters and unravel a story together. The event identity draws on the London Underground map, connecting its lettering to the city where the journey begins.

The Night Route — a typographic poster series shown in an environmental mockup.

What should I try next?

Leave me a small idea—a visual experiment, an interaction, or something you’d like to see me make.

No promises, but I’m curious.

0 / 300

Click the image to zoom in on details.
← Back to work
Student Social App

Huddle

Built for the hesitant hello.

Huddle is a student-centered social platform designed to make meeting people feel less overwhelming. Through communities, events, chats, and shared experiences, Huddle helps students build meaningful connections at their own pace.

Explore the prototype
Huddle cover: the Huddle logo and tagline Built for the hesitant hello beside a phone home screen with the Huddle app icon
ContextSCAD · UXDG 701, Theory of UX · Spring 2026
Project typeAcademic team project
StatusInteractive prototype
My roleUX Designer · UI & Interaction Focus

My contributionI collaborated across all four phases of the project, from research and problem definition to design development and testing. While my assigned role focused on UI and interaction design, our team shared responsibilities throughout the process.

02Problem & research insights

Meeting people is easier than making the first move.

College students want more meaningful connections on campus, but three barriers keep getting in the way. Our goal was to make it easier to initiate and sustain social interactions.

01Starting is uncertain

Uncertainty and fear of rejection when starting a conversation.

02Circles are already set

Difficulty joining established social circles.

03Time runs out

Limited time to turn encounters into ongoing relationships.

Understanding how students connect—and where they hesitate.

We talked with and observed students from different majors, education levels, universities, and cultural backgrounds. The research explored how students initiate contact, where they feel they belong, their social and digital habits, and the support they look for.

6Observation sessions

Three fly-on-the-wall observations, two shadowing sessions, and one contextual inquiry.

25Survey responses

Social behaviour, belonging, support needs, and digital habits.

6Interviews

Students from different majors, levels, universities, and backgrounds.

3Diary study

A cultural-probe diary recording daily interactions, who started them, and how they felt.

Students needed a more comfortable starting point.

Starting feels risky

Uncertainty and low confidence can discourage students from initiating.

EvidenceInterviews and our Five Whys traced students not starting conversations back to fear of rejection and unclear social norms.

Common ground helps

Shared interests give students something to talk about.

EvidenceAcross methods, real connections tended to happen when students shared interests, backgrounds, or goals.

Contact does not guarantee connection

Passive exchanges and established groups can make deeper relationships difficult.

EvidenceObservations showed students watching more than engaging online, trading quick messages rather than conversations, while stable friend groups grew harder to enter.

03Design direction

Turning social barriers into design priorities.

Central questionHow might we make social interactions feel more approachable and less overwhelming for students?

Research findingDesign priorityProposed response
Students hesitate to initiateLower the effort of startingConversation prompts and clearer social context
Shared interests help people connectMake common ground visibleInterest-based Spaces and profiles
Students face uncertainty and competing schedulesHelp people plan with more contextEvent details, attendee previews, and coordination

These are design responses, not proven social outcomes. Prompts serve initiation and approachability: a low-pressure first line instead of a blank box. Spaces and profiles put common ground up front and welcome every kind of interest, which supports inclusivity. Event details, attendee previews and shared calendars give flexibility to students with little time.

Designing a path from discovery to conversation.

Proposed journey

  1. 01Discover a SpaceSpaces surfaces communities that match your interests.
  2. 02Explore an eventEvents shows what is on this week and what you saved.
  3. 03See who is attendingThe Audience row shows familiar faces before you commit.
  4. 04Start a conversationChats offers a prompt for the first message.
  5. 05Coordinate participationCheck a friend's calendar and send an invite.

Wireframes along that journey.

These low-fidelity wireframes define the core structure and user flow of the app. The decisions that carried into the final app: a fixed bottom navigation, one primary action per screen, and people shown next to every plan.

04Testing & improvements

Testing whether the next step felt clear.

We ran two rounds of in-person, moderated, scenario-based prototype testing with undergraduate and graduate students. We looked at navigation clarity, feature discovery, interaction flow, and how confident people felt.

  1. Discover a community.
  2. Join an event and plan how to participate.
  3. Ask for support.
  4. Create a group chat.
  5. Start a conversation.
  6. Discover people nearby.

What changed after testing.

01 · Finder

Give people more context before they reach out.

Before

Participants liked Finder, but they needed clearer privacy information and more profile context before contacting others.

What we changed

We added location-sharing explanations, profile previews, and more social context. On the map, nearby people now appear as larger profile photos, and every tab in the navigation is labelled.

Before
  1. 1Small pins with tiny profile photos.
  2. 2Only Finder is labelled in the navigation bar.
After
  1. 3Larger photo pins make people easier to recognise.
  2. 4A floating navigation bar labels every tab.
02 · Chat organization

Separate conversations by type.

Before

The chat view felt cluttered when all conversations were shown together.

What we changed

We separated chat categories and clarified the hierarchy. “Friends” replaced “All”, so one-to-one chats, group chats and advisers each have their own list, and names stand out on rounded cards.

Before
  1. 1An “All” tab is selected by default.
  2. 2Group chats share the list with one-to-one chats.
  3. 3Full-width rows with regular-weight names.
After · Friends
  1. 4“Friends” replaces “All”, so this list holds one-to-one chats only.
  2. 5Rounded cards and bold names make each chat easier to scan.
After · Advice
  1. 6Advisers have their own list under Advice.
05Final experience

A more approachable way to connect on campus.

Three core experiences, discovering communities, joining events, and starting conversations, with Finder adding context about the people nearby. Profile and onboarding support all four.

06Prototype

Try Huddle.

Suggested task

Find a community that interests you, explore an event, and start a conversation.

Good to know

A concept prototype with limited working paths.

Open prototype ↗
07Outcomes & reflection

What the testing showed.

  • In personModerated, scenario-based
  • 6 tasksTask-based testing
  • SUSUsability questionnaire
  • Open questionsComfort and expectations
  • 2 roundsTest, iterate, retest
Reported SUS score · 0–100 scale
Round 1
83.33
Round 2
97.5
Observed
  • Community and event flows were easy to follow
  • Round 2 navigation felt clearer and smoother
Participants said
  • Changing prompts made chatting feel natural
  • Finder was the most engaging feature
Still open
  • More of the prototype should be clickable
  • Transitions and tap feedback need polish

We evaluated a prototype; longer-term friendship formation and campus adoption were not established. SUS is a score out of 100, not a percentage.

What I would take forward.

Give people control

Finder feedback showed that easier contact also requires clear privacy choices and enough context to feel comfortable reaching out.

Clarity supports connection

Separating chat categories reduced visual overload. Small interface decisions matter when the goal is to make social interaction feel approachable.

Focus the scope earlier

Next time, I would test one complete journey—from discovering a shared interest to starting a conversation—before expanding the supporting features.

What comes next

Future work

Broaden participation

Test with students across more disciplines, campuses, accessibility needs, and levels of social confidence.

Refine location sharing

Explore clearer opt-in choices, visibility settings, and ways to pause sharing. Test whether students understand and feel comfortable using them.

Follow connections over time

Study whether students continue conversations, attend activities together, and feel more connected beyond their first interaction.

TeamDesigned with Katherine Cabrera (UX and visual design) and Katerina Qiu (research lead), for UXDG 701 with Prof. Hayoung Ra at SCAD.

Next projectOrnataView case study →
← Back to workGet in touchhiivioletli@gmail.com
← Back to work
Campus Navigation App

Kingston Campass

Less searching. More getting there.

Kingston Campass is an app concept designed to help Kingston University students navigate unfamiliar campus spaces. It brings together indoor and outdoor navigation, AR guidance, and a daily planner to connect finding a place with getting there.

Explore the experience
Kingston Campass cover: the compass logo and name with credits for Neil Cai, Cathy Zhou and Violet Li, beside phone screens for routes, a daily planner, AR directions and the home screen
ContextKingston University London · Design Marketing II · September–December 2024
Project typeAcademic team project
StatusInteractive prototype
My roleUX Designer · Shared Research & Design Responsibilities

My contributionI collaborated with two teammates throughout the project, from research and problem definition to interface design, prototyping, and user testing. We shared responsibilities across the process rather than working within fixed roles.

02Problem & research insights

Knowing your classroom number doesn’t mean knowing how to get there.

Unfamiliar buildings, changing classrooms, and different access needs can make moving around university difficult. We explored how Kingston students could find destinations across campuses and inside buildings, with guidance connected to their daily routines.

Research approach.

We began with a survey, followed by several rounds of interviews with students from different disciplines at Knights Park and Penrhyn Road. We explored difficulties finding classrooms, preferences for directions, and the features students wanted from a campus navigation app.

  • Survey
  • Student interviews
  • Persona development

Three findings.

The challenge continues inside the building.

Students across different disciplines described difficulty finding their classrooms. Reaching a campus or building was only part of the journey.

Design implicationConnect campus maps with more detailed indoor guidance.

Directions need to be easy to interpret.

Research highlighted difficulty using cardinal directions such as east and west. Students wanted clearer, simpler guidance.

Design implicationUse familiar instructions such as left and right, supported by visual direction cues.

Routes need to fit different circumstances.

The research identified interest in customized routes, accessibility-related options, weather considerations, and connections to class schedules.

Design implicationBring route preferences and timetable-based planning into the same experience.

Who we designed for.

Our personas explored three situations: students discovering unfamiliar spaces, international students adjusting to a new environment, and students who need step-free routes and reliable access information.

SituationMain need
Exploring unfamiliar spacesMain needFind classrooms, facilities, and other departments
Adjusting to a new universityMain needUnderstand destinations and directions
Navigating access requirementsMain needIdentify suitable routes and facilities
03Design direction

Connect the day’s plans with the next direction.

Design questionHow might we help Kingston students move between classes and campus facilities with clear guidance that fits their routines and access needs?

Design priorities.

PriorityDesign direction
Make destinations easy to reachDesign directionProvide search, saved places, and shortcuts to campus facilities
Make directions easier to followDesign directionCombine maps, step-by-step instructions, and an AR navigation concept
Support individual routinesDesign directionConnect the daily planner with route choices and editable shortcuts

Core journey.

  1. 01Choose a destination
  2. 02Review route options
  3. 03Follow directions
  4. 04Arrive
  5. 05Save the place for next time

The main journey connects destination selection with route guidance. Timetable entries and frequently used places provide additional starting points, reducing the need to search for the same destination repeatedly.

Establishing the structure before the visual detail.

Early wireframes explored how a map could work alongside search, route information, a daily planner, and saved places. We developed these connected tasks before refining the interface and reusable components.

1Home and searchSearch and campus shortcuts.
2Route optionsRoute choices and estimated travel times.
3Navigation instructionsStep-by-step guidance.
4Daily plannerScheduled destinations.
04Testing & design responses

Testing the details people rely on while moving.

We tested clickable Figma prototypes with students from Kingston and other universities. An initial round explored navigation, widgets, and settings. A later round examined the visual interface, onboarding, and interactions between features.

Tasks tested
  • Choose a destination and explore route options.
  • Navigate to a destination and save or share the route.
  • Use and edit home-screen widgets.
  • Explore settings and personalization.
  • Follow the introductory tutorial.
Testing the clickable prototype.

Comparing route-selection controls.

Design questionHow should students access different route modes while comparing journeys?

Option A

Compact dropdown.

Design shown

A “Mode” dropdown keeps the control compact and leaves more room for the map and route information. Students need to open it to see the available modes.

  1. 1Route modes accessed through a dropdown.
Option B

Visible mode selector.

Design shown

A bottom selector displays “Speedy,” “Healthy,” and “Cheapo” together, making the choices visible without opening a menu. It also occupies additional screen space.

  1. 2All three modes visible along the bottom.
Final decision

Compact dropdown.

We carried Option A into the final interface. The compact dropdown keeps route modes accessible without a permanent selector occupying the bottom of the screen.

Final design · Outdoor
  1. 1Compact route-mode dropdown in the final design.
Final design · Indoor
  1. 2Indoor navigation: no need to change the mode.
05Final experience

From the next class to the next turn.

Kingston Campass brings destination search, route options, daily planning, and campus shortcuts into one experience, helping students navigate around their university.

Feature spotlight · Navigation

Keep the next direction in view.

Map-based instructions and an AR navigation concept offer two ways to follow a route. Direction cards show the next action and distance, while the AR view places visual guidance over the camera scene.

Map navigation
AR navigation

Map and AR navigation concepts shown in the prototype.

The AR route to Marketplace, from the first turn to arrival.

Prototype walkthrough

Follow a campus journey.

Suggested task

Explore how destination search, route selection, and navigation connect in the prototype.

Good to know

A concept prototype with limited working paths.

Open prototype ↗ Watch a short walkthrough ↗
06Outcomes & reflection

What the project brought together.

We developed a clickable app prototype supported by student research, wireframes, a reusable interface system, and two rounds of prototype testing. The concept connected campus navigation with schedules, route preferences, and everyday destinations.

Testing takeawayFeedback identified useful elements, including destination search and map interactions, while also revealing areas that needed clearer guidance, stronger visual hierarchy, and better control of map visibility.

Testing explored the interface and proposed interactions. It did not establish real-world navigation accuracy or verify route accessibility.

What I would take forward.

Clear directions start with familiar language.

Research highlighted the difficulty of interpreting cardinal directions. I would continue to prioritize recognizable actions, distances, and landmarks when designing guidance for unfamiliar places.

The map and its instructions need to work together.

Testing showed that expanded information could cover too much of the map. I would pay closer attention to what remains visible while someone checks the next step.

Accessibility depends on reliable information.

Step-free options and lift information need accurate campus data behind them. I would involve students with different mobility needs and campus facilities staff earlier in evaluating the experience.

What comes next

Future work

Test complete journeys on campus.

Observe students moving between buildings and finding rooms to understand where digital instructions stop matching the physical environment.

Verify route and access information.

Work with campus teams and students to evaluate step-free paths, entrances, lifts, closures, and the process for keeping that information current.

Refine information visibility.

Revisit navigation text sizes, card hierarchy, and expanded panels, then test whether students can read instructions while retaining enough map context.

CreditDesigned collaboratively by Neil Cai, Cathy Zhou, and Violet Li as part of Design Marketing II at Kingston University London.

Next projectHuddleView case study →
← Back to workGet in touchhiivioletli@gmail.com
← Back to work
Museum Discovery App

Ornata

A closer look. A new discovery.

Ornata is an app concept that helps museum visitors discover the stories behind traditional patterns on artifacts. Through scanning, learning, collecting, and creating, it encourages visitors to continue exploring beyond their museum visit.

Explore the experience
Ornata cover: the Ornata wordmark above three phones showing the home screen, the welcome screen and the Buyi pattern collection
ContextAcademic project · Kingston University · 2025
Project typeIndividual project
StatusApp prototype & AR demonstration
My roleResearch, concept, app design, illustration & campaign
02Problem & research insights

Recognizing a pattern isn’t the same as understanding it.

Traditional patterns can feel familiar without their meaning being understood. My research explored how younger audiences engage with these patterns, what makes cultural information difficult to access, and how a museum visit could offer a starting point for further discovery.

Research approach.

I combined secondary research on cultural engagement and digital experiences with interviews, a survey, and visits to the British Museum. Together, these helped me understand audience interests, practical barriers, and opportunities to connect artifacts with more accessible pattern information.

  • Secondary research
  • Interviews
  • Survey
  • Museum observations

Three findings that shaped the concept.

Familiar patterns, unfamiliar stories

Interviewees recognized traditional patterns but did not always connect them with their cultural significance.

Design responseConnect visual motifs with information about their origins and meaning.

Discovery needs to fit the moment

Interviewees described busy routines and wanted an experience that was quick to use. Survey responses also pointed to difficulty finding relevant content.

Design responseMake scanning a direct entry point to pattern information.

People want to keep what interests them

Some interviewees wanted to save favorite patterns and organize them into personal folders.

Design responseInclude collecting and organization alongside discovery.

Looking more closely at what the labels left out.

During visits to the British Museum, I noticed that labels often explained the objects without describing their decorative patterns in detail. The chronological organization of the collections also informed how I approached browsing by dynasty in the app.

Museum observations informed both the app’s content organization and the idea of exploring an artifact through its patterns.
03Design direction

From noticing a pattern to making it part of your collection.

Design questionHow might we help museum visitors understand the patterns they encounter and continue exploring them after their visit?

Intended experience.

  1. 01Notice an artifact
  2. 02Scan a pattern
  3. 03Explore its story
  4. 04Save it
  5. 05Create something personal

I structured Ornata around an immediate museum interaction, followed by opportunities to revisit and reinterpret the patterns that caught someone’s attention.

Translating historical references into a visual language.

I studied traditional motifs, broke down their shapes, and explored new arrangements and color combinations. These reinterpretations became part of Ornata’s illustrations, interface, and campaign materials.

Reference elements, the reinterpreted pattern, and its colour palette. Reference images are credited in the original project documentation.
04Testing & refinements

Making exploration easier to understand and control.

I tested prototype tasks including signing in, accessing AR, scanning, and creating a pattern. Feedback raised questions about navigation and information placement, while the creation task revealed hesitation around customization. Further interface comparisons helped me refine category browsing.

TaskTimeGoal achievedCommentObservation
Sign inTime10 secGoal achievedSuccessCommentIs “Sign in” necessary?ObservationSmooth operation
Use ARTime30 secGoal achievedSuccessCommentNo issues foundObservationSmooth operation
Scan patternTime10 secGoal achievedSuccessCommentNo issues foundObservationSmooth operation
Design patternTime40 secGoal achievedSuccessCommentShould be more options in “Adjustment”ObservationHesitant about choosing colours and shapes

What changed after testing.

01

Give categories more context.

Before

The original object categories relied on names and decorative backgrounds. Visitors had little information about unfamiliar categories before opening them.

What I changed

I replaced the text-led buttons with illustrated cards, pairing each object name with a short description and an arrow indicating further content. On the homepage, I also replaced textured category backgrounds with illustrations associated with each browsing theme.

Before
  1. 1Category names with decorative backgrounds.
After
  1. 2Illustrations and descriptions introduce each object.
  2. 3Arrows indicate where to explore further.
Before
After

Category illustrations bring visual context to the four browsing routes: dynasty, ethnic groups, region, and objects.

02

Offer more ways to personalize a pattern.

Before

The original creation screen offered only size and rotation controls. During testing, participants hesitated over customization and asked for more adjustment options.

What I changed

I expanded the controls to include exposure, contrast, saturation, and temperature alongside size and rotation. I also moved the “Adjustment” heading beneath the preview to group it with the controls it describes.

Before
  1. 1Customization limited to size and rotation.
After
  1. 2Additional controls for adjusting the pattern’s appearance.
  2. 3Adjustment heading grouped with the sliders.
05Final app experience

Discover, understand, collect, and create.

The final concept connects the moment a pattern catches someone’s attention with opportunities to learn about it, keep it, and explore it creatively.

Mid-fidelity
High-fidelity
Prototype

Try Ornata.

Suggested task

Scan a pattern, explore its story, and save it to your collection.

Good to know

A concept prototype with limited working paths.

Open prototype ↗ Watch a short walkthrough ↗
06Marketing strategy & physical extensions

Extending discovery beyond the app.

Alongside the app, I developed a marketing strategy that connected museum discovery with social storytelling and physical pattern-based products.

Proposed campaign and partnership strategy

A · Museum campaign
Pattern-led poster concept: Baoxiang floral pattern

Introduce Ornata where the discovery begins.

I proposed museum partnerships that would introduce Ornata through exhibitions. Pattern-led posters and exhibition-specific collecting activities would connect the app with objects visitors could encounter in person.

B · Social storytelling

Give a pattern a story worth following.

I developed social content using artifact imagery, pattern details, and a notebook-inspired format. The proposed approach introduced cultural stories through visual details and invited audiences to continue exploring through Ornata.

Notebook-style post: pattern extraction from a china vase
C · Physical outcomes

Bring the patterns into everyday objects.

I extended the visual work into printed stickers and silk scarves, exploring how the reinterpreted patterns could exist beyond the screen.

Physical design outcomes created for the project.

07Outcomes, reflection & future work

What the project brought together.

Ornata brought together audience research, an app prototype, an AR demonstration, and a proposed marketing campaign. I also developed a visual language through pattern reinterpretations, illustrations, motion work, and physical products.

The project explored the concept through research and prototype testing. It did not measure live museum use, adoption, or long-term engagement.

What I would take forward.

Cultural detail needs as much care as the interface.

Museum visits showed me how much context can sit behind a decorative detail. I would involve cultural specialists earlier to strengthen the accuracy, sourcing, and interpretation of the content.

Visual identity can support understanding.

Developing illustrated categories helped me think about visual design as part of navigation. Images and short explanations can give people context before they choose where to explore.

A broad concept needs a clear first release.

Working across the app, AR, campaign, and physical products stretched the project’s scope. I would prioritize the museum discovery journey before developing commerce or subscription features.

What comes next

Future work

Test the experience during a museum visit.

Evaluate whether visitors can move from noticing an artifact to finding useful pattern information without interrupting their visit.

Develop the recognition and content foundations.

Explore technical feasibility, image-use permissions, and curatorial partnerships to connect artifacts with reliable pattern information.

Find out what brings people back.

Test whether saved collections and creative tools give visitors a reason to return after their initial museum interaction.

CreditResearch, concept, app design, illustrations, and campaign development by Violet Li.

Historical pattern references and supporting research are credited in the original project documentation.

Next projectKingston CampassView case study →
← Back to workGet in touchhiivioletli@gmail.com
← Home Design system · v2.0 · October 2026

Violet, on paper.

The personal brand system behind this portfolio: a vintage, minimal stationery look built on one violet palette, DM Sans and a few paper objects used with restraint.

Principles

Paper, not screen

Warm paper ground, hairline rules and printed-matter details (tabs, stamps, tape) make the site feel collected and personal.

Quiet, then one flourish

Each section has at most one decorative object. Everything around it stays plain so the work leads.

Evidence first

Numbers, methods and outcomes are set larger than adjectives. Recruiters should find impact in five seconds.

Brand mark

Your illustrated avatar is the logo: it sits beside the name in the navigation at 36px, always as a circle. Keep clear space of half the logo's width on every side. Decoration is editorial and print-inspired, never cute: a registration mark separates words in the serif bands, and line-drawn desk and UI objects (paper clip, cursor, locate target, compass, wax seal, postage stamp) sit on the paper.

Illustrated avatar of Violet: dark shoulder-length hair, a star earring, on a lavender circle Violet Li

Colour

Seven brand colours from your moodboard, plus four neutrals derived from them. Japanese Violet carries weight (bands, solid buttons); the pale lavenders carry highlights and surfaces. Pure black is reserved for the logo on print; on screen, text uses Ink.

Japanese Violet#502F4C · --japanese-violetBands, solid buttons, numbers
English Violet#563C5C · --english-violetLinks, section titles
Old Lavender#70587C · --old-lavenderChapter numbers, icons
Lavender Gray#C8B8DB · --lavender-grayHighlights, ticker, tags
Thistle#D8BFD8 · --thistleFolders, stripes
Lavender Blush#F5EAEC · --lavender-blushSurfaces, tiles, text on violet
Black#000000 · --blackLogo and print only
Paper#FBF7F5 · --paperPage background
Ink#1C1219 · --inkBody text
Muted#6B5B68 · --mutedSecondary text, captions
Line#E5D8DD · --lineHairline dividers
TextBackgroundRatioWCAG
InkPaper17.2 : 1AAA
Japanese VioletPaper10.7 : 1AAA
Lavender BlushJapanese Violet9.6 : 1AAA
English VioletPaper9.0 : 1AAA
ThistleJapanese Violet6.7 : 1AA
InkLavender Gray9.9 : 1AAA
MutedPaper5.9 : 1AA
Old LavenderPaper5.8 : 1AA
Old LavenderLavender Gray3.4 : 1Large text only

Typography

Three roles, per the homepage brief. Instrument Serif Regular sets the homepage headline and occasional short statements, and its italic marks one or two accent words per heading. DM Sans Regular carries descriptions, paragraphs and captions. DM Sans Medium/Semibold is for navigation, buttons, project names and section headings. DM Mono handles hex codes and small data.

Headline · Instrument Serif
Regular 400I design ways to find their bearings
Display · 600
84/86 · −4%Find your way
H1 · 600
60/63 · −3%Case studies
H2 · 600
40/42 · −3%From 130 voices to 6 insights
H3 · 600
22/26 · −2%I let users change my mind.
Body L · 400
19/29I start from research, test early and often, and carry the work through.
Body · 400
17/28We ran Five Whys on 18 key insights to reach 18 root causes.
Caption · 400
13/19Wireframes used in the first round of testing.
Label · 500
12 · +12% capsCase study 01 · Mobile
Accent · italic
serifhello from Violet

Space & shape

A 4px base scale. Sections breathe at 96 to 128px; cards use 16 to 24px inside. Corners are soft (6 and 12px) and buttons and tags are full pills, echoing the references.

--sp-14px
--sp-28px
--sp-312px
--sp-416px
--sp-524px
--sp-632px
--sp-748px
--sp-864px
--sp-996px
--sp-10128px
--r-sm 6 --r-md 12 --r-lg 20 --r-pill

Layout: content max 1160px, reading column 660px, 16px minimum gutter. Case studies use a 200px sticky chapter rail beside the content; below 820px everything stacks to one column.

Components

Buttons
PrimarySecondarySmallText link ↗

One solid button per view. Minimum 44px tall. Arrow ↗ marks links that leave the page or open a case study.

Tags & labels
Usability testingA/B testingProject 01 · Mobile

Labels sit in parentheses, in caps, like an archive index.

Highlight
find their people

A Lavender Gray marker behind key words. Max three per page.

Folder card
Research130+ → 6Grouped strengths, project metadata.

Tones rotate Thistle, Lavender Gray, Lavender Blush.

Stamp
97.5SUS score
78%highly interested

Perforated tiles for real research numbers only.

Polaroid
photo
a caption

Personal photos only, tilted 2 to 3°, with washi tape.

Window
project
project cover

Frames every project cover so screens read as product work.

Data bars
Round 2
97.5

Always drawn to scale with the axis or the value shown.

Project card
TitleOne-sentence description.
Discipline
UX/UI Design
Context
Team project
View case study

One per row, image above text, 16:10 preview with one dominant screen. Whole card is one link: border darkens and the arrow nudges on hover; titles never hide.

Contact email
name@example.comCopy emailCopied!

Email shown in full as text, with a copy button that confirms. Mail links can't open everywhere.

Mobile menu
Violet LiMenu

Under 620px the nav collapses to the name and a labelled Menu button.

Page anatomy

Order and wording come from Violet's Notion brief, "Homepage structure, from top to bottom".

1 · NavigationAvatar and Violet Li on the left; Work, About, Explorations and a Résumé button on the right. Sticky and opaque. Only the About page marks its link as selected.2 · IntroductionOne headline, one short paragraph, "Explore my work ↓". Short enough that the first project shows on a laptop screen.
3 · Selected work"Selected work" with a "UX & interaction design" label. Huddle, Ornata, Kingston Campass: one card per row, same structure. No "coming soon" cards.4 · Contact"Let's connect." One supporting line, email first, then LinkedIn and résumé. Lavender Blush band so it reads as the ending.
5 · Footer"Violet Li © 2026". Quieter than the contact section.

References

What this system borrows, and from where. Your Notion brief decides the homepage structure; the references shape the style.

Megan Yap · meganyap.meOne consistent information structure on every project card, and a short, direct introduction.Jessica Hsu · jessicahsu.designA one-line description per project, an intro that keeps the first project above the fold, and a copy-email button that confirms.
Ben Shih · benshih.designWarm paper colour, a hand-drawn flower mark, short warm copy, and contact that ends the page.Your moodboardsViolet palette; vintage paper objects (folders, stamps, polaroids) in case studies; style-guide layout for this page.

Motion & access

Do
  • Keep text at 4.5:1 or better; use the table above.
  • Show a 2px Japanese Violet focus ring on every control.
  • Use 0.2s colour fades and the ticker as the only moving parts.
  • Write alt text for every case study image.
Don't
  • Put Old Lavender body text on Lavender Gray or Thistle.
  • Use more than one decorative object per section.
  • Tilt or tape case study images; keep work straight and readable.
  • Animate anything when reduced motion is on.

Oh, you opened it!

I spend a lot of time thinking about what makes someone want to look closer, try something, or say hello. This little envelope was one of those thoughts.

Thanks for taking a closer look at my work. If something here gives us a reason to talk, I’d love to hear from you.

Violet