Goodreads

UX UI | Spring 2024

SKILLS LEARNED
+ Figma
+ UX | UI
+ Web Design

The Project:

An Interaction Design studio project with Eli Shust, Rachael Cai, and Diane Choi. We addressed accessibility shortcomings of the website and developed our own flow.

Part 1: Analysis of the Problem

Task Flow

We developed personas with unique considerations to address in the final design.

Part 2: Task Flow & Personas

Prototyping

After user considerations, our first wireframes were developed.

Part 3: Prototyping

Style Guide

After testing we developed the final theme for the website.

Color

Color Rational

Primary

Structural

Discretionary

Comfortable, Approachable
Deep greens, off whites, browns, and warm oranges all reinforce a cozy library feeling for the user.

Contrast Tested
Txt on Bgrd.
Txt on Bgrd Accent
Bgrd on Brand
Txt on Call to Action
Txt on Hover
Bgrd on Clicked

WCAG AA Standard


11.37:1
6.22:1
7.4:1
8.44:1
6.22:1
6.32:1

4.5:1

Brand Color | 465440

Background | F7F5EF

Brand Color | FFCF54

Brand Accent | 2D3927

Background Accent | BEB7AA

Hover | FBA453

Text & Clicked | 3D3321

Typography

Red Hat Display & Text

Type Styles

Components

Final Design

Link To Figma