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
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.