Weebly Gift Cards

UI/UX, Illustration

Work done while completing my Summer 2016 internship at Weebly.

While best known as a website builder, Weebly has shifted its focus towards building out its e-commerce platform and integrating e-commerce, marketing, and websites into one complete platform. Their focus is on small business owners—users who don't require a complex store setup, but need a very good way of managing and having control over their business.

Because of this, Weebly Gift Cards was created as a response to users who requested this feature. Weebly Gift Cards is a new feature on Weebly 4, which launched in September 2016. The help center post for this feature contains the most up-to-date designs, including a few more capabilities and extra elements.

This project was made in collaboration with a project manager, a UX researcher, and two designers.

Questions

  • What are small interaction problems that add up to create bad experiences?
  • How do you take in user feedback and design around it?

Outcome

A design for a new service that has been tested through user research and interviews. This design fits within an existing framework

Process

  1. From wireframes, a high fidelity mock up was started in Sketch. This used the Weebly Carbon framework.
  2. Mock content was placed in order to better illustrate the different states of all pieces of the interface.
  3. User testing was conducted to find pain points in the design.
  4. Designs were altered according to user feedback.
  5. A second round of user testing was done to verify our changes.
Throughout this entire process, there were check ins with all members of the team involved—my design supervisor, another designer, and the PM assigned to that project.

Designs and Changes

Entire gift cards workflow
It is laid out in a flow chart style, with all interactions noted. The key on the left enables developers to understand which interactions, animations, etc. to implement for each different screen.

Adding and Deducting Amounts
This was one large change we made from the original based off user feedback.

The original wording of this action was "Add Transaction", with Add and Deduct Amounts being part of the same modal. After user testing, we found that users found this confusing and so we simplified the language and separated the two actions into different modals. These are triggered by separate buttons to lessen the confusion. Another safety is that the "New Balance" section updates when an amount is entered in, so it's easy to see what the effect of the modal is going to be.

Cancelled Cards
Similarly, during user testing we found that users wanted more clarification on which cards were cancelled. We did this by placing the 'cancelled' status directly in the table showing all gift cards, under the "Amount" column. Furthermore, if that card is selected, the "Current Balance" in the modal shows the cancelled status.

Empty State
This empty state encourages users to set up gift cards by showing them a preview of possible information rather than simply hiding it. It calls attention to the feature and pushes people to upgrade their plan if they lack the feature.

Manually Issuing Gift Card
Manually issuing a gift card allows the shop owner to enter any amount—this allows them to gift specific items to customers, and/or gives them more flexibility over their gifts. The confimation modal lets the user know exactly how much money they sent to whom.

Price Points
This remains the most uncertain part of the interface. Due to various shops having very different price points, it was hard to create a benchmark for what appropriate dollar amounts would be for auto-created gift cards. One user mentioned that many of our lower priced gift cards would be insulting to give as gifts to users of his store since he sold expensive goods, while other users thought those price points were well-suited to their needs.

Illustration

All illustrations for this project were created by me, following Weebly's style guidelines. I've also collected a few of the other illustrations I made over the course of this internship
Illustrations that follow Weebly's style guidelines. Contains 3 different gift card designs, a sent gift card design, a compass, and designs relating to the design process