Abe Shack

UX Design

Thirstie AccessThirstie

PROJECT NAME

Thirstie Access


ROLE

• Sr. UX Designer


TOOLS

• Photoshop

• Invision

• Jira

• Whiteboard

• Sketch Pad


Thirstie Access is a platform that allows liquor brands to build e-commerce sites and sell directly to consumers. It's a Content Management System (CMS) that provides brands with an all-in-one solution for creating & hosting a site, as well as selling to consumers, which bypasses current government regulations.


The platform is centered around Thirstie's unique Application Programming Interface (API), which matches alcohol products and consumers, through local merchants.


The specific business goals were to create a new revenue stream by having brands migrate or create new sites on the Thirstie Access platform, while allowing them to utilize the API, which allows e-commerce to be conducted.

This project has two aspects:


CMS Editor:

Designing new and existing tools to allow for customization for building a site.


Site Template:

Creating the user experience (UX) for e-commerce journey's along with all possible UX use cases. Also, designing the user interface (UI) for select components and functionality.



Design Process

  1. 1. Identify & Research needs of user and value created.
  2. 2. Whiteboard flowchart of user journeys.
  3. 3. Sketch UI for specific use cases.
  4. 4. Wireframes for workflows and content place holders.
  5. 5. Mockup concept for final UI look & feel.
  6. 6. Prototype for a typical "happy-path" use case.
  7. 7. Test prototype with a select control group.
  8. 8. Implement development.

CMS Editor

A basic framework had already existed but the CMS Editor had serious limitations in customizing websites. The goal was to create and enhance tools that would improve customization and allow the editor to create sites in a more efficient and user-friendly manner.

CTA STYLING IN NAVIGATION

The tool allows an editor to stylize a specific navigation menu item so that it would stand out and allow the user to focus on that item for purchase.

AVAILABILITY CHECKER

The editor would be able to create a custom message for the user in case the shipping address they input is not deliverable.

PAGE BACKROUND COLORS

This tool enables the editor to set background colors for each page instead of one background color for the whole site.

MENU OVERLAY

Created a property that allows a brand to overlay the navigation menu/logo on top of a header background image.

Site Templates

The templates would be used as a basic foundation for brands to build and customize a site and have the ability to conduct e-commerce. The goal was to design the user experience workflows around typical aspects of an e-commerce site such as product page, shopping cart, checkout and member account.

PRODUCT PAGE AND CART

PRODUCT PAGE

Designed the the workflow on the product page where the user selects product and delivery specifications.

CART

Devised the functionality, use cases and UI components of the shopping cart. From adding an item to the cart to proceeding to checkout.

CHECKOUT STAGES

CHECKOUT – STAGE 1

Stage 1 of the checkout process asks for the user's basic information.

CHECKOUT – STAGE 2

Stage 2 of the checkout process asks the user to confirm the shipping address and compose a gift card if need be.

CHECKOUT – STAGE 3

Stage 3 of the checkout process asks the user's to payment information and allows them to enter a promo code if applicable.

CHECKOUT – STAGE 4

Stage 4 of the checkout process asks the user to confirm all the information entered up until this stage. This is when the user submits the order.

ACCOUNT CREATION & CAPABILITIES

ACCOUNT CREATION

The user has the option to sign up as a member and have access to various capabilities and benefits for future purchases.

USER PROFILE BOX (SIGN IN)

The user profile pop up box allows the user to sign in as a member and retrieve their password if forgotten.

USER PROFILE BOX (MEMBER)

Once signed in, the user can now access user info, address book, wallet and order history.

USER PROFILE PAGE

This section allows the user to view/edit/remove information pertaining to user info, shipping addresses, payment info and order history.

MOBILE ADAPTION

PRODUCT PAGE

Product Page with the input fields stacked and optimized for order specifications.

SHOPPING CART

The shopping cart which takes up the entire screen.

CHECKOUT

Layout for the container and stacked input fields.