Adding the ability to purchase digital gift cards on a local ice cream business’ website.
TL;DR: A Summary
The scope of this project was to add a feature to the Parlor’s website to help the business expand, specifically by generating more sales and bringing in more customers.
Parlor’s website was modified to incorporate a way for customers to purchase digital gift cards through the site. Out of the three ideas initially pitched by the business owners, adding digital gift cards aligned more closely with the way Parlor’s customers shopped with the brand, as supported by user research.
Keeping in mind the point-of-sale (POS) system used by the business, the POS’ limitations, and Parlor’s current branding, a realistic redesign of Parlor’s website was created.
Role
UX Designer & Researcher
Timeline
February 2024 - April 2024
Background
Parlor’s Handcrafted Ice Creams started in 2019 by two Southern Methodist University graduates to bring delicious ice cream, made from scratch, with clean ingredients to Dallas, Texas. The owners were approached with the opportunity to add a feature, or features, to their website in hopes of allowing them to bring their ideas to expand their business to life. This project aims to expand the existing Parlor’s website by adding features that will improve customers’ buying experience and encourage customers to return to Parlor’s.
Understanding the Problem Space
General Areas of Interest
Three potential ideas were brainstormed by the owners to provide customers additional, more convenient avenues to make their purchases and possible perks for being loyal patrons. These ideas served as a solid starting point for this project:
a way to purchase ice cream pints online for same-day pick-up
a way to purchase online gift cards through the shop’s website
a new “Pint of the Month” club membership
Meeting the Users
User interviews with 6 Parlor’s patrons and 6 non-Parlor’s patrons revealed the following key findings:
The Ice Cream Buying Experience — User preferred going out for ice cream over buying ice cream at the grocery store because of the higher quality and wider variety offered in ice cream shops, the possibility of trying samples, and the social aspect of going out for ice cream. Most users will find new ice cream places via recommendations from others, a map (e.g. Google Maps), Yelp, or just by exploring an area.
Ordering Ice Cream Online — A majority of participants have never ordered ice cream online before, but a few would consider it or have thought about it before, specifically when it came to getting ice cream shipped to their home. A majority of participants said they’ve only gone in person to buy their ice cream and typically eat it on site.
Buying Gift Cards or Merch — Half of the participants mentioned buying a gift card and/or merch from an ice cream shop before. A couple of participants noted never having bought either before, but would consider buying merch if it was “really cute” or a gift card since gift cards are a great option for special occasions.
Visiting Ice Cream Business’ Websites — Surprisingly, many users said they never visited an ice cream shop’s website before. Most stated they typically found their information via Google Maps or Yelps results and do not venture onto the actual business site itself. This is partly due to the fact that some businesses simply do not have websites.
Those who have visited an ice cream shop’s website before said they did so mostly to check for flavors and on occasion, the hours and location.
Sco(o)ping Out the Competition
Two patterns were found in a competitive analysis of other existing ice cream businesses and indirect competitors, like other restaurant establishments. Competitors included establishments local to Dallas, which is Parlor’s city of operation, and nationwide chains.
Competitors either had an online shop, which offers non-ice cream products like merchandise and gift cards, or no online shop at all.
Figure 1. Venn diagram comparing presence of an online shop
Most competitors either offered some form of online ordering, such as nationwide shipping, delivery via food delivery apps, and/or in-store pickup.
Figure 2. Venn diagram comparing online ordering options
Knowing this, how might we…
help make it easier for people to introduce Parlor’s to others?
help users easily find out if Parlor’s sells gift cards?
help make it more convenient for people to buy a Parlor’s gift card?
Prioritization & Information Architecture
Understanding Project Goals
Three main goals were established for this project. These goals went beyond the design of the product itself and took into account user goals, business goals, and technical considerations.
To make it easy for users to find answers about gift cards and acquire one without going in-person or emailing support
To match direct & indirect competition by offering a service commonly found in this industry.
To create a satisfactory, enjoyable, and easy to understand experience that can accommodate the limitations of the client’s POS system.
Feature Prioritization
Ideas were generated for potential features to include in the upcoming product’s design. After prioritizing which features to include in the minimal viable product (MVP), these features were considered high priority.
Navigation to Gift Card Page
A link in the navigation menu and on the homepage that will lead to a page where customers can learn more about gift cards and purchase them online.
Gift Card Page
The page that introduces online gift cards to customers and directs them to the actual gift card purchasing page, which will be linked to client’s POS merchant. Page will match Parlor's branding and language.
Gift Card Order & Checkout
The page where customers will choose how much the gift card will be, the recipient's information, and any gift message. Page will match Parlor's branding and language within POS limitations.
Bringing Ideas to Life: Wireframing
Low-fidelity Wireframes
Full preview of all low-fidelity wireframes can be accessed here.
Figure 3. Sketch of first half of Parlor’s home page.
Figure 4. Sketch of gift card page.
Figure 5. Sketch of cart with digital gift card & checkout page.
Mid-fidelity Wireframes
Full preview of all mid-fidelity wireframes can be accessed here.
Figures 6-9. Mid-fidelity wireframes of the gift card page, gift card purchasing page, checkout page, and confirmation page.
First Impression: Mid-Fidelity Usability Testing
At a Glance
A five-point difficulty scale was used to measure ease of use during usability testing. Once participants had finished a task, they were asked to rate the difficulty of completing that task on a scale of one (1) to five (5) with one (1) being “very easy.” Mid-fidelity testing participants were asked to complete two tasks:
find more information on digital gift cards on the client’s website
and purchase a digital gift card
Results & User Suggestions
A full summary of the mid-fidelity usability test results can be viewed here. Users noted the following during testing:
gift card navigation link was where users expected it to be, and it was clearly labeled and easy to find.
the layout and design of the homepage as “very simple but effective” and “straightforward and clean.”
the process of purchasing a gift card logical and easy to complete, though certain aspects of the POS’s UI was unexpected for some users.
Notable comments about Clover’s (the client’s POS) unchangeable UI include:
the second green checkout button that appears on the top of the checkout page caused mild confusion and was deemed unnecessary
the second checkout button intrinsic to Clover seemingly disturbed the hierarchical flow of information for users.
One user suggested changing the copy visible on the Gift Card page prior to being redirected to Clover, which can be done. This user noted how the current “Shop Now” CTA button text did not sit well with them since buying a gift card did not seem like shopping to them. For this user, “Shop Now” gave the implication that they’d be able to browse for products like merchandise and ice cream, which was not the case.
Here’s the Scoop: Hi-fidelity Prototyping
A few key screens of the high-fidelity prototype before usability testing are shown below. A full preview of all screens used in the usability test can be found here.
Figures 10-12. High-fidelity wireframes of the gift card page, gift card purchasing page, and checkout page.
Second Run: High-Fidelity Usability Testing
At a Glance
High-fidelity usability testing consisted of asking participants to perform two tasks followed by a debriefing and discussion period:
Find more information about gift cards
Purchase a digital gift card
Once participants had finished a task, they were asked to rate the difficulty of completing that task on a scale of one (1) to five (5) with one being “very easy.”
Results
A full summary of the high-fidelity usability test results can be viewed here.
In summary, all users had positive emotional responses to the digital gift card purchasing process. Users emphasized the ease of navigating through the Parlor’s website to find more information about gift cards. Despite Clover’s interface flaws that created some mild confusion for users, everyone said they would go through the process of purchasing a digital gift card again online.
While the POS portion of the prototype can’t be altered, it is still informative to understand users’ experience navigating through the point-of-sale interface connected with Parlor’s website. Overall, it seems Clover’s layout did not deter users from purchasing digital gift cards again.
Iterative Design
A New Iteration of Parlor’s Design
Based on what was observed during usability testing and the suggestions for improvements from users, the following changes were made to Parlor’s design:
Changes to the gift card page to clarify presented information and diversify CTAs located on that page.
a) Changing the second “Buy Here” to something that will allow users to contact the business if they have more questions unanswered by the FAQ on the page.
Original
a)
Iteration
a)
b) Modifying the main “Buy Here” CTA to make it clear that users will be buying a digital gift card as opposed to a physical one.
c) Adding a second button to direct users to information needed to buy a physical gift card.
Original
b)
Iteration
b)
c)
d) Changes to the secondary CTAs on the homepage to make them stand out more against the client’s text on the homepage.
Original
d)
Iteration
d)
Conclusion
Final Thoughts
The goal of this project is to add a feature to an existing website for a small, local business that had agreed to collaborate on this project. Completing this project not only allowed me to establish my first client relationship as a designer, but it also opened the door to a potentially larger project with Parlor’s Ice Creams. High-fidelity testing yielded additional feedback outside the scope of this project that could be revisited at a later date to further increase the usability of Parlor’s website. Such feedback will be handed off to the owners for consideration and potential implementation.
This project also pushed me to connect with users and practice my user interview skills, especially since I spoke with users unfamiliar with the concept of UI/UX and UX research. Addtionally, designing within the constraints of a POS system was also a unique, yet realistic, experience, and it challenged me as a designer to work around what could not be changed. Overall, I’m glad I was able to give back to a business I respect and enjoy.