Design Blog
My App Design Process for the Varsity League Concepts
Messy ideation sketches -> Polished mockups x3
Client Brief
The client for this brief is the American college themed sports bar, Varsity.
Varsity has six locations across Perth and sells the most iconic, OTT American dishes. The menu, along with the collegiate aesthetic, makes visiting Varsity bar an escape from everyday life and transports customers straight to the US.
The app for Varsity, Varsity League, was launched in 2020 and since has gained 34,000+ members. Unique offer codes and discounts were used to encourage customers to sign up for the app. Now Varsity wants to get these users to visit more frequently.
The Task
“Using the Varsity League app, create an experience that will reward loyalty and strengthen the Varsity community.”
Design Variations
In this task I will be creating three different variations of the Varsity League app, each with a different focus.
- Context — Stressed Curtin University student who needs to decide what they want to grab for dinner on their way home.
- Aesthetics — Highly-visual concept that embraces the American College aesthetic.
- Accessibility — Caters to users with visual impairments — specifically those with low vision.
Concept #1 — Context
A student from Curtin University has been on campus all day studying and attending classes. They want something tasty and affordable to fill them up, as well as a drink to unwind from the day. They are already a Varsity League member and have purchased food and drink on the way home from university before.
Ideation — Interface Sketches
- App notices buying patterns of users to offer deals at convenient times.
- User can ‘favourite’ meals or items for convenient ordering, as well as informing the app of what items to offer that will be most successful.
- Notify the user of their personalised deal.
Development — Wireframes
- Visual styling of offers, vouchers and other elements are neatly laid out so that they are easily readable at a glance, and are consistent across the different screens.
- Confirmation when redeeming order to help avoid unintentional actions.
Refinement — High-Fidelity Mockups
- Photos of the food to appeal to the appetite of the customer.
- Exclusive offer highlighted at the top of the ‘Offers’ page to follow hierarchy principles as the user is most likely to want that offer.
- Offer expires at the end of the day, creating a sense of urgency or FOMO.
Concept #2— Aesthetic
The branding for the Varsity League app is based on an American College aesthetic. There are a lot of menu items influenced/inspired by American culture and this is one of the main concepts that ties the brand together.
Ideation — Interface Sketches
- The app will have a gamified daily rewards feature where customers have the opportunity to play a mini game in order to unlock freebies.
- This is inspired by the drinking game ‘Beer Pong’. If users get the ping pong ball in the cup, they win a free drink of what’s in the cup. If they fail, they will have to try again another day.
- If they play and win the game, it will encourage them to plan a visit to Varsity so that they can redeem the reward.
Development — Wireframes
- Large graphics depicting the Game ‘Beer Pong’, beer, and red solo cups.
- Further information on game instructions is available when the user clicks the ‘Information’ icon at the top right. This uses progressive disclosure so that experienced users don’t have to look at the instructions every time.
- Featured on the main page.
Refinement — High-Fidelity Mockups
- Vintage graphic style on illustrations/images.
- Red colour from the solo cups liven up the colour palette nicely, forming a balanced triadic colour scheme with the primary colours.
- The user not knowing what beer they could win, or have won, adds an element of suspense and surprise, and will keep the game from turning stale.
Concept #3 — Accessibility
This variation of the Varsity League app will be designed to cater for visually impaired users, specifically with low vision. There needs to be high contrast in the interface design, and larger text and icons sizes to ensure it is legible for all users. To cater towards accessibility broadly, the design should also have a simple layout and explain any aspects of the app that may be confusing.
Ideation — Interface Sketches
- The app will reward customer loyalty with a tiered loyalty system.
- The tiers allow Varsity to reward their most loyal customers with exclusive, exciting experiences.
- Being able to see the benefits for higher level users may cause FOMO and will encourage lower level users to visit more often.
Development — Wireframes
- Opens with an onboarding screen that is introducing the new tiered loyalty rewards system and lets users know where to look for more detailed information.
- The details regarding the different tiers of membership will be located on the ‘credits’ page, providing a summary of everything related to the loyalty program.
Refinement — High-Fidelity Mockups
- Easy to use — Simplified navigation, onboarding to help users learn, progressive disclosure under ‘Benefits’ on the ‘Credits’ page.
- Accessible for visually impaired users — high contrast colours and design, colour-blind friendly, large navigation buttons, labels on main icons.
