top of page
Ebra mockup.png

 Ebra studio

Responsive web design for an online order jewelry 

What is Ebra studio?

Ebra is a conscious jewelry accessories brand, defined by elevating traditional crafts and focused on quality, sustainable materials, and women empowerment, based in Canada. Farimah is the owner's and She design minimal silver jewelry and decorative silver artifacts in her studio. She acts on Instagram and wants to expand her business from a local business to a national business for best marketing and sales.

What is The status of the project?

Design Ebra studio website with mobile. The final prototype and wireframe were delivered to the client.

Project Overview 

Challenge :

The design task mentioned that this shopping process should help users with easy order, intuitive user experience, and easy accessibility. 

Solution :

1- Minimal Design for a sustainable handicraft jewelry website

2- Emphasis on artifact design order

3- Easy access to information and details products

4- Select specific icons and spaces for accessibility 

Project
Website & Mobile Design 
Responsibilities
UX Research, User Testing,
Interaction designer

Timeline
Three weeks
Tools
Figma, Adobe Photoshop, Zoom, Miro
Team
Two Designers

The Process

Screen Shot 2021-06-11 at 10.04.21 AM.pn

Discover

Define

Develop

Design

Deliver

Business analysis, Business research

Comparative analysis, Competitive analysis

Persona, storytelling

Information Architecture, Sitemap, User flow

Ideate, Sketch, Mood-board, User testing, UI kit

Clickable prototype

Discovery

Business Analysis

  • Production of handmade jewelry in Canada

  • 4 years of experience 

Stakeholders Interviews

We had several meetings with stakeholders and were exposed to lots of data about her studio, idea, favorite items, users, material, bought, time, delivery process, and every detail we need to use on our website that helps improve their business.

"I like minimal design, and prefer

to be inspired by nature and

geometric shapes"

Offering 

  • Design and manufacture of silver and brass jewelry

  • Design and craft every special handmade artistic idea...

  • local branding and women-owned business

Screen Shot 2021-06-11 at 9.48.28 AM.png

User Interviews 

We conducted field research, interviewed three key users, talked about their experiences buying jewelry and the problems they encountered understand how to start our project with a good overview of sustainable jewelry, branding, marketing, and helping users to have a special simple order process .

Key user interview insights

businesswoman-using-laptop-talk-colleagu

1- Jewelry categories for faster and easier selection

2- Having quality photos of jewelry from different 

     angles and detailed information about it

3- User reviews about jewelry can be very helpful in 

     choosing and trusting

4- If the web design is crowded and unclear, I will 

     leave the site immediately

Competitive Analysis

We compared more than10 websites and then analyzed most common features they used in different pages and then we selected all features we need in our website based on our research .

Screen Shot 2021-03-18 at 1.52.59 PM.png
Screen Shot 2021-03-17 at 1.37.40 AM.png
Screen Shot 2021-05-14 at 11.45.32 AM.pn
Screen Shot 2021-06-11 at 10.29.45 AM.pn

Why side-by-side landing page comparison ?

-Learn with features were the most common on the home page

-figure out how other jewelry present their products 

Define & Analysis results

Understand the business (SWOT) :

My next step in my methodical approach is always to learn and define the business and make sure that I know business was SWOT, which is strengths, weaknesses, opportunities, and threats.

Screen Shot 2021-06-11 at 11.51.56 AM.pn

Comparative analysis results :

  • Use clear photos of the product in several angles along with the price

  • Separate section to show the latest designs

  • Information about the manufacturer and the production process

  • Product categories for faster and easier selection

  • Connect to Instagram for more reviews and acquaintances

  • Easy access for people with disabilities by using the accessibility icon

Card Sorting 

Screen Shot 2021-06-14 at 10.24.15 PM.pn

Define

The website will be designed based on Faranak's need to buy a ring.

Screen Shot 2021-06-14 at 10.23.53 PM.pn

Meet Faranak :

Faranak is a 25-year-old girl full time student .

She is interested in handmade jewelry.

She supports local branding and women-owned business

She is always searching new trend jewelry and accessories

Develop :

We develop our idea to start our design process . For developing the idea we considered a scenario to our Franck’s needs, and we conducted the Story-board  to show her journey through the website .

User's Needs :

Affordable prices

Good quality and design jewelry

Easy order and maintenance

Solution :

1-Locate price and Information under each page

2-Showing different views from each product

3-Design easy and fast order process with sale information 

Screen Shot 2021-06-15 at 11.06.40 AM.pn

Develop

Site Map

Given that this was a jewelry website that offering handmade sustainable jewelry, I proposed a sitemap incorporating core content for ordering a product until the final payment.

Screen Shot 2021-06-15 at 9.10.43 AM.png

User flow

Screen Shot 2021-06-14 at 11.19.11 PM.pn

Site Map

Design 

Low Fidelity Wireframe 

A challenge I faced was figuring out the which space is suitable for an artifact order section and how to get the user's attention.

Screen Shot 2021-06-15 at 11.12.02 AM.pn

Iterations Learning 

1- We emphasize on particular artifact product as a specific banner but users couldn't understand they could order from here on the first design, so our solution was to move the banner from here to categories product and let to desired results.

Screen Shot 2021-06-15 at 11.28.49 PM.pn
Screen Shot 2021-06-15 at 11.35.34 PM.pn

2 -The accessibility button wasn't clear, and it had more features, so our solution was:

-Design and change icon color

-focus on four essential accessibility features

-Write accessibility name beside icons

Mood-board 

Brand design has been done concurrently with wireframe iteration. I gathered logo and brand requirements from the client and sketched out several concepts. We went through three feedback and iteration sessions before deciding on a final design.

Screen Shot 2021-06-21 at 10.35.50 AM.png

Moodboard imagery was developed with our team based on client style and our ideation.

UI Kit

The final style design brings together UI elements that dictated the high-fidelity designs.

Screen Shot 2021-06-22 at 9.39.24 AM.png

Reflection 

Looking Forward 

Our next steps are as follows:

1- Iterate and test on accessibility design based on client satisfaction 

2- Change and using the best quality pictures for better presentation of products 

Personal Learning 

1- client communication

Given that this was a class project, we tried to find a genuine customer because we believed that we would get to know the facts of the work and how to communicate with the customer and satisfy her, so we found it. It was amazing we had several meetings, and I learned how to communicate with the customer.

2- Teamwork 

Doing teamwork and paying attention to their opinions, actions, and attitudes were fascinating and challenging, so I learned that collaboration has better and more successful results. If I want to be a good designer, I have to be a good listener and pay more attention to all feedback.

bottom of page