Responsive Website

Glamour & Gurlie Template Mockup


Glamour & Gurlie is an e-commerce site offering hypoallergenic jewelry for birthdays, weddings, and special occasions.

Glamour & Gurlie

SUMMARY

The overall concept of this project was the increase in fees by Amazon which not only raised the original prices but kept majority of the profits from Glamour & Gurlie. Since they have been getting more momentum with an increase of customers buying their products, Glamour & Gurlie wants to transition their small business to having their own personal website. The goal was to help Glamour & Gurlie maintain a relationship with their regular customers, while keeping majority of their profits from Amazon.

The website now features an ambience of high fashion statement with a carousel that moves which advertises future products for purchases. Customers can also create their own accounts to personalize their shopping experiences, while filters were included to find products quicker that match their preferences. As a result, Glamour & Gurlie reached their goal of 15% with an increase in customer traffic and kept 70% of their sales. These improvements have positioned this small brand to a more high-quality company.

Role: Web Designer (UX/UI designer)

Timeline: 03/01/2024 - 08/08/2024

Tools used: Figma, Eraser.io, & Analysis tool


CONTEXT

Glamour & Gurlie is a small business that focuses on enhancing your wardrobe with a diverse selection of hypoallergenic accessories, including earrings, bracelets, necklaces, rings, sunglasses, and accessories like purses, hats, and belts. These items enable customers to radiate confidence when they step out in public.

PROBLEM

Glamour & Gurlie has been operating since 2023 and have been loyal with using Amazon due to budget constraints, which prevented the development of a personal website to sell their products to customers. Overtime fees have increased, and a large portion of profits have been kept by Amazon. They now want to transition into their own personal website for full control of their brand and profits.

MY ROLE

As a Website Designer, I was assigned by Glamour & Gurlie to create a personal website and to help Glamour & Gurlie maintain a relationship so that customer’s purchases would increase towards their brand by 15%, while building new clientele, and keeping majority of the profits.

But the major question that I had was how might the transition from using another platform to sell products on their own personal platform still build direct customer relationships to fosters long-term brand growth and customer loyalty?

SOLUTION

The goal is to create a strong presence and presentation for the brand’s personal style and visual appeal to generate interest of customers to buy jewelry, sunglasses, belts, and handbags products.

  • Interview Questionaries

  • UX SWOT Analysis

  • Sitemap

  • Customer analysis software

To get data for the best results to solve this problem I used:

Emphasize → Analyze/Research → Ideate/Design → Prototype → Test → Reflect/Growth

Breakdown of the process:

EMPATHIZE

Glamour & Gurlie has been in business with Amazon since 2023; however, Amazon, is also known to have false online stores that produce counterfeit products which causes concerns among consumers to not trust a lesser-known company. Since Glamour & Gurlie didn’t have a dedicated website, it prevented them to harness a strong relationship with customers which is imperative to differentiate themselves in the market.

ANALYZE/RESEARCH

During my research, I interviewed 12 customers who were willing to participate in the questionnaire interview process. This process was important to get customer’s insights that have been buying Glamour & Gurlie’s products on Amazon.

Questions directed to customers who purchase Glamour & Gurlie’s products on Amazon:

  1. How do you think Glamour & Gurlie can have a better experience as a customer?

  2. Has Glamour & Gurlie met your wants and needs? If not, how can they improve?

  3. On a scale of 1-10, how satisfied are you with your current online shopping experience for these types of products?

  4. Would you be more likely to purchase products from a trusted, personal website versus larger marketplaces?

Insights: Customers are open to Glamour & Gurlie have a personal website besides an online store on Amazon

1. Seven of the customers that have bought Glamour & Gurlie jewelry since 2023 have noticed a lack in change to their online store. The other five noticed that the brand focused more on jewelry even though they offered glasses, belts, and hats which may cause confusion to new customers.

2. Many participants suggested that the company needed reviews from past customers to gain a sense of clarity to allow possible users to potentially use that as source to possibly buy a product.

3. There was a consistent pattern with the participants scoring the overall experience in a level 6. But many have noticed a change in the original pricing because of an increase in interest and fees from Amazon.

4. Eight of the participants mentioned they'd would love if Glamour & Gurlie have a personal website. They think it would help show that the company is legit. The other four said they find Amazon really convenient because they can browse multiple stores all in one place.

A SWOT analysis was used to identify the company’s strengths, weaknesses, opportunities, and threats. I developed strategies that offered a competitive advantage with Glamour & Gurlie’s competitors.

Glamour & Gurlie’s UX SWOT Analysis

STRENGTHS

  • Glamour & Gurlie offers high-quality items at an affordable price range for customers to buy.

  • There are other high in accessories such as, hats, belts, bags, and sunglasses offered at a more affordable price.

WEAKNESS

  • The original website has similar layouts to other brands that are also using Amazon’s platform to sell their products. Glamour & Gurlie should have their own identity.

  • Glamour & Gurlie’s visibility make be affected by Amazon’s algorithm, showcasing more well-known and popular brands.

