Bringing the Inconveniences of Engagement Ring Shopping to a more Convenient Place

In the late 1990s, CEO Mark Vadon was struck by the comments of friends who described their search for an engagement ring as confusing, frustrating, and stressful. As their experience mirrored his own, Vadon concluded there had to be a better, easier way to make such an important purchase, and set out to create it. In May 1999 he founded Blue Nile, the largest online retailer of diamonds and fine jewelry, with the aim to offer:

  • Pressure-free jewelry shopping, online
  • In-depth diamond and jewelry education
  • Expert guidance available by phone
  • Extraordinary customer service and support
  • Exceptional value on the highest-quality diamonds and fine jewelry
 
engagement-ring-01.jpg
 

Turning moments into memories for 15 years

Having been a part of over 150,000 proposals and named Forbes Favorite Online Jeweler every year since 2000, Blue Nile has helped turn moments into memories. For 13 years and counting, Blue Nile has been the largest online retailer of certified diamonds, engagement rings and fine jewelry. Blue Nile offers thousands of GIA and AGSL certified diamonds and provides the guidance and education to help you choose the perfect one.

Day by day, the number of devices, platforms, and browsers that websites needed to work with continued to grow.

THE COMPETITIVE LANDSCAPE AND EMERGING TECHNOLOGIES

As years went by, new competitors were popping up, new tools and approaches were being introduced to the world from new competitors. Day by day, the number of devices, platforms, and browsers that websites needed to work with continued to grow.

AppleAppStoreStatistics.png

THE EMERGENCE OF MOBILE

In 2008, Apple’s App Store launched, with 500 apps. In less than one year, the App Store was recording it’s 1.4 billionth app download. This was amazing at the time and App Store was all the buzz. By the beginning of 2010, the 5 billionth app was downloaded. Not only did the amount of app users across the board increase, but the usage of mobile browsing was beginning to increase as well. This was when Blue Nile decided that mobile was important and it was time for something fresh, a mobile version of the website and an app presence in the App Store. Due to resources and a small percentage of the customer base using mobile devices to shop, the separate mobile version of the website was designed and built as a lite version of the desktop website, offering only limited features of the fully featured desktop website. The iPhone app would mirror the mobile website with limited product and features. 

Internet trends were emerging, more users were using tablet and mobile devices. We were entering into a multi-screen ecosystem, users were more likely to consume similar content on multiple devices for different purposes.
old-bn-app.jpg
 

The Evolution of Multi-Device and Mutli-Screen World

responsive-logo-2.jpg

Internet trends were emerging, more users were using tablet and mobile devices. We were entering into a multi-screen ecosystem, users were more likely to consume similar content on multiple devices for different purposes. Within just 3 years, phones have evolved and were now much faster. In fact phones were not just phones, but fully-featured internet communication devices that had the same capabilities and performance as our desktop machines. Wtih this shift, users expect the same level of functionality from mobile sites as from desktop sites – and sometimes they expect more. They want additional functionality based on geo-location data and multi-touch. User expectations across the internet were shifting and users expected a great browsing experience regardless of what device they use – PC, laptop, tablet, smartphone, mini-tablet, or TV.

Times were changing, and Blue Nile knew something needed to be done.

In a Google study into behavior of PC, smartphone, and TV users, Google found that 90% of their participants used multiple devices sequentially and 81% used multiple devices simultaneously. Moreover 65% of shopping online started on smartphones. The same trend was beginning to show in Blue Nile’s analytics and metrics. An increasing number of first-time impressions of the Bluenile.com website were being viewed on smartphones and tablets with an overwhelming percentage being the iPhone and iPad. A limited mobile website, and a non-touch friendly tablet site just didn’t seem to cut it. Times were changing, and Blue Nile knew something needed to be done.

 

Time for us to Ask and Listen

stakeholder-interviews.jpg

First off, as someone who recently joined the company along with a team of designers with very little knowledge and time at Blue Nile, I knew we needed to be brought up to speed in order to create our plan of attack.

The stakeholder interviews helped us absorb an enormous amount of data vital to our plan of attack.

It was time for us to listen by conducting stakeholder interviews, which are a powerful way to build consensus around business goals. We were really interested in getting personal perspectives on the obstacles and opportunities that existed for this project we were undertaking. The stakeholder interviews helped us absorb an enormous amount of data vital to our plan of attack. We needed to ensure that all of our stakeholders had a shared vision, so it was necessary to conduct a series of interviews to establish the scope of a project and ensure that all stakeholders had a shared vision. Interviewing each member of the client team helped us to understand and agree upon the following:

Goals and Vision

  1. With the increase in mobile/tablet traffic to the website, we need to create an optimal experience for our users across all platforms.
  2. Improve page organization and make it easier for the mobile/tablet audience to view the site
  3. Increase site conversion across all platforms.

Success Metrics

  1. Conversion Rate (CR)
  2. Monitoring Customer Satisfaction
  3. Increase in traffic to features and key areas
  4. Lowered bounce rate
  5. Shopping Cart Abandonment

Current Challenges & Business Pain Points

  1. Manage cross-linking and redirecting of users between the two sites.
  2. Increasing maintenance costs of having two separate front-end codebases to maintain
  3. Content Management
  4. Future flexibility to accommodate the emerging of new mini-tablets and “phablets.”
 
responsive-img.gif

The Responsive Way

After assessing our stated goals and current challenges/pain points, we knew that redesigning the mobile specific site would not solve the pain points for the business. Faced with this challenge, we adopted the responsive design method in order to optimize the user experience on any possible device. The responsive approach to web design and development allows for us to produce a single, front-end code base that will seamlessly adjust the content layout to different screen sizes and optimize the user interface for a range of devices, including smartphones, tablets, laptops and desktops. We felt this approach was the best to help fulfill the stated goals given to us for the business.

