UX Design & Research | Web App
UX Design & Research | Web App
Engager Rings is an online platform that that connects people to jewellers who help them design and create a one-of-a-kind custom engagement ring. Our task was to redesign the product for a better user experience. Our solution combined the functionality of their native app with their promotional website to create a web app that allows customers to have the same user experience on both mobile or desktop.
Engager Rings is an online platform that that connects people to jewellers who help them design and create a one-of-a-kind custom engagement ring. Our task was to redesign the product for a better user experience.
Our solution combined the functionality of their native app and their promotional website to create a web app that allows customers to have the same user experience on both mobile or desktop.
Client: Engager Rings
Product: Web app
Design Sprint: 3 weeks
Our Team: Me, Graham, & Sissi: UX Design & Research, Fahime: UI
We reviewed a 2017 case study by The Knot analyzing the engagement ring market. The most surprising stat was that only 1 in 3 US marriage proposals are a surprise. Many brides are helping select their engagement ring, or at least having some input. This indicated that the groom was not our sole user.
We also learned about specific pain points: 72% of grooms reported facing challenges of not knowing if they were getting a good deal (35%) and not having knowledge about diamond terminology (28%).
The Current Site
We analyzed Engager's Google Analytics to see how people are currently using the site. We learned that 63% of website visitors were women, which validated what we learned from The Knot.
We also saw that the bounce rate was rather high. The homepage (where most people enter Engager) had a bounce rate of 63%, compared 41-55% which would be considered a decent bounce rate. It was clear that potential customers were not feeling engaged (pun intended).
Getting to know the competition
There were 2 important factors we took into consideration when looking at the competition: their level of customization, and their ability to build trust among their users. Engager's customization is far superior to the competition, but their website wasn't building user's trust.
Getting to know our users
We conducted user interviews of past engager customers as well as couples who bought engagement rings elsewhere, mainly focusing on online purchases. An affinity diagram was used to organize our research and gain insight into our user's pain points.
Our 2 main users were summed up in personas. We used these personas to get to the core our our user's frustrations, needs, and habbits.
The client had initially asked us to redesign their native app and website (which was mainly focussed on directing people to download the app). However throughout the research phase, we began to question the best solution for the user.
How do users find their jeweller?
Everyone we interviewed said that they began with a Google search, so the website is where they discover their jeweller. The necessity of downloading an app is an extra step.
What platform does our user want to use?
Users indicated that they would want the option to complete the process on both desktop and mobile browser. None of our users had downloaded a native app, even when one was available for their jeweller.
What are the benefits and drawbacks of a native app?
Drawbacks: People don't want to download an app (as indicated by user interviews). Not being able to complete the process without an app download was a deterrent.
Benefits: Video chat functionality would work better on a native app than a web app.
Our Engager Proposal
We proposed that Engager Rings would be a responsive web app, allowing users to complete the process on both mobile and desktop, with a seamless user experience across devices. The drawbacks of a native app far outweighed the benefits.
With sign-off from the client, we proceeded with planning and design.
We wanted to help our persona overcome his frustrations. I created a customer journey map to visualize the main challenges we need to overcome. We looked at how to raise the low points, while ensuring we are maintaining or elevating the high points.
Turning Challenges into Opportunities
We took specific steps to raise the lowest points of our user's journey.
Challenge: At the beginning of the process our user is lost and confused by industry terms.
Solution: We would replace Engager's downloadable educational e-book with a series of pages that clearly explain the elements of a ring, with visuals.
Challenge: User is overwhelmed by the amount of options.
Solution: An onboarding quiz would ask users a series of questions to help narrow their search and steer them in the right direction.
Challenge: User is having trouble trusting the jeweller.
Solution: This was no easy task, and came with many solutions. Copy was very important in creating an emotional connection, as were images of product. In addition, we needed to showcase testimonials from past clients.
To test our mid-fi solutions we created a clickable prototype in Invision. We wanted to test with some of the same users we interviewed, but we also tested with new users who had never purchased an engagement ring, since one of our user's main frustrations was the confusion and lack of education they experienced at the beginning of the process.
Feedback: The educational pages on our V1 prototype were well received, but they felt separate from the rest of the experience. We needed to allow the user to educate themself as they explore the site. This would really address the first 2 low points from our user journey (feeling confused my terminology, and feeling overwhelmed by options).
Improvement: We divided the ring design page by category, and explained of the terminology on each page.
Improvement: We incorporated education into the "getting started" quiz by including a hover state with a description of the ring element.
Feedback: During testing we realized we weren't really hitting the emotional element. During this important time in their life, the user needs to feel an emotional connection to their jeweller.
Improvement: I wrote new copy for several pages. Since the homepage had a high bounce rate, we payed special attention to make sure we captured the user above the fold, including a CTA to get started.
Feedback: Users told us that they weren't clear on the level of customization Engager offers.
Improvement: We ensured that the new copy reinforces customization, and clarified the custom process on the homepage.
Improvement: Adding an animated gif on the about page to further highlights the customization available.
The Final Product
The Final Product
The visual elements added by our UI designer Fahimé gave Engager an elegant and luxurious feel. The below video shows the home page and "getting started" quiz.
Future development would include fleshing out the rest of the screens that were outside the scope of our project, such as checkout and remaining mobile screens. We would also like to incorporate an AR feature that allows users to view the 3D ring rendering on their hand before it has been built.
Engager has a great product, but the online platform wasn't allowing it to shine. By pivoting from a native app to a web app, I believe that Engager will have a lower bounce rate, and an easier time converting visitors into customers. My biggest take away was to focus on what is right for the user, and not be afraid to challenge the client's brief.