Blue Ruby Case Study

UX/UI (Not Affiliated with Blue Ruby)

Blue Ruby – UX Case Study


This case study illustrates my UX mindset when faced with a website that could benefit from a redesign.  1 class where we got to pick a company that had a poor site design.  Blue Ruby has 11 locations in Vancouver, I believe it’s important to modernize their website and include e-commerce to their site, so Blue Ruby can increase their sales and brand recognition. This case study looks at their current site and focuses on user centered design to improve the website for a well recognized jewelry store.



UX/UI Designer


Photoshop, Figma, InVision


01. Analysis

This stage includes Third Party Analysis and Concept Mapping to set a foundation for the redesign.

02. Empathy

This stage includes identifying pain points, user arche- types, journey mapping, and task analysis to under- stand the user.

03. Ideation

This stage is where the design of the new website is born. Here we make paper prototypes and wire framing to see what the new site will feature.

04. Design

After the wire frames are complete, its time to make the design come to life! Hi fidelity prototypes and the style tile what the new site will look like.

04. Review

The hi-fi prototypes were tested using inVision.

02. Empathy

Learning about user experience and the guidelines to good web design has made me realize that the success of an online store can be hugely dependent on how user friendly their website is. Nowadays, it’s fundamental to have a website that people can come learn about your company, products, and contact information with ease. In recent years, we have seen a major shift in consumer behavior. Previously, brick and mortar stores were the go-to to find what you were shopping for and the online existence wasn’t important. Fast forward to today, malls are becoming a thing of the past and we shop with our fingertips on our smartphone screens.

For this project showcase, I am going to focus on the 02. Empathy portion of the case study.

Pain Point 1.

Landing Page

When the webpage opens, the first thing you see is a large gallery of four photos that cycle through. There is no call to action or any words. Does not look like a website for a store, it resembles a photographer gallery/portfolio site.

Pain Point 2.


The navigation bar looks like plain text. There is no contrast and it is hard for the user to identify you can click on it.

The footer navigation is the same as the global and it looks like text. The Contact page should not be at the bottom, it should also be at the top.

Pain Point 3.

No E-Commerce

No online store, people coming to the site have the expectation that there is a product gallery of what they have in store. The “Designers” page has a long list of designers they have. You can’t click on the designers or see what they’re jewelry looks like.

Pain Point 4.


There isn’t a lot of written content on the site. The content that is written for the “Jewel Box” doesn’t really serve any purpose to the user. Also, the site hasn’t been updated since Novem- ber 29, 2019.

User Persona

Customer Journey Map

After I created an ideal user, I created the process an ideal user would take when using the redesigned website. After I knew what steps a user would take, I created a customer journey map. I made 5 versions before my final one because I felt there was still room for improvement. I didn’t realize until I exported the last version, that the “aware” section was accidentally deleted, so I had to redo it. Which was a good learning experience to always triple check my work!

Peers reviewed my customer journey map and identified that I had two stages which were similar but named different. Once I had input from them, I went back to the drawing board and created the final one which has 11 steps in the journey map.

This project was a great opportunity to redesign a website and create a good user experience for an ecommerce site. I enjoyed putting myself in the position if I was a user visiting the site mixed with what we learned in class about user centered design.


The case study for Blue Ruby was great to have a hands on experience to get a sense of what it takes to redesign a website and brand. I learned a lot from this case study and how crucial human centered design is.


Personally, the greatest learning curve was building the high fidelity prototypes that were imported to inVision. It’s an incredible interface to test out your design as it acts exactly like it would on an iPhone. I ended up revising my prototypes a few times after the peer test and I learned firsthand the wise words of Steve Jobs how “design is not just what it looks and feels like. Design is how it works”. When I tried to create a new interaction for choosing what category to shop by, it was more for the aesthetic rather than how it worked. I learned it’s best to keep it simple when designing for the mobile web.

05. Design & Test

Blue Ruby Mobile Home Page Design

Check out my Invision Testing Here

Want to bring an idea to life? Let’s make it happen. Reach out here.