DiBraun
Time Frame: 2 weeks
Role: UX/UI designer
Tools: Figma, Trello, Zoom, Optimal Workshop, Slack, Discord
Deliverables: Mid-fidelity wireframes
DiBraun is a Venezuelan based jewelry store. They pride themselves in being a brand that caters to active, energetic, elegant and glamorous women. Their products are composed of earrings, necklaces, bracelets and more. The scope of this case study is to understand the discoverability of DiBraun’s products so users can easily find the product that they want.
From a competitive analysis, site audit, user interviews, card sorting, and usability testing, A website redesign was made and includes a new flow of the site so users can search the product based on their wants and needs. In the final product, users will be able to look for products by a new set of categories, by using the search function, and also by filtering out the products.
01. Competitive Analysis
I started the research phase with a Competitive Analysis. The main goal of my research was to understand how different Venezuelan brands allow for easy access to their products and for easy check out.
It is very important to note that Venezuela right now is currently going through an economic crisis and most businesses right now have migrated from Venezuela's currency to dollars. This is very hard for businesses because they now need to operate in both currencies since most people living in Venezuela cannot travel to open a international bank account. Most businessed nowadays function by using Zelle, Venmo or just cash. When doing the Competitive Analysis, I took this into consideration to try and understand how these different brands work around this problem
I decided to go with the 3 following brands: RSB Swimwear, PAWER, Vivian Guenoun.
Filtering: Most of the websites I visited allowed to sort by price, material, category.
Checkout Process: All of the Venezuelan websites I visited only had the option to checkout via ShopPay, which is a third-party app that can be integrated into the website for a faster checkout. The downside to this is that you need an international credit or debit card to complete the order, which excluded users who only have a Venezuelan bank account.
02. User Interviews
I conducted 5 user interviews to understand their behaviors when purchasing jewelry. What is important for them when buying jewelry? What are their frustrations? What do they like about the whole process?
It is important to note that since I am working on a Venezuelan brand, all of my interviewees spoke Spanish and were from Venezuela. Since the majority of Venezuela’s population does not speak English, it is important to cater to that specific audience.
For this project, I used a proto-persona to focus my research. Since in the landing page of the website, DiBraun talks about their jewelry being the perfect gift for someone, I decided that my proto-persona should be "The Gift-Giver"
Having that context, I went ahead with the user interviews, and the most important insights were:
Users define the budget of the gift depending on the occasion and person
Users dislike the lack of product specification, pictures, sizing guide, and reviews
Most users prefer buying jewelry online because of "quality control"
Most users stated that it is important for them to have multiple payment options
03. Usability Testing
After my user interviews, I went ahead and conducted a usability test on the original website to try and understand the user's frustrations and pain points on the current site. As I mentioned before, I tested the website beforehand to create a few tasks and scenarios for the usability test
The findings for the usability test were the following:
users were under the impression that DiBraun sells more than jewelry because of the prominent dress on the landing page image
Landing Page
users were frustrated that they were not able to search for the specific product they wanted because of the lack of a search function
Search Option
most users were unable to successfully check out since there is a lack of a cart icon on the website
Cart Icon
04. Card Sorting
After doing our user interviews and usability testing. I decided to go ahead an conduct a card sorting test with the current products of the site. The research objective of this test is to validate the current organization method of the DiBraun website. I conducted an unmoderated, open card sort . From the card sort, 4 major categories were formed by users:
Necklaces
Earrings
Face Masks
Bracelets
There was an unpredictable issue during the card sort. 4/5 users mistook some sunglass chain holders as face mask chain holders. Since the DiBraun website describes the product as sunglass chain holder, there was an extra category created dedicated to these types of chains
05. User Persona
From our research, we started our ideation phase. We came up with one persona that identified our user's wants, needs, and pain points. As I mentioned earlier, DiBraun’s current website mentions their jewelry to be the perfect give, so I decided that the proto-persona will be “The Gift-Giver”, in this project we focused on the needs, behaviors, pain points, and goals of the gift-giver when trying to purchase the perfect gift
Carla Vegas
“I want to buy the best of the best for my loved ones”
Carla considers herself to be a gift giver. She loves pampering her loved ones with gifts on special occasions. She likes giving jewelry as a gift because she considers it to be a good investment, something that can last for years
Carla when buying jewelry she is afraid of buying something that is of poor quality, she reads reviews, product description before purchasing so she can buy the best of the best for her loved ones
Needs: Easy way to find a quality piece of jewelry for her loved ones.
Frustrations: dislikes when the product description is not clear, there are no reviews, and when images are not clear.
Behaviors: judges jewelry quality based on website and pictures. Budget of the gift is dependent on person and occasion.
06. Site Map
Once we had our personas, I went ahead and constructed our new sitemap. This sitemap was built using the findings of the card sorting.
Besides adding the Shop category that was found from the card sorting. A new "Gift Category" was created based on the findings from the user interviews. Since users decide the budget of the gift based on the occasion, recipient or their own personal budget, I decided to make that even easier to explore inside the website.
07. Sketching
After the research phase, I decided sketching ideas for the visual design of the website. There are some key points I wanted to keep in mind when sketching:
Reviews, clear product description and images
Add a search function and a cart icon for easy access to products and check out
Add simple filters for easy and quick access to jewelry
Focus on the navigation design so users can have a variety of options when looking for a gift
Various check out methods due to the current economic crisis
08. Digital Wireframes
Landing Page
First we have the landing page, where I maintained a simple layout with an image carousel so DiBraun can show their most recent collections
Product Page
Then, we have a product page where there is a way to filter out and order the products based on the user's needs and wants. The user can also hover over the image and select "Quick View" for a faster shopping
Checkout Page
Because of the economic crisis that was mentioned earlier, I wanted to make sure to include the different ways Venezuelan businesses are currently accepting payment with. This allows the user to have flexibility, and to not stress with payment
09. Visual Guide
Tenor Sans was my font of choice for DiBraun because I wanted to give a sense of affordability and elegance. I wanted the font to also be able to adapt to the variety of products DiBraun carries.
The reason behind this color palette was to keep it clean and simple. DiBraun's products do not follow one single aesthetic, so I stayed in the more neutral side so the site can display the versatility of their products. I also decided to add a lavender in the footer to add the feminine side they displayed in their original site.
10. Usability Testing
After our final iteration we conducted 5 usability tests to test the functionality of our website. The following points were the key insights users provided:
Users wanted a way to create and add things into a wishlist
Users felt like the website was clean, simple and easy to navigate
11. What I learned and Next Steps
As I reflect on this project I am extremely happy that I was able to take the user's pain points in mind and create a product that allows them to give their loved ones the perfect gift
For our next steps, I will consider:
Doing another usability test with more complex tasks such as:
Try the search function
Try the filter options
Consider adding a wish list function and a create an account function
Work on the mobile version of the website