Jackpocket allows users to play the official state lottery on their phone.
Redesigning the "Tickets" User Flow
The "Tickets" tab is where our users could view their past purchases, games, ticket images, winning amounts and upcoming games. We overhauled this tab to streamline and organize the information and make it easier for users to track their history based on specific orders, dates and specific lottery games.
"Tickets" refers to one single game which was confusing for users who purchased multiple tickets
Allowing users to toggle between 'winning tickets' 'past orders' and 'upcoming orders' is inconsistent categories of information. There is a limbo state for "recent" drawings between upcoming and past.
"Winning" tickets is a separate layer of information that can exist in either of the time-related fields.
Allowing the user to deep-dive into information that is easy to implement and friendly to use.
We decided to rethink, design and engineer "Tickets" into "Orders" that gave users a high-level experience of each order. In doing so we set a few goals:
- Group each ticket into its respective order so users could access all tickets and plays in one order.
- Design a user flow that was easy to implement and seamless to engage with for users
- Allowing users to filter through their winning orders
- Keeping users updated on the progress of their orders and showing 'recently drawn' orders
- Adding filter systems for winning tickets
- Designing and interactive progress bar for upcoming orders
- Splitting Past, Upcoming, Winning and Recent Drawings
- Viewing Ticket Images
- Checking Winning Numbers/Results
- Clear CTA's for big and small winners
- Mapping out current user flow and determining which aspects of the flow work-well versus which experiences need to be redesigned
- Creating personas for what kind of user accesses the 'Orders' tab and for what reasons
- Thinking about what the winning experience/order should look like
- I set up meetings with our marketing and strategy team to analyze user-data to see what users wanted from the orders flow and how this feature was utilized
Ideation — User experience
Thinking about what we wanted the experience to feel like for the users concluded to a few key words: Seamless, Modular, Approachable, Easy To Navigate, and Transparent.
Next, I iterated on various ways to summarize an order and what information was integral for an order summary. How could I display the key information points and leave the user to dig deeper to get the fine-print information about each order? I started thinking about this flow in relation to the intuitive flow of folders — diving deeper into a folder for more information then deeper into sub folders for more information.
Half way through the iteration process, I settled on creating the order summary in cards to mimic the concept of folders and started playing around with the hierarchy of information. Additionally, I had to consider how the user could instantly know which order had a winning ticket and what the winning experience looked like.
In order to monopolize on the winning experience, I wanted to create something fun, engaging and grand even if the winner won something small — winning should always be celebrated! However, there were big prize winnings versus small prize winnings, I started exploring ways to display that clearly.
I experimented with numerous gradients to see if using the game colors + brand colors could be the celebrating and exciting element for winning orders and how the visual implementation of that would look with the cards.
The end product aligned well with all our feature-goals and successfully achieved an intuitive, seamless and engaging experience. Here is a preview of what the final product looked like in Swift:
Rethinking and designing this user flow was a valuable learning experience. The problem presented some very complex design and information system challenges with multiple layers of information and other legally binding pieces of information. Eventually, I was able to integrate and solve for most of it.
Collaborating with the marketing team and working with the project managers was a great way to constantly be reminded of the business, marketing and brand goals for this feature. While my design background and experience in UX were instrumental in the success of the launch of this feature, I overcame challenges such as knowing when to bring in the engineers, creating concept animations and understanding how long developers take to implement certain features by asking questions along the way, iterating, and having 'back up' solutions for every design approach.