Responsive Website

Responsive Website

Responsive Website

First Project • 2024 • 4 minute read

First Project • 2024 • 4 minute read

First Project • 2024 • 4 minute read

I designed a responsive website as part of a rebranding effort to engage a younger, tech-savvy audience. The project involved creating a distinctive visual identity, building a cohesive design system, and improving accessibility and usability across ticketing, events, and the online store.

I designed a responsive website as part of a rebranding effort to engage a younger, tech-savvy audience. The project involved creating a distinctive visual identity, building a cohesive design system, and improving accessibility and usability across ticketing, events, and the online store.

Branding

Branding

Branding

Personal

Personal

Personal

Product Design

Product Design

Product Design

Role

UX Designer

Graphic Design

UX Designer

Graphic Design

UX Designer

Graphic Design

Duration

4 months

4 months

Tools

Figma

Google Forms

Procreate

Figma

Google Forms

Procreate

Anticipated Impact

+30% increase in time spent on page

+20–40% increase in click-through rate by showcasing product lines and clear CTAs

Up to 2x more scroll depth engagement

+30% increase in time spent on page

+20–40% increase in click-through rate by showcasing product lines and clear CTAs

Up to 2x more scroll depth engagement

Improved brand perception especially among Gen Z and Millennials who equate design with brand trustworthiness

Better conversion from ad traffic

Improved brand perception especially among Gen Z and Millennials who equate design with brand trustworthiness

Better conversion from ad traffic

Flow #1 | Buy An Exhibition Ticket

Flow #2 | Buy A Product From Museum Store

Flow #3 | Buy A Membership & Membership View Dashboard

design PROBLEM

weMUSE needed to engage a younger, digital-native audience, but its outdated site lacked responsiveness, clarity, and accessible entry points to exhibitions, events, and products.

design SOLUTION

I designed a responsive site with a refreshed identity, simplified navigation, and mobile-friendly flows for ticketing, events, and shopping—making the museum more approachable and engaging across devices.

design RESEARCH

I took a desktop-first approach, which sped up mobile iterations. Starting with desk research and a competitive audit, I defined key features and site structure. Using user personas, I refined the task flow and built a clear information architecture. I tested each prototype individually across devices, conducting four usability tests.

Empathize

Define

Ideate

Prototype

Test

Empathize

Define

Ideate

Prototype

Test

Empathize

Define

Ideate

Prototype

Test

KC locals cite cost and accessibility as the biggest barriers to engaging with museums and art spaces, particularly for lower income residents2​.

65%

In the US, art exhibits are visited by 65% of adults once or twice a year, showing steady, moderate engagement with visual arts.

KC locals cite cost and accessibility as the biggest barriers to engaging with museums and art spaces, particularly for lower income residents2​.

65%

In the US, art exhibits are visited by 65% of adults once or twice a year, showing steady, moderate engagement with visual arts.

KC locals cite cost and accessibility as the biggest barriers to engaging with museums and art spaces, particularly for lower income residents2​.

65%

In the US, art exhibits are visited by 65% of adults once or twice a year, showing steady, moderate engagement with visual arts.

design CHANGES

Plan Your Visit Page

The "Plan Your Visit" page is key for in-person visitors but was overloaded with information and links. Testing revealed navigation issues, so I improved legibility and usability by refining typography, spacing, and color for a cleaner, more organized layout.

Exhibitions Page

The "Exhibitions" page is central to the site, where visitors explore current and past content. I improved legibility and visual hierarchy through updates to typography, spacing, and color, creating a clearer, more engaging layout.

buisness BRANDING

The bold “MUSE” emphasizes reflection, creativity, and the museum as a space for both. “we” highlights community and shared experience. The typography balances tradition and openness, while the purple brushstroke evokes creativity, movement, and collaborative engagement with art.

Text

Primary

Brand

Accent

Logo for the weMUSE museum featuring a purple paint stroke and the words we (white font) and Muse (black font) in front of the paint stroke
Logo for the weMUSE museum featuring a purple paint stroke and the words we (white font) and Muse (black font) in front of the paint stroke

