bn-03.jpg

Blue Nile

Responsive Redesign

INTRODUCTION

During my time at Blue Nile, I led the company to leverage responsive design that would allow users to view the website on any size screen and any platform. The company had previously considered an adaptive design framework, but ultimately it did not meet the company's needs and didn't position the website to deal deftly with new developments in the tech world, such as next generation view ports. The redesign also proved to be a leg up in the global market, since Blue Nile ships to more than 40 countries.

Team + My Role

  • Lead UX Designer (me)
  • Lead Visual Designer
  • 2 Visual Designers (Contract)
  • Content Strategist
  • 4 Product Managers
  • 8-10 Developers

My role on the team as the Lead UX designer was conceptualizing and designing the UX for the web/mobile products, provide UX leadership, direction on research/testing/design guidelines, approve all deliverables for UX team before going to my director, and owning the administrative side of all UX project deliverables,


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.”

bn-02.jpg

THE COMPETITIVE LANDSCAPE AND EMERGENCE OF MOBILE

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.

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.png

RESEARCH & DISCOVERY

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. We interviewed: 

  • VP of Marketing & Strategy
  • VP of Technology
  • Director of Creative Services

I also obtained quantitative data through accessing the analytics metrics showing that mobile traffic had increased from Feb 2011-2013. Also saw logged in users shopping sequentially through 'Add to basket' on mobile and desktop.  We also did a competitive audit with a main competitor. 

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.”
Screen Shot 2018-06-11 at 1.58.51 AM.png
Screen Shot 2018-06-11 at 2.03.06 AM.png
Screen Shot 2018-06-11 at 2.03.23 AM.png

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.


ASSESSING CONTENT AND REQUIREMENTS

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

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.


WIREFRAMES

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.


USABILITY TESTING

Using the hi-fidelity prototypes, I conducted tests through Usertesting.com along with guerilla assessments. It was relatively inexpensive for multiple tests and provided qualitative data. 


DESIGN SPECS

I created design spec docs providing the tech teams the CSS styles and all other definitions to accelerate the development phase and reduce coding time. Also worked with content strategy, image production specialists, marketing & analytics teams in creating content inventories to list all information assets for the website, also providing icon and visual assets.


Screen Shot 2018-06-11 at 12.02.03 AM.png

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. 

Blue Nile also more than doubled the number of customers using its education section via smartphone. The education section, filled with breakdowns of diamond lingo and other information, is an essential step in the buying process.


WHAT THE PRESS IS SAYING


dik-case-study-bn.jpg

LEARNINGS & TAKEAWAYS

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.

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.

dik-sig.gif