Hello Heart

Type

Self-initiated

Platform

Web app

Role

UI Designer, UX Designer, Research, Branding

Design Tools

Figma, Photoshop, UsabilityHub

Designing a mobile web app where users cans shop for dainty and feminine styled jewelry without going to a physical store

Style is such a personal thing for everyone. Personally for me, I don't wear a ton of jewelry but when I do, I always looked to find something that fits my everyday style. But it wasn't always easy to find a whole collection of styles that fit my needs. So I noticed there wasn't a ton of jewely websites/web apps that focused on jewelry that was dainty, feminine, and classic yet good quality and reasonably priced. I wanted to create not only a functioning web app that could be accessed via desktop or mobile, but I also wanted the brand to really stand out to attract the right customers.

Why is it hard finding feminine jewelry?

There's a ton of jewelry brands out there. But I wanted to create a strong brand as well as a strong and efficient web app that can cater to the women out there looking for a specific style and brand that fits their everyday vibe. I decided to tackle this issue by interviewing different women.

Synthesizing the most important points and observations (using empathy maps) revealed a few common themes:

Results

  • Many users want to shop quickly using their phone or tablet
  • Women all want different types of jewerly and have their own style.
  • Women all have different budgets in mind but generally speaking, most want good quality for a reasonable priced product that will last.

After collecting my data and synthesizing it, it lead me to understand some key insights such as:

Figuring out what to build

To start defining what my product should be and achieve, I needed to specify one main problem to solve for. Based on my primary persona's story, I set out a problem statement:

"I want to be able to find everyday simple jewelry that is reasonably priced and good quality”

Besides having a solid product that is priced well and good quality. Ultimately, your users need to feel like this brand fits your everyday lifestyle. The users must relate to the brand and trust the brand while the actual functionality of the web app must be easy to use and allow the users to visually see the products in a unique way. In a way, where it connects them to each piece and they can see themselves wearing the jewelery on an everyday basis.

So how can I create a solution that has a place in the market?

There are quite a lot of competition. The only major way to stand out is mainly how you portray your brand so that you can attract the right customer that fits your brand. I found 3 direct competitors and analyzed them. I compared the ordering experience from a new user experiencer as well as from a returning user experience. I analzyed their brand and styles in terms of their color palette, fonts, imagery, and copy they used.

I found that many of the competition loves to use imagery within their website in order to inspire the user. Navigation structure varied within the competitors. Some offered sales and discounts while others did not. Some offered free shipping while others did not. I also notice many of the branding was either super high end feel, or some could be classified as very casual and inexpensive in terms of feel and style. There are many who also showcase a boho or modern style but very few that showcase a very feminine and dainty style that catered to the everyday simple woman. Most important, there were tons of imagery being used to help the user visually see each product as well as suggest other similar products to help inspire more shopping needs/wants.

Based on my findings, I created some requirements and scope for my project.

  • Create a web app so users can find a specific speciality item that is not easily found in traditional stores
  • Make the navigation easy so users can filter and find the products they need based on type of product
  • Must allow any new customer to see the inventory without having to register. This will encourage users to shop first with their eyes rather than be forced to create an account first without even seeing any products.
  • Offer recommendations of products so that the customer may be inspired to find new products
  • To create a brand that is cohesive to having a feminine, light-hearted, and modern vibe
  • Allow customers to be able to place multiple items in their shopping cart

Scope and structure

There are quite a lot of competition. The only major way to stand out is mainly how you portray your brand so that you can attract the right customer that fits your brand. I found 3 direct competitors and analyzed them. I compared the ordering experience from a new user experiencer as well as from a returning user experience. I analzyed their brand and styles in terms of their color palette, fonts, imagery, and copy they used.

I found that many of the competition loves to use imagery within their website in order to inspire the user. Navigation structure varied within the competitors. Some offered sales and discounts while others did not. Some offered free shipping while others did not. I also notice many of the branding was either super high end feel, or some could be classified as very casual and inexpensive in terms of feel and style. There are many who also showcase a boho or modern style but very few that showcase a very feminine and dainty style that catered to the everyday simple woman. Most important, there were tons of imagery being used to help the user visually see each product as well as suggest other similar products to help inspire more shopping needs/wants.

Based on my findings, I created some requirements and scope for my project.

User Flow

The most important action a new user could take is to start adding items in his/her cart and continue to shop and add additional items. This is our primary flow.  I charted a basic version, taking into consideration choices users might want to make, and specifying a clear happy path, which would allow me to start structuring the content within the app.

"As a customer, I want to be able to place multiple items in a shopping cart, so that I can purchase more than one item at a time.”

Brand Guidelines

Guiding Principles

Minimalist

Less is more. Hello Heart aims to create jewelry with an aesthetic that is clean, simple, and modern so that each piece can be mixed and matched for everyday use.

Integrity

We treat every interaction and decision with integrity and transparency. From our top-quality materials to our talented artisans and customer-centric focus, we stand by our work, honor our word, and care about your satisfaction.

Quality

We do everything with sustainability at the front of our minds. Our manufacturers use recycled gold and silver, and our materials can last the wear and tear of everyday life. We go against fast fashion - we don’t believe in making pieces that you only wear once and then toss. All of our packaging is recyclable (plastic free!). Our materials are both waterproof and safe for sensitive skin.

Customer Satisfaction

We offer free US shipping, and even offer free returns if you choose store credit.

Low Fidelity Wireframes

Mid Fidelity Wireframes

User Testing

Before finalizing anything, I decided to do user testing on 10 users in order to gain feedback which would allow me to make improvements to my web app. Here are some feedback about what they loved about the web app and what they would like to change about it.

Things they loved

Things they would like to change

  • Loves the logo
  • Adding multiple items to the shopping cart seemed easy to understand
  • It looks very organized and clean
  • Easy to understand the flow
  • Likes the menu at the top with the images
  • Would love to see a menu screen
  • Prefers the menu to not have images and not slide horizontally
  • Add a “continue shopping” button at checkout screen
  • Add a favorites or wishlist to the items
  • Add more details or options to jewelry listing such as gold and silver options

Final UI Design

Mockups

Conclusion

Due to time constraints, I was not able to add in a feature that would allow the user to custom their product. It is definitely a feature I plan on adding if time permitted.  I also had one user love the menu with the images scrolling horizontally but I had another user prefer I change that. Ultimately, I decided to keep it because I felt it was helpful for the user to visually see the subject matter vs just text. Shopping is is very visual and users need to see and be inspired to shop.

Overall, I am really happy with how everything turned out. It’s easy to use, functional, and has a very clear brand and style. If I had more time, I would definitely do further user testing to refine my project even further.

Check out my prototype

It all starts with a hello!

Let's work together!

To get started, please fill out the form and be as detailed as possible. I will respond within 48 hours.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.