04

GRAVEFACE WEBSITE RE-DESIGN

The goal of this project was to redesign a local website with an unintuitive user experience, creating a cleaner, more user-friendly interface with easier navigation while staying true to the brand’s visual identity and core values.

THE PROBLEM

current sitemap

The current Graveface website is too complex and confusing to navigate, with multiple categories divided across several themes, which drives users away.

HOW MIGHT WE

Highlight this is an independent record label & the physical store caters to different needs?

Educate uniformed users on the differences in types of analog music?

Create an easily digestible website for new users?

RESEARCH

proposed sitemap based on card sorting results

Through a card sorting exercise we found these insights:

Users want all similar products to be in one place

users believe that many of the tabs on the original website have ambiguous names

users feel that there are tabs missing - cds and merch

USER TESTING

We created multiple versions of our proposed website and edited them into two final versions. With these versions we conducted a/b user testing and also gathered further feedback on specific features to implement.


Incorporates bold and punk aesthetic with black paper texture background

Clickable new releases

Better suited for returning users who know what the brand is about


Catered for new users exploring the brand

Artist call out to show appreciation within the industry

Visual icons to help new users explore formats & a CTA to shop

Favorite icon

Breadcrumbs above title & icons to show what format is available

“Read more” included on first block,

“Click to flip” front and back of album image only

Immediately apparent to new users product type

Catered for browsing and exploring

Carousel for updated content, can be new releasese, events, news, etc.


Best sellers to grab attention and encourage shopping

Subscription CTA

Ending with an about section




Star icon

Left hand column secondary images

Pricing more pronounced, breadcrumbs left aligned

Icons with a dropdown for available formats

“Read more” in second block

RESULTS

After applying feedback and doing another round of user testing, we finalized a design that accomplishes our goals: being easy for users to navigate and help new users learn about analog media as well as provide existing users with a sense of community, all while showcasing the brand identity & aesthetic that is Graveface.

homepage

45-Degree Line




product page






(shop by format section and footer are repeated here)

Immediate call out to type of products sold

Carousel showcases a variety of products

Supporting pictures show what form the product takes

Icons included to tell users what type of medium the product is

Includes a call out to their subscription service (something not even returning users would know about in current website)

“Z Pattern” to keep users eyes moving down the page

Short Introduction to the company

Community section gives users a short glimpse into what like minded people are doing

Event call out & discord links to chatrooms
inspires new users to explore the community
gives returning hobby enthusiast a push to engage more

Local artists are important to a small business like Graveface

Respective creatives can appreciate the space to represent artists

Icons used throughout the site blown up, supporting the association between the image and type of music

Allows users to explore by format

Mailing list call out, secondary navigation

Customer service linked pages

Linked social media pages represented by hand drawn icons

Large hero image and supporting image gallery

Grayed out gallery so users know images are clickable

Breadcrumbs at the top

Visual hierarchy of product information

Music media has a lot of supporting information- track list and artist description

Broken up into relevant sections to become digestible

Suggest products with casual UX writing

Only 4 suggestions to keep the focus on the displayed product and not overwhelm users

REFLECTION

In this class, the primary goal was to develop a deep understanding of information architecture. Through extensive research, user testing, and multiple iterations of the website we created, I gained valuable insights into structuring content for usability and clarity. Each design decision was purposeful, focusing on navigation design, content hierarchy, and user flow optimization.

I also honed skills in wireframing, site mapping, and usability testing, ensuring that the final product aligned with both user needs and the brand's identity. This experience taught me how to create intuitive, user-centered experiences while effectively communicating a brand’s message and values.