Aran Jewels, an accessories brand, contacted me to help them provide a new web-shop and branding design to promote the brand, attract new clients and enhance the traffic through Instagram and other social media channels. For this challenge, I counted on the great experience of Jess, the Aran Jewels' CEO and marketing expert, and Victor, a top-notch software and front end developer.
The team:
Victor Martínez: Software Developer
Jéssica Martínez: CEO/ Marqueting
Aida Nogués (me): Product owner, Product Designer and Researcher
The timeframe
We finished the design phase in 2 months
About the company and goals:
Aran Jewels is a jewellery and accessories brand owned by Jessica Martínez. Jess started her business when she got pregnant with Aran, her first daughter. During her pregnancy, she started to design and build different purses and rings and started selling them in street markets. What started as a hobby that maintained her busy during pregnancy became something more serious when she found out her products had more and more demand.
The brand operates in Girona but sells internationally, and the primary revenue channel is direct sales via social media. This means the seller is the one in charge of the stock, product updates, and customer support.
Our success metrics for the project are to increase conversion by 25%, reduce cart abandonment to a 50% rate, and, secondarily, increase average order value.
The challenges
Aran Jewels had some challenges to overcome, and so did we as product leads if we wanted to help the business succeed in a competitive industry such as jewellery.
Branding and social media presence:
The presence of social media on the web was key. The web didn't have any place that connected with other customers' experiences or how their pieces look on them. The presence of Instagram gives veracity to the website and adds up trust, engagement and conversion rates.
Branding and social media presence:
The presence of social media on the web was key. The web didn't have any place that connected with other customers' experiences or how their pieces look on them. The presence of Instagram gives veracity to the website and adds up trust, engagement and conversion rates.
Webshop experience personalization and budget:
Aran Jewels had an online shop already but it was time to change. The design felt outdated and did not match with the marketing photos, the campaigns and the tone that the company was looking for. The shop needed to be very visual, inspiring and very easy to shop in, of course.
Aran Jewels had an online shop already but it was time to change. The design felt outdated and did not match with the marketing photos, the campaigns and the tone that the company was looking for. The shop needed to be very visual, inspiring and very easy to shop in, of course.
The solutions
Faster impact with a new social media presence:
I gathered market data from competitors and went through Maruja's Instagram page to identify potential personas. I also interviewed the founder to understand the values she wanted to share and why Aran Jewels existed. We had a workshop based on brand discovery exercises I created, which has helped me understand a brand's goals numerous times.
After I had all the data and her input, I created two identities so the founder could choose. Both were rooted in values like optimism, and simplicity. Each option had a logo, a colour palette, typography, and applications.
Webshop experience:
While I was tackling the competitor research and interviewing users to create personas and user journeys, the developer worked on tweaking some backend code to make the experience much better. We used React using Next.js and a new CMS.
Setting up the project:
I took the role of product owner and prepared a Notion document to keep track of our tasks. As I mentioned before, I partnered with Camille, an amazing product designer I have the pleasure of helping in her design journey. She's a super-fast learner and one of the most passionate designers I've ever worked with.
We worked closely with development on the same Notion project to be aligned on time and deliverables. I planned the steps and methodologies, and we divided to conquer. Camille would focus on the research, modelling, and wireframing areas. I would support her with planning, feedback sessions, and facilitating workshops and interviews. I would, later on, focus on the interface design and handover.
1. Research phase
We knew the aim was to change the website for the better, but we didn't know the how and what yet. Our tasks were:
• Interviewing website users: We conducted 5 interviews via Skype and analyzed survey results. I scouted participants based on the user's description from the founder. This was crucial information to use in the modelling phase, and Camille did a great job debriefing the interviews.
• Competitor analysis: We used these findings to see how similar brands were succeeding and how we could be different.
• Visual exploration: I started exploring interface design possibilities to adapt the branding guidelines to digital assets.
• Interviewing website users: We conducted 5 interviews via Skype and analyzed survey results. I scouted participants based on the user's description from the founder. This was crucial information to use in the modelling phase, and Camille did a great job debriefing the interviews.
• Competitor analysis: We used these findings to see how similar brands were succeeding and how we could be different.
• Visual exploration: I started exploring interface design possibilities to adapt the branding guidelines to digital assets.
2. Personas and User Journey
• Building personas: We found that Aran Jewels have two types of personas, based on the research insights. Our primary persona, though, was Ruth, the Practical shopper. Her goal is to effortlessly shop online for trendy jewellery and accessories and effectively compare products while she does that. Her budget is not high, and she usually buys from big online companies like Asos, although she also likes to search for more unique and affordable pieces.
• Building personas: We found that Aran Jewels have two types of personas, based on the research insights. Our primary persona, though, was Ruth, the Practical shopper. Her goal is to effortlessly shop online for trendy jewellery and accessories and effectively compare products while she does that. Her budget is not high, and she usually buys from big online companies like Asos, although she also likes to search for more unique and affordable pieces.
3. User stories and recommendations to start the design
Now we had a good idea about who our users were, what they needed and why we needed to improve the online shopping experience. It was time to start exploring options based on the company's goals and the user's needs. We did that by working together in Miro and creating a map to see our users' patterns. Once we had all the results we could start comparing answers, creating groups and categories and prioritizing goals. We used this exercise to learn:
• How might display the items so the user has fewer doubts when shopping?
• How might display the items so the user has fewer doubts when shopping?
• How might we show trust to the users?
• Where do persona goals meet business goals?
• Where do persona goals meet business goals?
Affinity mapping of the results of online interviews: This was transformed into the project's navigation and main content blocks.
Site map and architecture
The website has a lot of different categories, items and screens and the challenge was to organize those seamlessly for our users. By designing a simple site map, we could see the steps the user had to take to access the checkout and how the different content related to the rest of the pages. It also gives us a comprehensive and visual way to understand the actions needed by the user while navigating.
Based on the workshop's results, we diagrammed the AI and the components for each page.
4. Wireframes and user testing
Once all the wireframes were in place, we wanted to test different things about our designs, like the UI components (buttons, help text, icons) and also the main flows (purchasing flow, support, discoverability of products).
From conducting usability testing on the wireframes, we learned we needed to add the care, materials and shipping information closer to the product description. We optimized also the purchase flow, adding more details to the shopping cart and the shipping options at the end. On the positive side, the support was well-understood and well received and the users were able to complete all the core tasks.
5. Mockups and UI design
We wanted to simplify the visuals for Aran Jewels and propose a design that highlights the products above all. That's why the primary colour is based on shades of black. For the secondary colours, we opted for pastel colours, a soft palette that matches the branding personality.
Once the main UI elements were decided, I started building the screens, for the web, tablet and responsive web.
Details of the main UI elements for Aran Jewels
Web screens for the main page, the ring page and the editorial page
Mobile screens for the About page, Rings' page, Hamburger menu, Product detail page, Newsletter pop-up, Client page and shopping list page.
