This week our challenge was to create a online store. First we think of an online store for a restaurant but it ended up not working because the owner of the restaurant was busy so we decided to design an online Jewelry Store.
Problem
Due the situation of the Covid-19 pandemic, measures have to be taken to prevent the pread of the disease and for public security reasons the country almost stoped and the stores were close. A solution to this problem would be to open an online busines
Goal
Our goal was to develop an e-commerce platform for Jewelry shop to help their business succeed and if possible increase sales.
Client
Our client has a Jewelry store, her goal is ti open an online Business.
Interviews
Design process: Empathize
So we proceeded to interview the owner.
Some of the most important questions were:
- What is the direction that you would like to see for your shop?
- What is the concept you want to pass through the website?
- What are your best selling products?
Insights
The main points we took from the interview were:
- “Invest in an online shop to increase sales.”
- “At the moment the company only has instagram and it’s where most of the company sales come from.”
- “Top sales are: Anel Granitos and engagement rings.”
Surveys
Design process: Empathize
To complement the interview we’ve done a survey to gather some user data. From this point on we tried to focus our attention on man. They were a considerable part of the companies clients and they are not usually the common target on jewellery market.
- The age range from where we got more replies was between 21–40.
- The majority buys jewellery.
- Half of the man who replied only buys jewellery in special occasions.
- 75% prefers to buy in store than online.
Insights
From here we could already start to notice that probably we would have to focus our attention in pursuing man to buy more jewellery online and provide them the best service they could get.
Competitive Analysis
Design process: Empathize
To contextualize the company in the jewellery market, we did some research on competitor brands.
Insights
- We could verify that all businesses are turned toward woman.
- There are few business turned to engagement rings.
- There are few brands that do costume made engagement rings.
Persona
Design process: Empathize
To gather all the data we’ve collected from users and form the client we though it was crucial to create a persona. We’ve decided to go forward and focus completely on the experience of men buying jewelllery.
We’ve created Xavier, he focus a lot in detail and hates wasting time.
INFORMATION ARCHITECTURE
It was time to organize, structure and label content in an effective way.
Site Map
Design process: Define
We’ve started out with the basics that a jewellery website should contain and organized it. This is our first version, but throughout the project he had to update it until it became the final version.
Insights
I think doing the site map was the first time where I was actually Failling Fast. Through Card sorting and brainstorming we had to come back a couple of times to change the structure of the website.
Card Sorting
Design process: Define
We provided potential users topics so they could organize them into categories in a way that make sense to them. This was we could understand their expectations and comprehension of the topics we provided to them.
Insights
Here I could understand that what makes sense to me might not make sense to the user. So it’s crucial to go through this process since we are not our users.
User Flow
Design process: Define
A map that defines how the user can accomplish a task was created. It is useful to meet the needs of our target users, as well as the needs of the business. Since it was the first time we were creating one, we’ve decided to stick with a happy flow with a simple task, purchasing a product:
Use Case & Scenarios
Design process: Define
A list of reasons to why people would visit the website we’re designing was created.
We focused on:
- Make purchase.
- Confirm the information that a product has ecological attributes.
- Have a look on the lookbook to get inspired.
- Fiance wants to invest in a local brand for his wedding ring.
From here we created a written description of how users would perform these tasks on our website in a sequence of simple steps. It begins with the users goal and ends with that goal being fulfilled.
Insights
It was very useful and important to list these scenarios, since then we had clear the points we had to focus on when designing the website. It helped us anticipate the users behavior and to be aware of which frames are necessary to build.
Ideation/ Brainstorm
Design process: Ideate
As a group we brainstormed all the possible solutions to the problems we want to solve. We proceeded to vote on a specific one that we wanted to cover and work on deeply.
Ideation/ Brainstorm
Design process: Ideate
As a group we brainstormed all the possible solutions to the problems we want to solve. We proceeded to vote on a specific one that we wanted to cover and work on deeply.
Ideation/ Brainstorm
Design process: Ideate
As a group we brainstormed all the possible solutions to the problems we want to solve. We proceeded to vote on a specific one that we wanted to cover and work on deeply.
As shown above, we’ve decided to approach and work on an easy and intuitive way to buy a wedding ring, especially for men. A customized online help.
Wireframe
Design process: Ideate
To give shape to our idea we started sketching and transforming it into reality. Below is a simple sketch of how more a less we organized and defined the information hierarchy of our design in order to make ir easier for the user to process the information.
Prototype
Design process: Ideate/test
From the wireframe we created a first version of the mid fidelity wireframe.
We’ve tested out with target users and notice that we had to make a couple of changes:
- The red color was calling too much attention of the user, distracting him from his main task. We changed to grey.
- We added a logo, so the brand would look more perceivable.
- Some alignment were perfected.
- Since we noticed the users were predominantly going towards a button, we decided to transform it as ou call to action.
Mock Up
Finally we did a mock up
