A 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.
ORIGINAL WEBSITE DESIGN REVIEW
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. The 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.
THE ORIGINAL WEBSITE DESIGN WITH VISUAL / USER EXPERIENCE ISSUES
IDEA SKETCHING & PROBLEM SOLVING
The first issues 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 on the jewelry market. My idea in my initial sketching was to simplify the navigation menu and have the focus be on 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.
INITIAL SKETCHES OF IDEA FOR THE REDESIGN
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 most 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 with the website.
COMPARISON: BEFORE + WIREFRAME + FINAL
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.