Valerie Madison Jewelers: UX Redesign Proposal

 

OVERVIEW
A UX redesign proposal for the Valerie Madison Jewelers website.

TIMELINE
June 2020 - September 2020

ROLE
Product Designer

TEAM
2 Frontend Developers
2 Backend Developers

TOOLS
Squarespace

Note: several links in this proposal may no longer work, as those links have been removed, based upon suggestions in this proposal

Link to the redesigned website: https://www.valeriemadison.com/

This proposal will go through the home page, navigation, content organization, and layouts of Valerie Madison website as these are the 4 primary places that can be improved on the website. In terms of the color scheme of the site’s design, it aligns well with the modern, sleek and alternative feel that the company promotes through fine jewelry. The white background with pastel color accents aligns with the delicate nature of the fine jewelry pieces sold at Valerie Madison, and accurately captures the nature of the brand through design. In all the following organizational changes, I recommend maintaining the aesthetic of the current website.

HOME PAGE

  • There is a lot of content on the home page which can make the website overwhelming and difficult to navigate for users. It’s really important to have the home page not be overwhelming, as it is the first impression many users get of the website and the brand.

  • I’d recommend deleting/moving many of the different sections on the home page, especially the hero images or links to other web pages. A website is easiest to navigate if all links to other web pages are consolidated in the navigation bar. Stripping down and consolidating the home page content will make the web page more welcoming and easy to navigate to users..

