DetailsPage_Small-Preview

Blue Nile - Product Page Modernization

This project was a personal project that I was doing to try to help myself envision where I think the product pages for Blue Nile should go. This was an exercise I did in my free time that allowed me to remove the guard rails and produce a page that I felt was best for the user.

www.BlueNile.com


Goals


  • To make the product details page more consistent across all products.
  • The solution needs to simplify the product pages.
  • Mobile First

Constraints


  • Personal project, nothing is off the table.
  • Must be responsive.
  • Must use the same data currently available on the site.

Process Overview


Process Image

Preplanning


Preplanning a personal project is always a challenge but this mainly included research.

  • Personas – I first took our standard personas and identified which users are the main demographic for diamond details. There are three main personas for product purchasing.
  • Competitive Analysis – I then went and looked at competitors both in the jewelry industry and outside to identify elements that Blue Nile should consider on the product pages.
  • User Flows – I then identified all of the different types of product pages and where they fell in the user flow.

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.

  • Wireframes – I did a rough wireframe of what I was thinking before jumping into my visual design.
  • Prototype – Usually I would do a wireframe prototype at this phase, but since it was a personal project I chose to forgo this.

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 based on the wireframe.
  • Hi-Fi Prototype – I then went into producing an interactive prototype.

Test/Verify


I decided to show this and get feedback from people outside of the organization to see how the new page was perceived.

  • Feedback – I received direct feedback from potential customers by doing user testing.
  • User Testing – I did some gorilla user testing to quickly see if users understood the basic interactions of the page and see where they had issues.

Process Overview


Process Image

Preplanning


Preplanning a personal project is always a challenge but this mainly included research.

  • Personas – I first took our standard personas and identified which users are the main demographic for diamond details. There are three main personas for product purchasing.
  • Competitive Analysis – I then went and looked at competitors both in the jewelry industry and outside to identify elements that Blue Nile should consider on the product pages.
  • User Flows – I then identified all of the different types of product pages and where they fell in the user flow.

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.

  • Wireframes – I did a rough wireframe of what I was thinking before jumping into my visual design.
  • Prototype – Usually I would do a wireframe prototype at this phase, but since it was a personal project I chose to forgo this.

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 based on the wireframe.
  • Hi-Fi Prototype – I then went into producing an interactive prototype.

Test/Verify


I decided to show this and get feedback from people outside of the organization to see how the new page was perceived.

  • Feedback – I received direct feedback from potential customers by doing user testing.
  • User Testing – I did some gorilla user testing to quickly see if users understood the basic interactions of the page and see where they had issues.

1. Personas


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

I used these personas to evaluate the solution and to help me find users to help test. These three are the main personas for me, they are often the targets of our tests as they represent the different users that utilize Blue Nile’s site.

Competitive Analysis

2. Competitive Analysis


I decided to do a feature competitive analysis to evaluate what our competitors were doing well and to envision ways that are product page could surpass our competition.


3. User Flows


This user flow was to understand where the user was coming from when entering a product page. With a site as large as Blue Nile’s there was no way to document every page that enters a product page, but I’ve documented the main touchpoints that do.

4. Wireframes


I only did a single wireframe for this project. It gave me the basic look I needed in order to move forward in the process. I did some revisions within the wireframe step, mainly in the mobile version, but the overall look and feel was set.

I goal of this wireframe was to clean up the details page. I think overall it did that, there were some minor tweaks I made when I got to the final visual design stage, but for the most part the wireframe set up a successful visual design.


5. 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. However, I did make some adjustments that I felt would open up the Blue Nile style and produce more whitespace. This allows the user to focus on specific areas of the page (that I’ve defined) and gives the page a much more open feel which I think translates to more trust.


6. Hi-Fi Prototype


For the Visual Design, I started with the wireframe and tried to align the visual style with the rest of the Blue Nile site. However, I did make some adjustments that I felt would open up the Blue Nile style and produce more whitespace. This allows the user to focus on specific areas of the page (that I’ve defined) and gives the page a much more open feel which I think translates to more trust.

Conclusion


The idea behind this personal project was that I wanted to simplify the product page. I think overall I’ve accomplished my goals. It’s a clean version of the same information on the current page just laid out in a more clear way for ease of use. I would need to test this more in order to fully understand where this page falls short, or where improvements can be made.