OPPORTUNITIES

  • Help Glamour & Gurlie keep larger portion of profits by transitioning Glamour & Gurlie from Amazon to having their own personal website. Also, maintaining momentum with customers buying their products using a personal website.

  • Create a personal website for the brand while also keeping their online store account on Amazon to give variety for customers to access their products more than one way.

  • Incorporate some type of reviews to show the popularity and create trust for future customers.

THREATS

  • There is a lack of control with the brand experience when selling products under a third-party marketplace which is Amazon.

  • Glamour & Gurlie’s sales can be impacted negatively through Amazon’s policies, rules, and fees changes.

Original Website Overview: Amazon Marketplace use to sell Glamour & Gurlie Jewelry and Accessories

Glamour & Gurlie on Amazon Store

Originally, Glamour & Gurlie used Amazon’s marketplace build-in-tools as a way to effectively create their platform to sell products to potential customers, preventing the risk of a high investment in a personal website.

Although Glamour & Gurlie did have high-quality pictures of their products with their brand’s visual identity, Amazon’s platform limited the options for them to have their own unique layout which would shape them differently from their competitors.

I thought it would be a good idea to create a website that would give more layers and a 2000s modern-day fashion vibe to a company that wants to convey essence of elegance when someone wears one of their products to include in their wardrobe.

Based on the information collected, I was able to develop a sitemap diagram illustrating the proposed structure of the website. It was essential that the website's architecture was well-organized, considering the extensive range of products offered by Glamour & Gurlie. I drew inspiration from the options section of their Amazon storefront, which I considered a valuable feature to integrate into their website.

I noticed that the focal point of their store on Amazon emphasized jewelry from a woman modeling their accessories. So, I replaced categories such as belts, sunglasses, and purses with jewelry-specific classifications, to include necklaces, bracelets, and rings with the remaining category for earrings, which was present in their original Amazon store, was retained in the revised categorization.

Additionally, it was imperative to create an alternative navigation method that would allow users to locate specific items efficiently, minimizing confusion and preventing overwhelm to ensure a seamless browsing experience.

Glamour & Gurlie’s Sitemap

Glamour & Gurlie Sitemap

Navigation bar (Hamburger menu)

On the top left corner of the website the hamburger menu was concluded to keep it minimalist so that the focal point was the visual presentation of the website.

The company had additional accessories it wanted to incorporate into its website which inspired the decision to add a sub-tab within the "Accessories" tab in the hamburger menu to include options for sunglasses, purses, hats, and belts.

Home page

Upon entering the website, a female model poses with the Glamour & Gurlie Jewelry with the company name, title and tagline, and a "Join us" sign-up button. As the user scrolls down, there is the "New Arrivals" section featuring four jewelry options which directs users to its respective page. At the bottom of the home page is a moving carousel of upcoming accessories to attract the anticipation from customers wanting to buy once the items arrive.

Main category pages

There are two options you can go to get to the main category pages which are the Home page and the hamburger menu located at the top left corner of the website.

There are nine main category pages that showcase various jewelry options. Each of these pages features a filter menu located at the top right corner, enabling users to navigate according to their specific preferences in style or color efficiently.

Sign-up/Sign-in account page

It was important to include an account for customers so they can have personalize services. Once a user signs in, they are able to save products on their wish list to their next potential purchase, be notified for special perks or new launches, and provide history list of past products that was purchased.

Cart page

To improve the user interactive experience, customer can now modify the quantity of the item they intend to purchase.

Receipt page

Finally, to enhance the overall website experience, we have introduced a tracking feature. Many e-commerce websites have successfully implemented this strategy, which allows customers to track the location of their purchased products and contributes to a more professional and convenient experience.

Glamour and Gurlie's wireframe

The process of developing a range of wireframes were straightforward, considering that most websites and e-commerce platforms have a consistent design layout. These initial wireframes represented only a small segment of the complete website, which is estimated to be approximately 75 to 82 pages. This includes the homepage, contact page, sign-in and sign-up pages, personal account page, cart page, billing address page, and receipt page, each of which possesses its own distinct design layout.

Wireframe

Mockup

IDEATE/DESIGNS

The direction that I wanted to take was to give the website a more luxurious appeal and captivating visuals to guarantee an effective archetype of what the client wanted to present to her target audience.

Visual system

1. Color theme - Neutral colors were strategically selected to minimize distractions from the focal point, which is promoting stylish accessories and bags to attract potential customers to buy.

2. Shape - Reuleaux triangle/ Circular triangle (Behind the jewelry modeling on the home page).

3. Font theme - Sans-serif and Serif are used for an approachable, clean, and a more modern vibe.

4. Pictures/illustrations - Jewelry and accessories

5. Easy user-interaction effects - Drop down menu, hover effects, and filters

Glamour & Gurlie's Visual System
ShopPay button
PayPal Button
Pay Now button
More Buttons
Back arrow and Forward arrow
Hamburger menu
Sign-up and Sign-in buttons
Save information checkmark
Navigation bar icons
Profile Account Options

PROTOTYPE

Home page

