Kasie Makes | Jewelry E-Commerce Site
Kasie Makes
This small jewelry business in Philadelphia, PA took a huge hit this past year. Kasie, the jewelry designer, generated almost all of her sales through local artist markets, small art showings, craft shows & home jewelry parties. All depending on people to be present to sell. Due to the pandemic her business crashed and she was unable to pivot. Now she would like to get back to creating & selling her jewelry again.
Goal
Rebrand KasieLyn Jewelry & Create a responsive e-commerce site. Create an easy & enjoyable checkout process for the user while effectively communicating the brand’s core values through design.
Challenge
Clearly communicate brand’s voice throughout site & visual marketing assets to drive traffic and build community for an unknown brand. Make purchase easy for user while attending to user’s needs of high shipping cost & true detailed representation of products. Also being mindful that a jewelry purchase is not usually the goal of user it happens organically.
Role
Research
Ideation
Branding
Web & Mobile Design
Illustration
Animation
Photography
Tools
Figma
Maze App
Typeform
Photoshop
Procreate & Apple Pencil
iPhone 11 Camera
Squarespace
Process
Research
Interviews
Competitive Analysis
Personas
Information Architecture
Sitemap
Sketches
Interaction Design
User Flows
Responsive Wireframes
Task Flows
UI Design
Brand System
Responsive UI Site
UI Kit
Iterations
Hi Fidelity Prototype
Usability Testing
Conclusion
Retrospective
Mission
Collect and analyze data to gain insight about user’s jewelry buying habits. Uncover client’s brand values & clearly communicate their brand’s voice. Create an engaging responsive website giving the user a groovy experience while providing the solution of an easy checkout process.
Research
Competitive Analysis
I researched direct competitors located in Philadelphia, PA and also globally direct competitors. The local businesses are successful in the area, online and is similar type of brand the client is looking for. My frustrations when researching: not able to see my options for categories, filters or my cart, disconnected tone or design through site, too many fields at checkout.
Needs:
Nav bar with category on every page
Keep brand message clear on every page
Cart visible every page
High quality images with hover alternate view
Nav at bottom or jump up arrow
Check out in steps less input fields
Persona
Creating this persona allowed me to define the product, gain empathy for the user and use these insights to make better design decisions.
Findings:
Keep the brand’s voice consitent in every interaction
Give user control with filters & search
Brand’s voice clear on all social platforms
Hi-Res photos truly representing each product
User Interviews & User Surveys
#1 Pain Point - After reviewing my data and interviewing participants I can confidently say that consumers do NOT feel shipping costs are their responsibility (#1 reason they prefer amazon)
#2 Pain Point - Poor representation of product. Users want detailed pictures and descriptions. Pictures of product alone, on a person (showing size + length) and a 360 view or video.
Consideration - Not one of participants has an intention of buying jewelry. The purchase just happens and is discovered during the shopping process.
80% of participants go to a social platform for fashion/style inspiration & will by products through instagram from unknown brand
Information Architecture
Sitemap
The sitemap I kept super simple. I knew from my research I needed the nav bar to be visible on all pages to allow the user to access any category and cart at anytime. My main focus was branding and an easy checkout with user in mind.
Sketches
I began with a clean layout making the products the focus. The landing page will be more colorful and illustrative introducing the brand.
Interaction Design
User Flow
I created a simple flow for discovering products and checkout. This flow guided me with the UI design.
Wireframes
My main focus was the branding and checkout process. The landing page is interactive with a looping illustrative gif defining the brand right away. From my research I discovered that a jewelry purchase is not the initial intent but rather an organic purchase that happens during the shopping experience. The call CTA linked to the .gif hero image takes the user to the gift page to spark that intent of gifting someone a jewelry piece. Other frames are categories, product details and about page.
Branding
Kasie wanted to rebrand. Her original business name was KasieLyn Jewelry. She wanted to shorten the name and to make it a home for all of her work . She is also a fine artist and obsessive crafter. She wanted retro hand lettering and whimsical illustrations that communicated her brand: whimsical, kitschy, playful and welcoming. I created a fat bottomed hand lettered logo with a muted rainbow palette. Illustrations are fun and welcoming like some grooooovy wallpaper in your kitschy aunt’s house that has been unchanged since 1973.
Social Media
UI Kit
UI Site
The Kasie Makes site is super brand driven. Is it too much? Yes! That is “kitsch” her favorite word to describe Kasie Makes. The landing and gift pages are more illustrative where the product pages have the same UI patterns found on jewelry and clothing sites. Through my research I found that most online shoppers do not seek out to buy jewelry but it happens as they shop. To help guide the user to purchase or find groovy gifts the landing’s main CTA leads to a product gift page.
Iterations
Usability Testing
Objective
Identify any obstacles and or ease of use the user encounters when trying to complete the task of buying jewelry and provide opportunities for improvement.
Goals
Observe how the user interacts with the landing page observe if they utilize the CTA for buying a gift
Test how the product images influence their decision making.
Observe how users feel about the brand & layout
Note frustration, satisfaction & duration for all.
67% of the users did not notice free shipping banner. One user went off the expected path.
The testers rated the main navigation 4.3 out of 5 on an emoji scale. 1 a confused face to 5 a smiling happy face.
40% of the testers went off the expected path to look for a product. Testers went right to the CTA button shop to shop for everything not using the main header navigation.
All of the testers completed task of adding cat earrings to cart with ease.
All testers confirmed when shown a product photos they met their expectations.
When asked what’s your thoughts or feelings about this shop’s branding? "Immediately tells me the vibe and style of the brand. I love the color story “ TESTER #27283033
Wins
Brand was well received
Navigation header understood
Improvements
The free shipping email capture needs to be more prominent
Clarify main CTA button on landing page
Speak to stakeholder to keep improving on photos maybe higher photographer
Next Steps
Change top email capture for free shipping to button in header- test it out
Change main CTA button on landing page from SHOP to SHOP GIFTS
Before Usability Test
Testers did not notice email capture for free shipping at the top. Testers also used the CTA shop button to shop for all products.
After Usability Test
I changed the CTA to make it more clear from Shop to Shop Gifts. I also added the Free Shipping button at top to lead user to submit their email to receive free shipping on their order. I am not sure if the free shipping button will be effective or how users will feel about the option. My client clearly stated no pop ups so this was another alternative that I will test when the site is live.
Conclusion
Creating & communicating anyone’s brand message always comes with a set of challenges. Kasie Makes was a joy to create and the challenge was not letting the visual branding get in the way of the products or usability of the site. When I did my initial interview research I found it interesting that a jewelry purchase just happened during the shopping experience. To address that finding, Gift Giving was my main CTA to have the user think of anyone who might like what Kasie Makes & explore. I truly enjoyed helping my client develop her branding & website design. I am excited to test the site live once her new jewelry collection is ready to launch Spring 2021.
Challenges
Logo. Client wanted hand lettered and a specific style. After 2 rounds of sketches I still wasn’t getting it right.
There were no high resolution images for the client’s site (insert scared screaming emoji face here)
Free shipping. Well Kasie Makes is not Amazon sooooo?
Overcoming
I set up a face time call and asked what she didn’t like about each sketch. From there we discovered she liked fat bottomed lettering then the logo process was in the bag
The client and I meet & collaborated to shoot the hero stop motion image for her landing and to photograph most of her pieces. I also suggested hiring/ service trade with a photographer since poor product photos are a pain point.
After speaking with the client I suggested an email capture to build her community and offer free shipping on their order. Also to try to build shipping costs into the prices of her products.
Thanks for reading my case study.