top of page
MacBook Pro 16_ - 2.jpg
Responsive Design

Creating a responsive website for an online jewelry shop

Scope
Nalula is a Venezuelan brand based in Miami, Florida, selling handcrafted and gold-plated jewelry. Deeply inspired by the values of women empowerment, independence, and self-love. Its founder, defines her work as delicate, minimalist, elegant, and no occasion required.
My role
UX/UI Designer
Timeline
80 hours
The Problem
Nalula mainly sells jewelry during physical events such as pop-up stores. Due to COVID-19 and its restrictions, the founder tried to revive her Instagram strategy and online content, but the results were disappointing. The reason is she was too irregular in updating her Instagram and didn't have it set up as a shoppable account, so people couldn't check out and buy her products without first having to message her.
The Solution
My goal is to design Nalula's website, meet her business goals, and showcase the brand's values. This solution would help her attract more customers and make the online process of buying her jewelry easier. 
The brand already has a strong relationship with some customers met on physical events and would like to transpose it online.
Research

Understanding the market

As I began from scratch, I needed to conduct competitive research to understand Nalula's uniqueness and its positioning. I focused the research on jewelry shops that offered a wide range of products at an affordable price.
Competitor Analysis Nalula.png
Click on Image to expand Competitor Analysis
Following this, I wanted to understand the market Nalula is acting in: costume jewelry.
Frame 1.png
There are also low entry barriers for new businesses, and 60% of the market comes from craft businesses. Instagram has seen a rising number of people selling their jewelry on their platform through "shoppable Instagram," allowing businesses to add a link to an item into their posts. These "shoppable posts" allow users to click-through these links straight to the website.
Research
Research Findings
With an understanding of the market and the context nalula acts in, the next step was to gain insight into the people I'd be designing for. I wanted to understand what women expect, want, and need when shopping for jewelry. I conducted an interview with 5 women between the ages 25 to 32, and the findings that stood out were:
Frame 2.png
With the research, I was able to identify who I was designing for, along with what needs and frustrations I should address.
Ideation

Defining the persona

With the users I interviewed in mind, I created a persona: meet Arantxa!
User Persona.png
ideation

Arantxa loves to shop online and would like to buy a piece of jewelry on Nalula's website that she once saw at one of the brand's pop-up stores.

Finding Arantxa's way of success

How should the information and products be categorized?
I identified common patterns within the jewelry online shops, and created a site map detailing how all of the products would be categorized.
Screen Shot 2022-02-22 at 9.04.59 PM.png
After defining Nalula's key pages and their content, I created the wireframes that would structure it. By referencing the websites of some competitors, I was able to apply industry-standard design patterns wherever possible.
HomePage.png
Category page.png
Product Page.png
Mobile Homepage.png
Mobile Category Page.png
Mobile Product Page.png
Wireframes
Design
Following, I moved onto the UI; I made sure to keep in mind the words the owner of Nalula used to describe the brand (elegant, minimalist, and delicate) and sought to showcase that into the website. I also analyzed some websites such as Ana Luisa, LiliClaspe and Adina’s Jewelry which are stores that sell costume jewelry. 
By testing their user flow, I was able to understand the journey of their users, see the conventions in e-commerce websites, and determine areas that I could improve over the competitors.
Here are some key points that I gathered through those evaluations and observations:
Frame 3.png
Having those elements in mind, I was able to start working on the UI. The aim: Give Nalula’s website a simplistic yet unique and modern look.
Desktop Version
HomePageUI.png
Category pageUI.png
Product PageUI.png
Mobile Version
Mobile Homepage.png
Mobile Category Page.png

A Refreshed Online Experience

Design
UI Kit Nalula.png
Validation
Validation

Prototyping & Testing

In relation to information architecture, content strategy, interactions, and visual design, I wanted to make sure that Nalula's target audience could easily understand and use these choices. To evaluate the design, I conducted a remote usability test.
Frame 66.png

Usability Findings & Iterations

Most users tested had no problem with completing the tasks. However, while observing them interact with the prototype, two of my test subjects did not approach the exiting of the zoomed-in product image as I had anticipated; this resulted in issues with the prototype, which did not have full functionality. This caused some confusion. Additionally, I received some feedback about how the checkout total could be clearer and the gift wrapping option in the shopping bag removable.
Finally, I gathered and organized my usability test findings. Based on that, I created a priority matrix to visually group and prioritize similar observations and feedback to help me iterate and implement changes effectively.
Impact_Effort Matrix Nalula.jpg
I learned a few crucial lessons about designing for clients from working directly with a stakeholder on this project. To begin with, I would ensure that all relevant information is readily available to me before I start the project. In this case, the lack of images for the website hampered my ability to design properly. Consequently, I missed a few deadlines, contributing to the late start of the project. I also enjoyed this project because the research enabled me to learn more about the jewelry industry, which I did not know much about before.

Final Thoughts & Learnings

Thank you so much for visiting my portfolio! I have some links below if you'd like to know more about me :)

Or just say 'Hello' at my email

free-mail-icon-142-thumb.png
free-linkedin-icon-112-thumb.png
bottom of page