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 harness and maintain a relationship so that customer’s interest and purchases would increases towards their brand by 8%, while building new cliental, and keeping majority of the profits.

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. Filters were included to help find products that match their preferences. As a result, Glamour & Gurlie reached over their goal to 8% with an increase in customer traffic and interaction. These improvements have positioned this small brand to a more high-quality company.

Role: Web Designer (UX/UI designer)

Timeline: 4/12/2024 - 04/23/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 8%, while building new cliental, 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.

  • Have a quiz for customers to take that will customize their signature jewelry and/or bags to fit their personalities to influence their next purchase options.

  • I could have utilized a heat mapping method to to conduct a direct analysis on participant’s behaviors as to what elements grabbed their interest while surfing through the Glamour & Gurlie’s websites.

What could I have done differently?

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-pages. 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.

Through this process, I learned how important it is to have a clear identity and full control over your brand. A strong brand 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, they were able to reach their goal to 8% with an increase in customer traffic. These improvements have positioned this small brand to a more high-quality company.