Africa Gems

About

A landing page redesign pitch for Africa Gems who wanted a fresh, modern and clean update to their website. The website itself was very outdated and cluttered with a lot of text that made it hard to navigate and focus on the beautiful gemstones that they sell. I researched several luxury jewelry retailers such as Tiffany’s and David Yurman to see what the high end competition was doing. I loved how Tiffany’s displayed large merchandise on the homepage for the customer as they are scrolling down the page, I feel it served as an introduction to the many amazing items that they have. I decided to use that element from Tiffany’s as an added section within the website for AfricaGems to display the variety of items that they themselves have as well as within different price ranges.

 


CHALLENGE

The original landing page had the old branding included on it and there was no hierarchy in the typography layout and what the User should focus on visually. Moreover, it was very confusing for the User to navigate within the top menu as there were too many choices and not a lot of visual cues as to which area is the most important. Another overlooked element of the website was the Email List subscriber section which was hard to distinguish and easily ignored by a quick glance at the page. A large amount of text at the bottom of the website made it very hard for a User to read through much less have it catch the User’s attention that they should subscribe to the newsletter with a chance to win a gemstone from Africa Gems.

 

There are 5 main things that needed to be addressed:

  • Separate out text so it’s not clumped together and illegible / NO ONE WILL READ IT AS IT IS
  • Create hierarchy of image and text
  • Simplify top navigation menu
  • Redesign the UI to represent a more high-end jewelry experience
  • Create a more engaging email subscriber call to action section

 

THE ORIGINAL WEBSITE DESIGN WITH VISUAL / USER EXPERIENCE ISSUES

 

AFRICA_GEMS_WEBPAGE_BEFORE

 

RESEARCH

My first stop in research was to check out what the competition was doing and asking myself the following questions:

  • How is the layout of Tiffany’s / David Yurman / DeBeer’s / Harry Winston?
  • What about their website makes it feel so much more user-friendly than AfricaGems?
  • What element’s work really great that could be implemented for AfricaGems as well?

Those were the types of questions I referred to when browsing through high-end jewelry websites as i collected information to help me get a direction for the redesign and improved usability.

“Get rid of half the words on each page, then get rid of half of what’s left.”
― Steve Krug, “Don’t Make Me Think”

IDEA SKETCHING & PROBLEM SOLVING

The first issue that needed to be solved is how to entice the User and make them feel like they landed on a special jewelry store that has a sophisticated yet approachable feel. The cutout images in the original design didn’t help to sell the User on it being an authentic and respected online store. It felt more like a low-priced website with gemstones that are not valuable or competitive in the jewelry market. My idea in my initial sketching was to simplify the navigation menu and have the focus be on the beautiful single imagery of the jewels on the landing page. I also focused on having the iconic new logo displayed prominently on top of the page to allow the User to really connect with the brand of Africa Gems. It also felt like the amount of text that was thrown at the user at once without any hierchy was way too much. No one was going to read that since User’s skim the page for the information they really need to find.

INITIAL SKETCHES OF IDEA FOR THE REDESIGN

IMG_6405

 

FIRST INITIAL DESIGNS

The first few designs created I mostly focused on creating a more inviting landing page by creating sections of elements within which the customer would easily navigate through the website. I started out with the simplest version that the website would need and started to build it out with each new iteration. At first, I added in all of the elements that were on the original website but in a cleaner and sectioned idea in mind. In the second example below (on the right) I added in an area for the customer to shop the website based on which shape of a gemstone they would be looking for. Adding this gemstone shape element cuts down on the customer’s confusion and time getting acclimated to the website.

 

 

DESIGN IN PROCESS

Once I worked through the sketches and the initial designs for the website I created a simple wireframe that would guide me on the proportions and which elements stand out more in their hierarchy without the confusion and distraction of actual elements. After researching and visiting multiple high-end jewelry and gemstone websites I noticed that many of them had sections where they would display certain items from their store that the customer would be interested in. I decided to add in such a section in the middle of the website area for Africa Gems as well to really display the variety of items that they offer within their online store.

Another big issue with the initial design was that the paragraphs of text were too close together and looked like a clump of text that makes the User hard to convince to read. I broke up the area into separate sections to make it visually easier to read through and create a visual hierarchy.

 

 

VALIDATION TESTING

To test out the difference in the two pages I asked a few people to be my test subjects with the goal of testing the elements below

  • What is your impression of the page at first glance?
  • Where would you click to sign in?
  • How would you shop for only Oval shaped diamonds?
  • Do you  know how many items you have in your cart?
  • Can you sign up for the newsletter?
  • What charity do they support?
  • When do you qualify for Free Shipping?
  • Can you find the contact info to call AfricaGems or to email them?

The impression of the redesign was very positive with a quicker ability to find items needed and completing the tasks with ease from the previous landing page look.

 

 LANDING PAGE REDESIGN

imoc_africagem