Diamond Viz iPhone6

Diamond Visualization

Blue Nile

Blue Nile is the leading online retailer of diamonds. Being the first to sell diamonds online, Blue Nile continues to push the envelope in giving the user complete control over the diamond buying process. The Diamond Visualization project helps to push the process to the next level.

www.BlueNile.com


Diamond Viz iPhone6

Blue Nile is the leading online retailer of diamonds. Being the first to sell diamonds online, Blue Nile continues to push the envelope in giving the user complete control over the diamond buying process. The Diamond Visualization project helps to push the process to the next level.

www.BlueNile.com

Goals


  • To provide a consistent and effective way for customers to easily view real images of diamonds.
  • The solution needs to be easily implemented across our vendors in a consistent format.
  • The solution should encompass 360-degree images, while providing definition/education to easily understand exactly what the images mean. Providing streamlined education opportunities (ex: information around what the image are illustrating).

Constraints


  • Deadlines – the first iteration has to be up and available to customers quickly.
  • Relative sizing.
  • Capacity on the development teams within the given deadline.

Process Overview


Process Image

Preplanning


For this projects quick turnaround, I did initial research in the preplanning stage.

  • Personas – I first wanted to identify the people that I thought would be the target audience for the new diamond visualization feature on the site.
  • Competitive Analysis – I then went and identified how are competitors were approaching the visualization of diamonds.
  • User Flows – I evaluated when and where this would be used on the site, both for this project and projects that were going to use 360 in the future (diamonds, products).

Exploration


During the exploration phase, the team brainstormed ideas for what we thought the best solution would be. I took all these and proceeded to explore them.

  • Sketches – Within our ideation meeting I did rough sketches for ideas and quick concepts, then these were taken to wireframing.
  • Wireframes – This is where I blocked out the ideas quick and dirty.
  • Prototype – I did a quick prototype so that the team and I could see exactly what the page would look like with a spinning diamond. This wasn’t very complex, but gave us a good look at what we were dealing with.

Design


The design step is my favorite part of the UX process. I quickly went from the wireframes to visual design and then into a final high-fi prototype.

  • Visual Design – I took the wireframes that I did in the exploration phase and produced hi-fi visuals for each of them. Usually, I don’t do hi-fi visual designs for all of my wireframes, but because this was a smaller part of a page, it made sense to do so.
  • Hi-Fi Prototype – After presenting to the team my hi-fi visuals, the team and I decided the direction to go. I then worked on producing a hi-fi prototype to help people understand the interactions.

Test/Verify


While in the test/verify phase, the team decided the best approach to testing the results was to soft launch with a feedback form. I also ran some user testing to be sure the new interactions made sense.

  • Feedback – I wanted to get direct feedback from customers. So I added a feedback form link below the new interaction to allow users to give us direct feedback.
  • User Testing – We did some initial user testing to be sure that the new interactions were intuitive to users and easily understood.

Process Overview


Process Image

Preplanning


For this projects quick turnaround, I did initial research in the preplanning stage.

  • Personas – I first wanted to identify the people that I thought would be the target audience for the new diamond visualization feature on the site.
  • Competitive Analysis – I then went and identified how are competitors were approaching the visualization of diamonds.
  • User Flows – I evaluated when and where this would be used on the site, both for this project and projects that were going to use 360 in the future (diamonds, products).

Exploration


During the exploration phase, the team brainstormed ideas for what we thought the best solution would be. I took all these and proceeded to explore them.

  • Sketches – Within our ideation meeting I did rough sketches for ideas and quick concepts, then these were taken to wireframing.
  • Wireframes – This is where I blocked out the ideas quick and dirty.
  • Prototype – I did a quick prototype so that the team and I could see exactly what the page would look like with a spinning diamond. This wasn’t very complex, but gave us a good look at what we were dealing with.

Design


The design step is my favorite part of the UX process. I quickly went from the wireframes to visual design and then into a final high-fi prototype.

  • Visual Design – I took the wireframes that I did in the exploration phase and produced hi-fi visuals for each of them. Usually, I don’t do hi-fi visual designs for all of my wireframes, but because this was a smaller part of a page, it made sense to do so.
  • Hi-Fi Prototype – After presenting to the team my hi-fi visuals, the team and I decided the direction to go. I then worked on producing a hi-fi prototype to help people understand the interactions.

Test/Verify


While in the test/verify phase, the team decided the best approach to testing the results was to soft launch with a feedback form. I also ran some user testing to be sure the new interactions made sense.

  • Feedback – I wanted to get direct feedback from customers. So I added a feedback form link below the new interaction to allow users to give us direct feedback.
  • User Testing – We did some initial user testing to be sure that the new interactions were intuitive to users and easily understood.

1. Personas


The first thing I went about doing was identifying the people that are most likely to use diamond search and the diamond details page. This included 3 different personas, The Browser, The Jeweler, and The Boyfriend.

I used these personas to evaluate some of the ideas that the team and I came up with and prioritize the solutions so that I could meet the deadlines provided by the business.

Diamond Visualization - Competitive Analysis

2. Competitive Analysis


I then decided to take a look at our competitors. I chose to do this in order to evaluate what they are doing in the visualization department. Evaluating their approach and making the chart below to show exactly where I would need to improve our experience in order to catch up (or pass).


3. User Flows


I built this sitemap to gain an understanding of the touch points for the user. Specifically where the new visualization would be used in the process. This wasn’t used for just this project, but for the whole visualization overhaul across the Blue Nile site.

Diamond Viz Site Map

4. Sketches


You can see the sketches that I produced from the team’s ideation meeting. These were all the ideas that we came up with based on the research that I presented.

5. Wireframes


Wireframes are the building blocks of the design. I did multiple wireframes so that the team and I could discuss the benefits of each and the direction that I though this project should go.

In the end, the wireframe that won, won because it allowed the user the most freedom to control the interaction. Framing forward and backward was a nice touch allowing the user to pinpoint imperfections within the diamond.


6. Prototype


For the first prototype, I chose to take the most promising wireframe and do a quick prototype with it so the team and I could see how the interaction would work.


7. Visual Design


For the Visual Design, I started with the wireframe and tried to align the visual style with the rest of the Blue Nile site. Blue Nile didn’t have a style already established for a media player design, so this was designed from the ground up.

Visual Design - Diamond Viz

Conclusion


I believe that I’ve accomplished everything that we’ve set out to do. In this post, you won’t find anything about the vendors. This is mainly because I didn’t have anything to do with reaching that goal.

Education is the backbone of Blue Nile, so it only made sense to add some education when selecting the new view. The business was happy with the solution I provided and I believe that overall it was a good user experience for the customer.

While there were some challenges with this project, the main UX process was relatively smooth. If I were to do this project over again, I would prefer to have a little more time to do the research. But overall, the amount of work that I was able to get through in the given timeframe was an accomplishment.