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)
4 Product Managers
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.
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.
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
With the increase in mobile/tablet traffic to the website, we need to create an optimal experience for our users across all platforms.
Improve page organization and make it easier for the mobile/tablet audience to view the site
Increase site conversion across all platforms.
Conversion Rate (CR)
Monitoring Customer Satisfaction
Increase in traffic to features and key areas
Lowered bounce rate
Shopping Cart Abandonment
Current Challenges & Business Pain Points
Manage cross-linking and redirecting of users between the two sites.
Increasing maintenance costs of having two separate front-end codebases to maintain
Future flexibility to accommodate the emerging of new mini-tablets and “phablets.”
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:
User Task Flows
Competitor Feature Analysis
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.
Collaborative brainstorm workshops.
I organized brainstorm sessions with cross functional teams to get input from partner teams. I believe that involving the wider team from the beginning, inviting them and encouraging feedback at every sketch is fundamental to minimizing silo conflicts. Through these collaborative workshops, we were able to brainstorm together, create empathy for the user & create empathy for one another. Through this, your partners will feel a part of the design process and in helping find the best solutions for our users.
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.
After funneling down wireframes, I built a lo-fi interactive prototype to use for guerilla testing. Without testing early on, we run into the following issues:
Hard to evaluate something that doesn’t exist.
Hard for users to reach to abstract concepts.
The prototype helped bring the subtleties and nuances into light. Taking the feedback, I was able to iterate and refine my design explorations.
Users seemed to have a hard time figuring out how to close the filters, so added a button and changed the labeling to “HIDE FILTERS”
Made the diamond count results visible while the user was refining their search filters.
Added contextual guidance tooltips next to labels. Extensive documentation around diamond education was available, but outside the builder tools, so making sure they could get context while staying in the builder was key.
Changed the label from “Criteria” to “Filter” due to user confusion around the original term.
Lo-fi to Hi-fi.
With an established UI style guide, I added the UI elements and components to our funneled down wireframes and created visual comps.
Our design team 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.
Getting in front of the users.
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.
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.
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.
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.