Many businesses were losing revenue due to the economic impact of COVID-19 on restaurants, bars, hotels and other businesses across the country, so Shift4 Payments launched an initiative to help support these businesses during this pandemic. Shift4 wanted to provide a way for people to purchase gift cards which they will contribute an additional 5% to help increase the impact of every sale.
I was the lead UX/UI designer for the project working closely with stakeholders on the design direction during the early planning and concept phase.
We needed to come up with a simple and efficient way users can enter a web portal, search for a business or restaurant they would like to support, purchase one or more gift cards, and deliver those card/s to them. On the business side, we would need to record each purchase to be able to apply the 5% to the corresponding sale – all within a week’s deadline.
Early wireframes were then created and applied to the Create Your Own (CYO) prepaid plan user flow.
I then started to conceptualize the structure of each screen by creating low-fidelity wireframes in Balsamiq. I was constantly consulting with the team for early feedback especially with regards to any technical limitations in the design. It was also good to get the team involved in the early sprints so that there is a common understanding of what we are looking to build.
Right after an interview, I would write down each important information from my notes into a sticky note and would start to build a chronological structure of each participant’s experience.
Doing this exercise allowed me to get a clear picture of the concert goer’s current user experience. Most of the yellow stickies on the wall are direct quotes. These could either be the user describing their goals or pain points. Some of the yellow sticky notes describes more the user’s attributes rather than observations about specific tasks which I would use to later create my personas.
I collaborated with the executive team, marketing heads, and developers on early iterations for the user experience and user flow. I created simple low-fidelity wireframes in Balsamiq to get early buy-in with stakeholders.
After selecting which direction the stakeholders wanted to pursue, we had many iterations on the chosen option. There was still a lot of debate on the right look and feel internally within the team so I reached out to research to conduct a desirability study. The goal was to understand how well the new visual designs conveyed the target brand attributes. The method we used was an online survey via Globe Collaborate among Prepaid users (n=408) in July 2016.
The results show that Design 1 is significantly preferred over Design 2, although preference among 18-25 years old is almost parity. 7 out of 8 nominated design descriptors were attributed to Design 1 with the exemption of “Simple” which was attributed to Design 2.
While the overall winner is Design 1, there seems to be a need to deep dive among the 18-25 years old demographic who are the core targets of Prepaid. Given that this age segment appeared to have no strong preference over the 2 designs, there is a need to know if they are looking for something more that was not delivered by either of the options presented.
Through the data gathered from the experience map, I was able to use the user attributes from the different interviewees to create believable users for the product I’m designing.
To create these personas, I looked at what attributes my users shared as well as what qualities differentiated some from others. From here I was able to create 3 personas with varying degrees of experience, goals and concerns. I categorized them into three basic groups: selective, avid and hard core concert goers. These form the basis of all my design decisions moving forward.
The next step of the process is to create scenarios that would take the best ideas from the ideation session and combine them into workable solutions. I start off with sticky notes so that it’s easy to add or rearrange scenarios based on the pain points I’m trying to address. Many of the ideas that I’ve come up with are not viable solutions because it cannot be built for whatever reason.
The next step I took was to create paper prototypes of the user interface my scenarios describe. Once I’ve created the necessary screens, I got in touch with the people I initially interviewed and have them go through the screens to make sure that what they’ve envisioned at the beginning of the process is what I’ve delivered in my design.
In my experience, working with paper prototypes is great because I get more and better feedback from the users compared to a digital prototype. The data gathered from this round of usability testing is what I’ll use to create the high-fidelity mockup designs.
The final app I created is called Grüpie.
Grüpie allows you to discover when and where your favorite artists are going to play, buy tickets with your friends, and archive your entire concert experience.
There’s so much more to discover with the new Grüpie app — it’s live music made better.
With the data from the desirability study, we were able to tweak the design and came up with a revised layout.
The revised layout was well received by the team and stakeholders. I then created an interactive prototype so that the interaction design can be clearly communicated to the developers.
The biggest challenge to this project was the quick turn-around needed to launch a MVP. We were only given 3-5 business days so the team therefore prioritized on functionality versus user experience. A lot of the initial designs I proposed were moved to a later phase in order to meet the deadline. The developer had some difficulty in programming the proposed solution so I adjusted the designs and put them on the backlog. I also coordinated the design efforts with the Lithuanian office in order to maximize our productivity and deliver assets needed by the development team.
After launching the Shift4 Cares program, it was reported that during the first week over 1,000+ cards were sold. There were severeal press releases published on Shift4 helping customers and business during the pandemic. We had celebrity endorsements creating videos helping reach more people to support their favorite restaurants. Overall there was a positive effect as it helped increase revenue for both Shift4 and their customers.
A true task-based usability test was not possible because of the short deadline. The design had to be refined to adapt as the team uncovered new technology consgtraints. A couple weeks after we launched, I started mini-heauristic reviews on the existing design and functionality developed. I shared my findings with key stakeholders and created a few mockups that would improve the overall user experience.
This was a good benchmark on how the team would respond to a complex project with a very short deadline. Collaboration and communication was very important for the success of this project. It helped us gauge our capacity and saw how a clear understanding of the plan and direction made it easy for all involved.
It wasn’t smooth sailing though. There were stakeholders pushing the design direction based on what was easier to build rather than what was best for the users. We definitely suffered from design debt were we would cut corners and skip good design concepts and solutions to be addressed at a later phase.
Having a MVP was definitely beneficial to be able to address the immediate goal of supporting the business and restaurant industry from the COVID pandemic. If we had more time, I would’ve love to have some usability testing as it would have gone a long way to help us understand our users and improve the overall experience to this great endeavor.
I was really happy with the way the app turned out especially with the short development time of 10 weeks. My only main regret is that we didn’t do any usability testing during the early sprints to validate our design decisions.
After launch some users said that there were too many clicks to get to the content they needed. This feedback would’ve helped me greatly as I could’ve designed the home screen with this in mind. The app didn’t last too long though since shortly after SLS did a rebrand to the Sahara Las Vegas and our app was then discontinued. But it was a great experience and I had a lot of fun working with the team.
The next iterations based on the usability test results really help the team refine the design. For most of the screens we needed to make it clear for the user where to find key elements that would help them complete their task. That meant we had to design for better affordances and remove clutter. This was most important for the home screen.
Testing out different color and animation options for the home screen.
After providing different color options and interaction concepts to the stakeholders, they chose the UI concept that matches Globe primary blue hues with pink as the contrasting color. Gradients were also preferred vs solid colors that resonated more with their 18-25 core demographic. For design elements, we used circles and spheres to mimic Globe’s current brand guidelines.
This project really championed user-centered design. It was amazing to have users constantly consulted throughout the build cycle. I know not all projects I will work on will have the budget to involve users early and often but the final product really shines with an app the prepaid users truly love.
