BlingMaker
During my internship as part of my UX design education, I worked on the latest version of Schalins Ringar's ring design app RingTailor.
At the time, the company had recently started selling its own products online, but the web shop lacked a ring design solution similar to RingTailor (which is only available in physical stores). I, therefore, chose to explore what such a solution could look like as a graduation project for my two-year education.
Project type
● Speculative web shop solution
● Graduation project
● Individual project
Tools used
● Figma
● Miro
● Sketchbook
My roles
UI & UX designer
Project duration
6 weeks (2022)
What I learned
● Following your instinct and being spontaneous can produce better results than following a pre-determined plan.
● Research does not always produce results that are useful.
● The way you phrase questions in surveys is incredibly important in order to produce truthful results.
● It’s incredibly fun to draw on an iPad!
The problem
Competitors' existing online ring design solutions are often overly technical and hard to comprehend due to the complexity of diamonds and gemstones. To create a more user-friendly and satisfying experience, a new solution should be developed, making the process of designing one's own ring easier and more accessible to customers.
The challenge
In dealing with diamonds, the task was to find a compromise that accommodates users with different preferences. Some wanted a straightforward way to create rings without much reading, while others desired more information. Alongside this, meeting users' strong need for reassurance involved incorporating ample images and trust-building reviews.
How may I help customers create custom rings in a simple yet sufficiently informative way?
The solution
Based on my research, users prefer a user-friendly solution that allows them to create products without extensive reading or overwhelming choices. I designed a Lo-Fi prototype for an easy-to-understand solution with concise information for quick absorption. Additionally, users who wish to delve deeper into the topic have the opportunity to do so.
Target groups
Primary
Budget- and style-conscious people looking for the best value for their money.
In my experience, this type of customer is the company's main customer. They like to buy standard products but appreciate being able to customize them to their taste and budget.
Secondary
People with a large budget that appreciate exclusivity.
My secondary target group describes a type of customer who wants a tailor-made ring and is not easily impressed by standard products. In my experience, this type of customer is also common with the company, although not to the same extent.
Design process
1
Gain industry insight and user understanding.
Market research
Interviews
Usability testing
Competitive analysis
2
Articulate the problem and set a focused design challenge.
User archetypes
Value Proposition Canvas
01. Explore
MARKET RESEARCH
How do Swedes do their online shopping?
To find out more about Swedish online shoppers and their behavior, I investigated their current shopping habits. I focused on their online purchase frequency, motivations, preferred devices, and key factors influencing their online shopping decisions. My research involved analyzing reports and articles from the industry magazine Market, Riksbank of Sweden statistics, and surveys conducted by Klarna, a major provider of payment solutions in Sweden.
Key insights
Informative, personal & safe experience
Swedes are increasingly looking for a more personalized shopping experience with offers and recommendations, loyalty gifts, and the ability to customize products.
Concise and clear product descriptions are essential, as is social proof such as reviews and expert validation, especially for products where personal knowledge is relatively low.
User needs
● Users need to get sufficient information, both from the company and other customers.
● Users need a personalized experience that makes them feel valued.
Responsiveness is key
Mobile phones are used for the majority of small purchases and for research before buying in-store. Computers are mainly used for more expensive purchases.
Many e-retailers miss the importance of having a webshop that is optimized for mobile devices. E-commerce is generally lagging when it comes to responsiveness, and the customers are taking notice.
User needs
Users need to be able to trust that the solution will work on all devices.
INTERVIEWS
How do they behave?
To gain deeper insights into my target groups' shopping behaviors and preferences, I conducted interviews with four individuals. Three participants represented my primary target group, while the fourth belonged to the secondary target group. Through these interviews, I aimed to understand how people within these groups think, feel, and behave during their shopping experiences.
I wanted to explore:
● What participants think is important when they shop online.
● How participants behave when they shop and how these behaviors are influenced by purchases that are expensive or meaningful.
"I might do research for months if the product is special"
"I do almost all my shopping from my mobile, unless it's something significant"
"I always compare products, weighing appearance or function against price"
"It is important for me to feel that the shop is legit, as I have been scammed before"
Key insights
Feel well-informed quickly
All participants emphasized the importance of conducting careful research when making more expensive or meaningful purchases. They expressed the need to feel informed before committing to such purchases. However, they also valued the possibility of quick and spontaneous purchases for certain items.
User needs
● Users need access to understandable and relevant information.
● Users need to be able to get from start to finish quickly.
Be able to think about it
Several participants shared that they compare products with similar options before making a purchase. Additionally, they often save products as favorites and return to them later. One annoyance mentioned was when the shopping basket is automatically reset after a certain period of time.
User needs
● Users need to feel confident that they can come back whenever they want.
● Users need to be able to easily compare and save products.
Would buy anything online
All participants engage in frequent online shopping and have no reservations about purchasing expensive products online, provided the website feels secure. However, some barriers related to trying on products were mentioned, which is particularly relevant in this case.
User needs
● Users need to have as safe and easy an experience as in physical stores.
● Users need to be sure of getting a size that fits.
USABILITY TESTING
How does the main competitor's design perform?
To assess the performance of current competing solutions among individuals from my target groups, I conducted usability testing on one of them. To streamline the process, I engaged the same four participants for both interviews and usability tests. The objective was to observe their interactions with an existing solution and generate innovative ideas.
I opted for a prominent international competitor, Blue Nile, a company referenced during my internship. The testing occurred twice on desktop and twice on mobile platforms. Following independent exploration, we collectively discussed key challenges, yielding valuable insights into participants' struggles and desired enhancements. These recommendations played a pivotal role in shaping features for my own design.
Participant experience
Usability test - flow
Key insights
Problems getting started
The filters were relatively easy for the participants to use technically, both on desktop and mobile. However, it was difficult to understand what was being sorted on. Filtering often resulted in hundreds of results. The filters were at times used by the participants purely to reduce the number of results. All participants asked for some kind of guide or suggestion function to lead them further at the very beginning of the process.
User needs
● Users need to be guided through the process.
● Users need intuitive and straightforward filter functions.
Difficulties in absorbing information
The information boxes were difficult to understand, although the user appreciated their existence. The amount of textual information on the pages was overwhelming. The text was also too small in many cases. The different characteristics of the diamond were difficult to relate to what the user was looking for. None of the participants felt compelled to look for more information on the help pages.
User needs
Users need to have access to easily accessible information adapted to their level of knowledge.
Sufficient product images are essential
Only two of four participants spontaneously moved on from the filter part itself, one on each solution. The two who proceeded to the shopping cart and checkout found the lack of images of the final product unacceptable. None of them had gone ahead with a purchase, largely due to a lack of images.
User needs
Users need sufficient images and other visual evidence of the quality and design of the product.
REFLECTIONS
Lessons learned from testing
After the usability tests, participants were also asked to complete a short survey, in order for me to collect some quantitative information. However, I noticed during the completion of these surveys that I had not been able to express myself accurately enough in the questions, even though I had done research on how best to formulate myself. I, therefore, chose not to include this information, as I could immediately see that the responses did not reflect the experiences of the individual participants. It was clear that some questions had been misunderstood. I realized that I need to explore further how to formulate questionnaires! So it was a good learning experience if nothing else.
COMPETITIVE ANALYSIS
How do other competitors work?
I wanted to see if there were other companies on the market whose solutions were more in line with what my participants expressed they wanted.
I found two companies that I chose to include in my analysis: CustomMade and Brilliant Earth. Both companies have embraced a more visual and playful approach to allowing customers to create their own rings.
I analyzed these solutions to see what strengths and weaknesses I could find. I did not find any Swedish companies providing a service for this purpose, however, I did find several international sites shipping to Sweden. Given my findings that Swedes prefer to shop domestically, my conclusion was that there is a gap in the market for a Swedish solution to fill.
CustomMade
This company has adopted a slightly different approach than other competitors. The solution consists of a very detailed step-by-step guide, which is something several of my test subjects wanted, but it lacks online features.
The guide leads customers through a large number of questions, including the clothing style for the recipient. One thing that bothered me was the process felt long. Presumably, this service targets customers seeking something completely unique. The question is whether that group is large enough.
THUMBS UP
-
Very guiding and helpful
-
Clearly adapted for mobile
-
UI without too much text
-
Low risk of cognitive overload
THUMBS DOWN
-
No online ring design feature
-
Few contact options
-
The process feels excessively long
Brilliant Earth
This solution is simple and fun to use, with a stripped-down and beginner-friendly interface. However, the interface lacks basic information.
The selection process for diamonds is a single long list, not very user-friendly. On the other hand, the visualization features are fun and useful, providing instant visual representation of choices through 3D solutions. In-depth information pages on stone characteristics and other relevant details are available, for those who want extensive information.
THUMBS UP
-
Final result visualized
-
Fairly simple UI
-
Visual experience
-
Many different options for customization
THUMBS DOWN
-
Lack of easily accessible information
-
Difficult to get an overview of the results when filtering diamonds
02. Define
USER ARCHETYPES
Who am I designing for?
In order to have concrete reference points for my work, I identified two user archetypes from my research material. I sorted relevant information into an affinity diagram, revealing two archetypes: the Ponderer and the Swift Shopper.
Since I conducted interviews and usability tests with the same participants, I could draw information from both sources to define my archetypes. This provided a deeper understanding of the different types, as I observed the participants' behavior "in action".
VALUE PROPOSITION CANVAS
What do I need to offer?
As a next step, I felt that I needed to clarify and explore more on what my solution should look like. Using the Value Proposition Canvas as a tool, I wanted to concretize what my solution needs to offer in order for people in my target groups to find it (at a minimum) useful or (at best) a joy to use.
Another purpose of the VPC was to map and clarify concerns and problem areas, in order to identify a suitable remedy. As I was working under some time pressure, I chose to do a combined mapping for both target groups.
03. Ideate
IMPACT MAP
What features should be prioritized?
Once I had a good idea of what my service needed to offer, I wanted to flesh out in more depth what this offer should look like and what features needed to be prioritized. I lacked experience with impact maps during my education, making this a valuable learning opportunity!
I focused on user experience and visibility as impact goals for the project, prioritizing "the Ponderer" archetype over "the Swift Shopper" due to their harder-to-satisfy needs. The visuals can be improved later, but information architecture and reassurance features are essential from the beginning.
SKETCHES
How do I convert all this information into a design?
Equipped with a better understanding of which components and features were important to apply in my design, it was time to start sketching! I started by quickly sketching various ideas on paper for efficiency, preventing excessive attachment to discarded designs.
My sketches emphasized the primary layout and intricate features. I drew inspiration from various web shops, both within and outside the jewelry industry, to guide the design of components and elements. My main concern was adhering to the user's mental model of how different digital experience elements should appear.
04. Design
LO-FI PROTOTYPE
What should it look like?
After a number of sketches, I started to put together an idea of how I wanted to lay out my design. In a live project, I would definitely have tested the usability of my sketches first, before moving on to the prototype phase. This would allow me to filter out less good or poorly thought-out solutions at the very beginning of the process. However, in this project, I was working against a tight deadline as it was my graduation project, which meant that I had to continue my work based on the insights I had gained so far.
Icons
To improve clarity in my Lo-Fi prototype, I decided to incorporate a few icons. I sketched the icons using Sketchbook on an iPad, allowing me to visualize key elements and make the prototype more understandable for users.
Solution
STEP 1
Browse & filter
The user starts by selecting the setting of the ring, to make it as easy as possible. On the home page of BlingMaker, the user can choose to browse through categories of settings. This is especially helpful for users who don't really know what they're looking for, which was the case for at least one of my usability test participants.
In the filtering, the user can choose to filter by different setting types, price, and metal colors as well as other properties. The results can then be sorted by most popular, newest, cheapest, and most expensive to simplify browsing.
STEP 2
View setting
The product page presents essential setting information and offers multiple visualization options for an accurate product overview. Social proof elements like reviews and customer photos, identified as crucial in both analysis and user research, are included. A "similar setting types" feature aids customers in finding styles that match their preferences, streamlining their search process.
STEP 3
Customize ring
As the user customizes the setting, available options appear within a reasonable range, with the price always visible at the bottom. A feature to expand the price box for detailed information is provided if needed. To simplify stone selection, a five-point scale for stone quality is offered, with additional details available upon request.
Brief informational texts are included under each category to address usability concerns highlighted by the usability tests (excluding metal color). This ensures a smooth and straightforward customization process, avoiding technical overwhelm.
STEP 4
Complete ring
In the last step before checking out, the customer is asked to fill in information about the ring size and possible engraving.
Product images are included at each step of the process so that the user doesn't have to go back and remind themselves what the ring looked like. The price box is also included in this step to give the user an easy overview of each step of the process.
Final thoughts...
As my graduation project, I had to adhere to strict boundaries, with some mandatory activities and others chosen from a predefined list. Initially, I created a project plan, but it quickly proved unsustainable as some activities felt irrelevant. Instead, I relied on my instincts as a designer, adapting and focusing on the most relevant activities as the project evolved. This flexibility was challenging due to the strict framework, and the outcomes didn't always match my expectations.
Being someone who usually sticks to plans, I learned the importance of rethinking and quick thinking during this project. Despite the difficulties, I managed to develop a solution that I believe is worth further exploration and development.