Most popups appear once a user lands on a website for the first time to grab attention to subscribe for newsletters, special discounts, or updates on new product arrivals. Many times, it takes a while for popups to reappear, especially if a user wants to subscribe last minute after dismissing a good deal. Now customers have the option to trigger the popup mockup manually when they click on the, “Join Us” button that is beneath the title and tagline.

The four high-quality jewelries are organized into categorized sections, serving as preview items that customer can navigate to the desired page. When a user clicks on the "Click to Shop" button, they are directed to the corresponding product’s page for additional information or purchase.

Cart page

Customers now have the ability to adjust the quantity of the item they wish to purchase; by hitting the + increment to add and - increment to decrease or hitting the X button to remove item from the cart that is position on the right side. To restore a previously removed item, customers may activate the undo arrow function.

.

Sign-in/Sign-up account page

Users can now create a personal profile account, by selecting the profile icon located in the navigation bar. Once they are log-in, they can proceed to add items to their wish list or favorites list, or in their shopping cart when they want to purchase.

Receipt page

Customers can track the location of their purchased products by hitting the “Track Order,” button, which the tracking map zooms to display the product current location before reaching its final destination.

Glamour & Gurlie Prototype

TESTING

Final Step: Personal website did make a positive impact with customers

The final assessment involved a customer analysis software to monitor customer traffic for the next three months. This analysis would serve as an indicator of the users' satisfaction with the company’s personal website and overall experience.

Segment - 2022

1. BEFORE - Engagement Rate (40%)

The engagement rate estimation was monitored with how long the user stayed on the website. It had to be more than 10 seconds, which customers did stay 50 to 60 seconds on each section of Glamour & Gurlie store on Amazon website. Before the redesign of the website, it was conducted that out of every 100 people who visited the site, only 35% actually interacted with it. Since there were also competitor ads, which had similar items, that would distract them. Overall, it was concluded that 9% would quickly leaving, which means that customer engagement was considered low to average.

2. AFTER - Engagement Rate/Click-Through Rate (46%)

After adjustments and updated visuals, the 40% of users grew to 46% indicates that the quality of users improved significantly which was monitored for three months. The proportion of users signified customers were able to rent a bike more effectively, which is a big positive change in how well the system is working.


Segment - 2023

BEFORE - Views and Visits (Stagnant)

Although Amazon provides a platform for many businesses to attract a huge customers customer base on their marketplace, but it distracted customers in seeing other brands. This caused stagnation with the average session duration for a single product was 60 seconds.

BEFORE - Net total profit ($3,750)

Glamour & Gurlie did not keep majority of their profit since Amazon would charge fees of Referral Fees (15%), just to help the company "find" the customer them. Also, approximately 20-25% was taken under the Fulfillment by Amazon (FBA), which covered storage in their warehouse and shipping. Finally force returns would be charge if an item was “unsellable, which is a total loss for a small brand. This resulted a loss of $8,750 out of $12,500 in sales, which Glamour & Gurlie would only get $3,750 in net profit.

AFTER - Visits and Views/Traffic (+15 increase)

Once the redesign and modification of their website was finalized, there was positive changes of an increase of 15% growth. The number of people visiting the site was from 4,200 a month in 2022 to 4,830 a month in 2023, after the changes of the website. Additionally, the total number of views have increased from 9,600 to over 11,040 which means about 465 more users were actively engaging with the site, showing that people liked the new design.

AFTER - Net total profit ($10,062)

Once Glamour & Gurlie transition their business to having their own personal website, they were able to retain its profit network by eliminating 30%–45% of revenue that Amazon typically keeps. Now their new total is $10,062 each month which they were able to keep 70% of their sales.

REFLECT & GROWTH

The concept of this project was to address challenges related to help Glamour & Gurlie harness and maintain a relationship with customers while transitioning the company over to their own personal website. During this process, I conducted a questionnaire-based interview with twelve customers to gain insights into their experiences for purchasing their jewelry. A UX SWOT Analysis was used to identify key elements to help develop opportunities for the website. Additionally, a sitemap method was used for organization and user navigation for a more user-friendly experience. All 12 participants were asked questions about their current experience with buying Glamour & Gurlie products from Amazon.

Their consistency with the customers who expressed openness of Glamour & Gurlie having a personal website to show the company’s authenticity and avoid possible scammers on Amazon. My obstacles I came across was the shorten duration of time to create a website multiple-page. But, also implementing special effects to make the website more engaging. Since special effect features have been implemented, such as, a carousel that moves, and allowing customers to create their own accounts to personalize their shopping experiences. Filters were also implemented to help customers find products that match their preferences, has showed an increase in engagement and a memorable experience to users. I could have utilized a heat mapping method to conduct a direct analysis on participant’s behavior as to what elements grabbed their interest while surfing through the website.

Through this process, I learned how important it is for a brand to have a clear identity and full control. It shows that a company has a sense of direction as to what goals they want to achieve. It also demonstrates that a company value building relationships with their customers. When a company has a brand that is unique and distinctive, it stands out and becomes recognizable, especially by the people who share similar values and qualities of that brand. Once Glamour & Gurlie had a personal website with interactive features and elements, it was monitored for 3 months which they reach their goal to 15% with an increase in customer traffic. These improvements have positioned this small brand to a more high-quality company.