Text

Primary

Brand

Accent

Logo for the weMUSE museum featuring a purple paint stroke and the words we (white font) and Muse (black font) in front of the paint stroke

Text

Primary

Brand

Accent

Logo for the weMUSE museum featuring a purple paint stroke and the words we (white font) and Muse (black font) in front of the paint stroke

Fonts

Typeface

Purpose

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

ABRIL FATFACE

REGULAR

H1

Regular

170.667 px

| A | -1.25%

H2

Regular

114.667px

| A | -1.25%

H3

Regular

85.333 px

| A | -1.25%

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

LATO

BOLD

REGULAR

SEMIBOLD

MEDIUM

LIGHT

ITALIC

Title 1

SemiBold

57.333 / 52 px

| A | -1.5%

Link 2

Light Italic

32 px

Title 2

SemiBold

40 / 48 px

| A | -1.25%

Link 1

Italic

18.667 / 24 px

Body 1

Regular

32 px

150%

Body 2

Regular

21.333 px

175%

Body 3

Regular

18.667 / 24 px

Button 1

Regular

32 px

| A | -1.25%

Button 2

Regular

16 px

| A | -1.25%

Aa

Fonts

Typeface

Purpose

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

ABRIL FATFACE

REGULAR

H1

Regular

170.667 px

| A | -1.25%

H2

Regular

114.667px

| A | -1.25%

H3

Regular

85.333 px

| A | -1.25%

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

LATO

BOLD

REGULAR

SEMIBOLD

MEDIUM

LIGHT

ITALIC

Title 1

SemiBold

57.333 / 52 px

| A | -1.5%

Link 2

Light Italic

32 px

Title 2

SemiBold

40 / 48 px

| A | -1.25%

Link 1

Italic

18.667 / 24 px

Body 1

Regular

32 px

150%

Body 2

Regular

21.333 px

175%

Body 3

Regular

18.667 / 24 px

Button 1

Regular

32 px

| A | -1.25%

Button 2

Regular

16 px

| A | -1.25%

Aa

Fonts

Typeface

Purpose

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

ABRIL FATFACE

REGULAR

H1

Regular

170.667 px

| A | -1.25%

H2

Regular

114.667px

| A | -1.25%

H3

Regular

85.333 px

| A | -1.25%

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

LATO

BOLD

REGULAR

SEMIBOLD

MEDIUM

LIGHT

ITALIC

Title 1

SemiBold

57.333 / 52 px

| A | -1.5%

Link 2

Light Italic

32 px

Title 2

SemiBold

40 / 48 px

| A | -1.25%

Link 1

Italic

18.667 / 24 px

Body 1

Regular

32 px

150%

Body 2

Regular

21.333 px

175%

Body 3

Regular

18.667 / 24 px

Button 1

Regular

32 px

| A | -1.25%

Button 2

Regular

16 px

| A | -1.25%

Aa

my REFLECTION

Biggest Challenges:

My biggest challenge was staying focused on the big picture—I often got caught up in details instead of prioritizing key pages along the happy path.

I wish I had gathered feedback earlier, especially on typography and layout during wireframing, to reduce decision fatigue and gain fresh perspectives.

Learning Figma slowed me down; knowing more about components, auto-layout, and overlays earlier would’ve made the process much smoother.

Next Time:

Refine the happy path earlier to create space for exploring additional features like dark and light modes.

Deepen accessibility integration beyond color testing, building on past experience.

Experiment with new types of usability testing and research questions to strengthen insights.

Let’s connect. Want to collaborate or just chat design?
Get in Touch | More About Me

Let’s connect. Want to collaborate or just chat design?
Get in Touch | More About Me

Let’s connect. Want to collaborate or just chat design?
Get in Touch |

More About Me

Let’s connect. Want to collaborate or just chat design?
Get in Touch | More About Me

Copyright © 2025 Lilian Juma

Copyright © 2025 Lilian Juma

Copyright © 2025 Lilian Juma

Copyright © 2025 Lilian Juma