Portions of the home page to remove:

  • Sliding hero Images at top of home page

    • Hero images add little content-wise to the website. Also, the top of the home page is the first thing people are going to see when they reach the website, and thus it should be something capturing and informative.

  • Links to other web page

    • Although these add a nice aesthetic to the website, they distract from the meaningful, unique content on the home page. The nav bar should take care of all links to jewelry, and users anticipate to find such links in the nav bar. When there are so many different ways to reach the same web page, it can be confusing because users don’t know which link will actually lead them to what they would like to see.

  • Social media pictures

    • Social media should definitely be linked to the website to maintain user engagement. However, these images are linked without any heading or explanation, and thus, they look out of place and can confuse users instead of helping them.

  • Environmentally responsible hero image

    • Hero images add little to a website and can be hard to read. Also, the home page hits on the importance of sustainability later in the “What makes Valerie Madison Jewelry different” section. To consolidate the information about sustainability, it would be best to link the “Read more” article that is linked here under the “Recycled Metals” section of “What makes Valerie Madison Jewelry different.”

  • Search bar (on home page)

    • The search bar is helpful on all pages that display jewelry (ie the all rings and all earrings type of pages

    • A search bar at the top of the home page can discourage users from using the website’s nav bar to find certain things on the website. However, clicking on links in the nav bar is more likely to lead users to what they want to find, rather than the search bar.

  • Footer filled with links (on every page)

    • Links in the footer are very inaccessible to users, as users will only find them if they scroll to the bottom of the web page (which not many users do). Furthermore, all links should be contained in the navigation bar to make the website most easy for users to navigate. This footer should be deleted from every web page, and the links contained in it will be re-sorted into nav bar in future sections.

  • “We have moved” Hero image

    • This contains really important information that should be showcased front and center. I’d recommend deleting this section, and moving it to be part of a general “Valerie Madison” description to be featured at the top of the home page. See the home page redesign sketch I drew to see the section I suggest adding where this information could go.

  1. Re distribute header and footer content:

  • Move the social media/share links and phone number to the footer

  • By convention, these are contained in the footer so users anticipate going there to find them. They are a bit distracting when they are in the header and oftentimes discourage users from using the website to view the products (as they go to social media instead).

  • I would also recommend removing the gray background on the remaining header content (Login and the shopping bag icon). Different colors create division on a web page, which is good for differentiating distinct content that doesn’t pertain directly to online shopping (like the phone number and address). Because the login and shopping bag do pertain to online shopping, a white background behind these icons will create more unity on the home page.

vm1.jpeg

NAV BAR

  1. The items in the nav bar being both links and hover-drop down buttons can confuse users, as they don’t know what to expect from the links in the nav bar (such as jewelry) versus the hyperlinks that display when hovering over the item (such as rings, necklaces, etc.)

  2. Remove the links from all of the items in the nav bar. Users should be able to hover over the items in the nav bar and find hyperlinks for corroborating web pages.

  3. When hovering over an item in the nav bar, it’s difficult to tell what all the possible web pages are (For example, just from hovering over the “Collections” tab, it looks like there are only 5 different collections, but there are 20+ collections in reality). Also, the images in the drop down block from the content on the web page the user is currently on, and users usually like to be able to see both at the same time.

  4. Vertically-organize the dropdown and remove the pictures from the dropdown (It should look like this)

vm2.jpeg

Three things to note about the nav bar redesign:

  1. The “Getting Started” link should bring users to this web page

  2. I determined the order of the web pages based upon what (1) website users are most likely to want to see and (2) the brand wants to feature. This is to say, engagement rings and wedding bands are featured primarily, then other fine jewelry, then custom orders, then about the brand and learn more.

  3. The separation of the “About” and “Learn More” headers will be tested during user testing to see if users can differentiate between the content contained under these 2 headings.

REORGANIZE WEB PAGES

  1. The nav bar serves at the directory of the website, thus, all web page links should be visible in the nav bar. Furthermore, there should be one clear path for every web page (ie, every link should only appear once in the nav bar and on the website).

  2. Card sorting is a technique used by web developers to sort and organize content on a website. I wrote down every web page/piece of content on the current website onto an index card, and sorted them by the heading they should fall under in the nav bar. Card sorting requires many iterations to be perfected.

  3. After several iterations, I determined this would be the most concise and effective way to organize the content on the website

vm3.jpeg

Currently every card is a different web page. In order to make the web site more concise, certain web pages/cards can be combined (the number refers to the what will be contained as an item in the nav bar and the web pages in the letters that follow refer to the web pages that should be hyperlinked/combined when hovering over that item in the nav bar).

The large number of collections can be overwhelming for users and discourage them from using this web page as a resource. I would recommend only putting links to collections which are a combination of different jewelry items on this page (i.e. a combination of rings, earrings, etc.). If all items in a collection are the same type of jewelry piece (i.e. all are rings), I would recommend making that a filter on the sidebar of the Rings web page instead. The following are the collections I think should be showcased on the Collections web page:

  • Essentials

  • Perfect for Gifting

  • New Arrivals

  • One of a Kind

  • Gifts for Grads

  • Valentines Day Gifts

  • For Mom

  • The Selena Collection

  • Sale

  • Ready to Ship Jewelry

  • Note: the above information was also determined based upon the card sort (results pictured below)

Custom Orders

About

Learn more

Note: Any other web page links that I may have cut that you would still like to include (such as the stockists web page), I would recommend adding through the FAQ section. For example, you could add a question about if the jewelry is stocked anywhere outside of Seattle, and the answer could include a link to the stockists web page.

All of the following web pages (most of which fall under “Collections”) should either

  • Become filters under the web page for all items of one type of jewelry

  • Be removed from the website

  • Be added as a link in response to a question in the FAQ web page

vm5.jpeg

WEB PAGE LAYOUTS

Web pages that display jewelry for sale should be kept as is*. This includes

  • Engagement Rings

  • Wedding Bands

  • Rings

  • Earrings

  • Necklaces & Bracelets (Combine those two web pages)

  • Collections (Modified content as mentioned above)

  • About Custom Orders

  • Getting Started

  • Choose your Stone

  • Studio Blog

  • FAQs

  • Services

*Note: certain filters may need to be added to the sidebar (for example, certain collections that are more fitted to be filters, such as “studs” as a filter on the “earrings” web page).

Other web pages that I suggested combining should have the design remain the same, and the content of the two web pages combined as one section after the other.

Previous
Previous

Venmo Case Study: Ensuring Equity in Group Payments

Next
Next

The Cornell Wanderer