Discovery

Xinno Health

Discovery

Discover a new journey

Xinno Health is a cross-border health tech summit hosted in Seattle, WA. 

Redesigned the website of CHID ( Comparative History of Ideas ) department University of Washington.

Discover a new journey.

Objectives

To design an experience for students to discover orientation events and craft a visual system to accommodate different types of events

To design an experience for students to discover orientation events and craft a visual system to accommodate different types of events

My role

Research

Wireframing

Prototyping

Research
Wireframing
Prototyping

Tools

Sketch
Illustrator
Photoshop
Framer X

Sketch
Illustrator
Photoshop
Framer X

Design Team

Design Team

Solo project

Solo project 

Duration

A week

A week

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

The Challenge

The Challenge

How might we design an experience for students to discover orientation events?

How might we design a visual system for the orientation website?

How might we design an experience for students to discover orientation events?

How might we design a visual system for the orientation website?

The Solution

The Solution

Discovery is an orientation event management platform that allows students to browse, search and view different orientation events.

The menu of this platform has three items: events, save and search. 

mobile-laptop

Key Features

Key Features

Homepage

Homepage

The home page content can be divided into 7 sections -category, popular, sports, music, visual arts, social groups, and volunteer.

The event thumbnails in the same category share the same main colors. 

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Select an event

Select an event

When the users hover over the event card, the elevation of the card will increase from 0 dp to 1 dp. Therefore, users can be informed the card is selected. 

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Search an event

Search an event

Users can type in the event keywords on the search bar to get results of related events.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Event details page

Event details page

Users are able to add the event to Google calendar, save the event, and ask questions related to the event, and also share the event.


I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Mobile view

Mobile view

The design of Discovery is responsive across mediums. Students can also discover the orientation events on mobile. 

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Mockups

Mockups


Research

Research

Interview

Interview with stakeholders

Interview

In order to understand the factors students think important when looking online to attend an event, I interviewed five students who participated in orientations events in the past two years.

Depending on the student's needs, I designed the event details page that covers all the information that they think is important.

interviews-01

User flow

Interview with stakeholders

 User flow

Discovery-diagram-01

Accessibility

Interview with stakeholders

 Accessibility

The color contrast of Discovery reaches WCAG 2 level AA.

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components. 

The color contrast of Discovery reaches WCAG 2 level AA.

WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components. 

Artboard

Design system

Interview with stakeholders

Design system

Based on Material design principles, I  had built a design system that includes various design components before I started mocking up the high-fidelity design.

DS-01

Other Projects

RealityLAU I | U X Design

XinnoHealthWEBSITE | SUMMIT DESIGN

FurmingoPRODUCT DESIGN | USABILITY TESTING

CHIDWEBSITE DESIGN

OwlWEBSITE DESIGN

mapFront-end development | Illustration