Client

Justice Data and Design Lab

Team

Aida (Developer)
Chelsea (UX Reseacher)
K (Project Manager)

Liuyi (Developer)
Shuying (UX Designer)

Duration

01/2024-04/2024

Responsibilities

User research

Wireframing Prototyping

Illustration

About the Client and Project

Justice Data and Design Lab from University of Victoria approached the team for redesigning a website to showcase their professional representation for better user engagement. To support this mission, the redesigned website will serve as an intuitive platform that clearly showcases the lab’s work, engages users, and facilitates collaboration.professional representation. I took on the role of UX designer to redesign their website experience.

01

Sitemap Revision

Upon examining JDD Lab's website, I devised a site map to gain a comprehensive understanding of its content. I noticed a number of problems that didn't make sense in terms of how contents are distributed on the website. Hence, I chose to modify the site map to improve the arrangement of the content.

02

Visual Design Directions

This visual design direction intends to create an approachably professional vibe, and the client chose Option 1 for visual direction which conveyed an informative, trustworthy and approachable feeling.

  • Option 1 | Informative, Trustworthy, Professional

    #654EA3

    #5166D6

    #67B284

    #E8CC98

    #EBECF0

  • Option 2 | Typographic, Modern, Simple

  • Option 3 | Welcoming, Inclusive, vibrant

    #8776B6

    #A3A865

    #BE5A45

    #FFF1D7

    #FFBCBC

03

Wireframe

Wireframes of Home, Goal, Team, Work and Blog were created based on information architecture to showcase how the information will be presented on each webpage.

04

Style Guide

Click here to see the style as documentation.

Color Palette

This purple was the Pantone color of the year when the lab established, and it signifies justice and law based on color theory.

Primary

rgba(104,102,193,1.00)

hsla(241,42,58,1.00)

#6866C1

Mint green is used as for it is a complementary color of the primary color: purple, and it is used in navigation and footer.

Tertiary

rgba(201,234,232,1.00)

hsla(176,44,85,1.00)

#C9EAE8

Muted blue is the transition from green to purple, and it adds harmonious to the color palette.

Secondary

rgba(208,227,255,1.00)

hsla(216,100,91,1.00)

#D0E3FF

The purple has a historic significance to the lab, it was the Pantone color of the year when the lab established. Meanwhile, the color of purple signifies justice and law based on the color theory research we conducted.

Primary

rgba(104,102,193,1.00)

hsla(241,42,58,1.00)

#6866C1

Meted blue is used for it is the color that transitioning green to purple, and it adds harmonious to the color palette. This blue is used in article archive and some transit animation.

Secondary

rgba(208,227,255,1.00)

hsla(216,100,91,1.00)

#D0E3FF

Mint green is used as for it is a complementary color of the primary color: purple, and it is used in navigation and footer.

Tertiary

rgba(201,234,232,1.00)

hsla(176,44,85,1.00)

#C9EAE8

Primary shade 1

rgba(212,211,244,1.00)

hsla(242,60,89,1.00)

#D4D3F4

Primary shade 2

rgba(232,232,248,1.00)

hsla(240,53,94,1.00)

#E8E8F8

Tertiary shade 1

rgba(239,246,246,1.00)

hsla(180,28,95,1.00)

#EFF6F6

Secondary shade 1

rgba(208,227,255,0.45)

hsla(216,100,91,0.45)

#D0E3FF

Primary shade 1

rgba(212,211,244,1.00)

hsla(242,60,89,1.00)

#D4D3F4

Primary shade 2

rgba(232,232,248,1.00)

hsla(240,53,94,1.00)

#E8E8F8

Tertiary shade 1

rgba(239,246,246,1.00)

hsla(180,28,95,1.00)

#EFF6F6

Secondary shade 1

rgba(208,227,255,0.45)

hsla(216,100,91,0.45)

#D0E3FF

Typography

Aa

Roboto is used for its readabilityand its roundness that kept consistency with the curves in the whole visual design.

Footer / normal

Roboto

Regular

Size / Lineheight: 16x

/

20px

Button / text

Roboto

Bold

Size / Lineheight: 20x

/

29px

Footer / bold

Roboto

Bold

Size / Lineheight: 16x

/

20px

Menu

Roboto

Regular

Size / Lineheight: 18px

/

20px

Body / bold

Roboto

Bold

Size / Lineheight: 18px

/

24px

Body / regualr

Roboto

Regular

Size / Lineheight: 18px

/

24px

Heading 1

Roboto

Bold

Size / Lineheight: 31px

/

Auto

Heading 2 / bold

Roboto

Bold

Size / Lineheight: 25px

/

25px

Heading 2 / regular

Roboto

Regular

Size / Lineheight: 25px

/

25px

Heading 3

Roboto

Bold

Size / Lineheight: 20px

/

25px

Components

Shuying's

Playground

📟

Projects

🧒🏻

About

Resume

05

Problems solved by Re-design

Before

Before

After

Redesigned profiles to create consistency among different teams.

  • New design splitted people into disparate groups to clearly address each member's role.

  • By removing the background and using color blocks as the background to keep the consistency among the team without retaking new profile photo.

Redesigned profiles to create consistency among different teams.

  • Leadership team has very long introduction that could result in a lot of scrolling when viewing the website. However, the and I decided to create a pop up window

  • By removing the background and using color blocks as the background to keep the consistency among the team without retaking new profile photo.

Before

Before

After

Before

Before

After

Motion and enlarged trigger area to boost clicks

  • Action button is changed to larger trigger area to increase

  • Hover motion is applied to attract users' attention and easier to access the content.

06

Final Delieverables (Hi-Fi Mockups)