…we knew that we couldn’t truly design a better experience for our online users without getting to really know them.

Hi, Thanks for Calling
Blue Nile

After making the decision and getting buy-in from stakeholders to go responsive, we were excited to get things going, but we knew that we couldn’t truly design a better experience for our online users without getting to really know them. Sure the qualitative statements and quantitative data helped give us a good starting point, but we had to understand what about the current experience was causing headaches for users and what could be improved. Unfortunately we were unable to conduct in-depth interviews with our customers, but what we did have was our Blue Nile Call Center. With a good portion of our website visitors calling into the call center and having the flexibilty to listen in on calls, we were able to get a first hand listen on user frustrations, pain points, and suggestions. By doing this throughout the entire project helped in giving us a good sample size of user feedback. At a high level, we discovered 3 main user pain points:

  1. Switching back and forth from experience to experience “I was on the mobile site, and all of sudden I’m looking at a shrunken full screen page”
  2. Limited content on separate mobile website “How come the mobile site doesn’t have the type of ring I was looking at before, do you guys not carry it anymore?”
  3. No parity between the desktop and mobile website for logged in users. “I was logged in and I added an item on my mobile device cart, but I don’t see it when I log into my home computer”

Identifying our user pain points helped us in determining user goals, more importantly, how they lined up with the business goals. But we needed to continue learning more about our users, and how they will be interacting with the site on the

Identifying our user pain points helped us in determining user goals, more importantly, how they lined up with the business goals.

Now that we had our primary user goals in mind, we set ourselves some simple goals that we wanted to achieve with our responsive design.

Speed 

Performance affects everyone.

Legibility 

Offer text large enough to be legible without pinch and zooming.

User Friendly 

Provide tap-friendly (i.e. fingertip-sized) buttons and links.

Device-agnostic 

Leave no platform behind.

Content parity 

Simplify navigation and content to focus on what mobile users want.

Future-friendly 

Cut down on overhead and maintenance.

 
old-bn.jpg

Evaluating the Current Site

Our starting point for the design was to evaluate our current existing website and to use it as a base for our responsive design. We started by speaking to some of our trusted customers about what they liked about our website, what they didn’t really like, and what was important to them when shopping. We also used analytics data from the current website and continuing listen-in with customer service calls, we were able to better understand what existing users wanted and needed from our website. As a result, we were able to streamline and prioritize a content strategy based on how our users actually interact with the website.

We created different forms of documentation to define the requirements:

  • Sitemaps
  • User Flows
  • Requirement Breakdowns
  • Use Cases
  • User Task Flows
  • Competitor Feature Analysis
  • Content Inventory

Assessing Content 

Next, we examined all of the content on the selected pages and determined the various types of content users needed — noting which types appeared across multiple pages, as well as which content was static or dynamic. We flowed the data into a spreadsheet, giving us a view all of the content needs. The project managers and content strategists reviewed and made adjustments to the content spreadsheet and determined the level of priority for each.

 

Get the Whiteboard, Pencil, and Papers Ready

 
sketches-bn.gif
 

With the site analytics, we found that the majority of Blue Nile’s mobile users were using iPhone and iPads. This knowledge helped inform the display sizes we’d focus on when developing responsive pages. Because the site was so large and is touched by many hands for different strategic reasons, we prioritized handling specific pages in particular navigation paths that would best serve site users needing a responsive experience. With all our findings, understandinns of the content types and priorities, we began collaborating with cross-functional teams and began sketching on whiteboards, and working with paper mockups of various content types and used them to help in crafting the different wireframe layouts for the different platforms.

 
 
 

FROM STATIC WIRES TO IMMERSIVE PROTOTYPES

While my Interaction Designers were busy wireframing and prototyping, I had my 2 visual designers begin working on designing core UI elements and components.  All had to work seamlessly within the overarching design theme while staying true to best practices for their respective platforms. All designs were being documented in a interactive style guide.

 
 

Ideally, we would’ve liked to have created rapid prototypes with our set of lo-fi wire concepts, but due to stakeholder request, the wires were transformed into visual comps and then turned into hi-fidelity prototypes which I created in Axure.

After user testing and surveys with users, we were able to iterate on our designs. After countless number of iterations and testing, the final designs and prototypes were ready to be coded by our talented development team and for implementation and launch.

 
 
dik-case-study-bn.jpg
 

Results

Barely making the deadline for launch, the responsive website was finally up and running by the beginning of November, just in time for the holiday season. The mobile and tablet sites saw a 26% increase in site conversions with overall conversion remaining higher year over year. It was also nice to be featured on Mashable.com:

 
 
 

Learnings

If I have one regret about this project, it’s that we didn’t engage enough with the customer service and marketing teams. That’s a tough admission—UX professionals by default want to advocate for users, and leave the marketing and sales piece for someone else to take care of later. But this, almost purist, mentality can work against us sometimes.

UX professionals by default want to advocate for users, and leave the marketing and sales piece for someone else to take care of later. But this, almost purist, mentality can work against us sometimes.

True we listened in on calls and got valuable feedback, but our lack of communication with the customer service team affected our understanding of the data. We had a small sample size of qualitative feedback, but instead of working with customer service representative who have been working with customers for close to 15 years, we decided that the small sample size we had was enough. UX specialists and service representatives need to work together to figure out what’s next and how we can make the most of the qualitative data we obtained.