Shift 4: LBM Custom Gift Card Creator
Project Overview
Problem to Solve
Shift4 wanted to add a custom gift card creator to their Lighthouse Business Manager (LBM). It would allow restaurants to sell physical or digital gift cards online or in person. This would help restaurants increase sales during the COVID pandemic.
Process
Discovery
The discovery and research phase were more about learning how LBM worked and what were the design/interaction guidelines than trying to figure out an actual process. I worked with the product owners and development team to make sure my ideas were feasible. The goal was to create a simple step by step process where a user could easily go back and change things. Due to technical restraints users were forced to create an online store to sell their gift cards, but they were allowed to turn it off later in the process if they were not interested in keeping it.
It was also important for users to be able to custom design their own gift cards. This was a tricky issue as we were very technically limited as to what we could offer users as Shift4 was going to be using a 3rd party component.
Design: Pencil Sketches
I did pencil sketches early on before we knew what all the requirements were going to be. Some of my ideas were implemented but a lot of them changed as the requirements became clearer. The sketches were based on the known data that would be required to create a card. While it isn’t pretty and a lot changed, the sketches helped form the basis of what the design would become.
Design
Once I had the user flows addressed in the research phase it was only a matter of understanding the LBM design library and knowing how far I could stretch things. I created new form field styles, introduced new error modules and success modals. I designed the project in Figma and created a prototype as I did the designs.
If you choose to go through the prototype and click around, use the logo in the upper left corner as a way to return to the beginning.
Results
We created an easy to use process to set up a landing page to sell physical & digital gift cards. Then we created a process for the user to design their own custom cards or edit a template. Lastly, I set up an order system so the user could order new physical gift cards any time.
Business Impact
Shift4 took pennies on the dollar for all the gift cards ordered through this system so it created a new revenue stream. But it also helped some struggling restaurants bring in much needed money during the pandemic when sales were slow.
Client
Shift 4 Payments
Services
- Information Architecture
- User Flows
- User Experience Design
- User Interface Design
- Visual Design
Tools
- Figma
Design Elements
Outcomes
How to create a Gift Card
First Time Seeing Gift Card Options
In LBM when a new feature is introduced it shows as a new landing page that sells the new feature, especially if it costs extra to use.
Choose Your Card Type
Once the user decides they want to move forward with setting a gift card sales program they can decide if they want to do digital, physical or both types of cards.
Name & URL
The user can name their store and choose the URL, then validate the URL to make sure it has not been taken.
Upload Logo
Selections
Start Gift Card Design
After the store set up the user moves onto card design. Due to technical reasons we had to force the user to design their digital cards before doing their physical cards.
Card Design Options
The user can design their own card, select from an existing library or get professional design assistance.
Design Library
If the user decided they want to use an existing design they could choose as many as they want from the design library. Long term, there were plans to add filtering and sorting to the library.
Design Your Own Card
If a user decides to design their own card they can choose from a library of templates, upload their own image(s), logo and add custom text. They would also be able to move elements to either the foreground or background.
Card Design Confirmation
After a user does their digital card design they then need to move onto a physical card design. Once a design is completed and confirmed the new design will “live” in the card design library.
