UniGreeks

E-Commerce Responsive Desktop

password = unigreeks

Client

UniGreeks

Timeline

4 Months

Role

UX/UI Designer

UX Researcher

Tools

Figma

Sketch

Project Summary

UniGreeks is an exclusive female owned e-commerce vendor that specializes in Greek letter screen printing and embroidery. I worked with the founders to create a responsive informational website that will showcase UniGreeks products as well as provide customers with guidelines and information on how to order. 

Methodology

Discover

Stakeholder Interview

Market Research

User Research

Competitive Analysis

Screener Survey

User Interviews

Define

Affinity Mapping

User Persona

Journey Mapping

Closed Card Sorting

Information Architect

Design

Design Studio

Medium and High Fidelity Wireframing

Prototyping

Usability Testing

UI Styling

Next Steps

Hand Off Deliverables

Evaluate Next Steps

password = unigreeks

Discover

Understanding the business

In order to understand UniGreeks goals, I conducted stakeholder interviews with the founders to identify and understand their needs.

1. Online digital catalog 

An informational type website rather than a traditional e-commerce website.

2. Display of works

A display of past works and products.

3. Promote email subscriptions

A form to encourage users subscribe to their email base. 

4. Brand ambassador

Create Brand Ambassador program for UniGreeks.

Competitive Analysis

To learn more about market trends in the Greek Screen Printing industry, we conducted a feature analysis, focusing on UniGreeks direct competitors. 

It's notable to mention that there are three particular things UniGreek's competitors have in common: 

1. Visuals

A large banner showcasing either a clear CTA or a large image to create an eye catching appeal appears on the home page. 

MKC Threads

Something Greek

Custom Greek Store

AAGreeks

2. About Page

Three out of four competitors have an "About" page letting their customers get to know their company more and sharing a little on why they started their company. 

Meanwhile, CustomGreekStore has an "About" page but rather than giving a blurb to their company, they showcase all their contact information.

3. Newsletter

A newsletter subscription form is placed at the footer.

Custom Greek Store

Something Greek

AAGreeks

MKC Threads

Define

Data Synthesis and Key User Insights

Continuing our research we interviewed 10 users that are in a sorority or fraternity that have utilized one or more Greek vendors to buy merchandise within the last 5 years. This particular demographic is important because based off the stakeholder's interview, Greek members are their target customer base (but not their ONLY customer base).

  • Users typically use pictures from vendor's sites for inspiration to figure out what they want to buy or what designs they would like to have on their products

  • Users prefer to use a standardized template to place their order and likes when vendors are detail oriented and organized.

  • Users appreciate good communication and price transparency. 

  • Users value accurate photo representation products.

The User and Their Journey

Using the insights we developed a persona that represents our user base.

Our persona helps capture and communicate the needs of the target demographic of buyers to the company founders, while we used journey mapping as a way to identify problem areas in the current experience

The Problem

Jenny needs an easy standardized method to order products for her sorority little sister. 

Considering her price range as a college student, how can we help Jenny confidently order the right products within a timely manner.

Information Architecture

We already had an idea of how the site's primary navigation would look like, but we conducted a closed card sort in order to further test how users would be grouping different main and sub categories.

  • The average amount of groupings was 4 categories, compared to the original 9. 

  • The majority of the groupings agreed on the same main categories and subcategories were all similar. 

29%

Sorted into 3 main categories 

67%

Sorted into 4 main categories

Design

Goals

  • Create clear CTA on the onboarding while providing users with a sleek aesthetic. 

  • Showcase past products as well as available garments/designs in an organized fashion.

  • Seamless ordering process. 

  • Add an ambassador program.

  • State clear price transparency within the site. 

  • Promote email subscription. 

Constraints

  • We suggested a payment method through the site, but our client requested an email format as UniGreeks is still a startup and our client wants the site to be more of a informational site rather than a direct e-commerce site. 

UI Style Guide

Color Palette

Text Styles:


Heading 1: Work Sans Semi Bold, 38px
Heading 2: Work Sans Light, Bold, 28px
Heading 3: Oswald Extra Light, Bold,
Body: Georgia, 16px
Button: Avenir, 12px, 0.1 character spacing

Within the stakeholder's interview, the founders wanted the website to emphasize female empowerment while simultaneously emitting a modern, sleek and chic look. 

To correspond with that, we decided to choose a pallet of different shades of pink while, while using san serif fonts as the main text type with only the body text as a serif font. 

Our hope is to communicate empathy and the modern desire through our UI design choices, while leaving the body text as serif to emphasize a clean and elegant appearance to the site.

Testing

100%

Scrolled down to click the Gallery on the onboarding page. 

20%

Of users eventually found fabric patterns page, but was visibly fustrated. 

62%

Of users expected FAQs page to be in the About subcategory.

83%

Of users struggled with finding the design guidelines as well as fabric patterns. 

65%

Of users was confused by the phrasing of 'garments'.

71%

Of users wondered why design guidelines was not within the inquiries subcategory.

  • Users expected the FAQs to be within the About subcategory 

  • Users expected the design guidelines to be within inquiries.

  • Users were confused when fabric patterns were not in the design guidelines page itself. 

While testing out the mid fidelity wireframes, we noticed users had trouble navigating to the design guidelines and gallery. 

Later while testing our the first round of high fidelity, we noticed the following:  

Next Steps

For the time being, stakeholders had requested that the website be more of an informational site. As the company further gains traction, UniGreeks will move to able users to purchase items through the website. As this becomes a reality, the following are the next steps: 

  • Allow users to create accounts with login information;

  • Allow users to add items to a shopping cart; 

  • Allow users to pay through the website itself via paypal or credit/debit card; and

  • Further UX testing to ensure customers have a seamless user experience. 

© 2021 By Michelle Yang

  • Linkedin
  • Resume
  • Email