Waxwing- The Thing from the Future
FlipAd: A card flip game app
OVERVIEW
Type: User Experience Design
Team: Aadba Rasheed, Anshika Srivastava, Phil Thompkins, Utkarsh Chhadva
Organization: University of Maryland
Course: INST711- Interaction Design Studio by Prof. Alex Leitch
ROLE/ RESPONSIBILITIES
-
User Research: Persona Mapping, Journey Mapping, Empathy Maps
-
UX Design: Sketches, Wireframing, Usability Testing, Prototyping
-
UI and Interaction Design
YEAR
Year: August 2022 - December 2022
As part of my core courses at the University of Maryland- 'INST711- Interaction Design Studio', students were divided into groups of 4, and were tasked to develop a design solution based on the game 'The Thing from the Future'- an imagination where objects are described from a range of alternative futures.
Our team, Waxwing, developed 4 different mobile applications used by Dylan, a young student, trying to navigate his daily life. I designed the app called FlipAd: an instant money winning card flip game with ads as a design feature.
Amazon Product Evaluation
Building on in class group work, we first produced an in-depth evaluation of the Amazon mobile application using Shneiderman's design rules and the MDA. We ran through how we thought the two systems of analysis would look at the app and considered them against one another. We also considered which things we personally might change in light of one system or rule or another.
View Analysis
We later broke down the information architecture and decomposed the Amazon app into a playable game on paper for 4-5 players. We decomposed the app into its business model, with victory points for each of the app's stakeholders - owners, users - both the customer and any service providers, like drivers or artists - and any third parties who may buy or sell information from the application.
View Game
The Amazon game
Participants playing the Amazon game.
Plot
Phone Story
-
Dylan invests in local monuments on MonuMental and realizes he’s made some bad decisions. His friend Janet recommends going viral and encourages him to use imaDjinn, the cutting-edge, experimental, AI-driven social media management app.
-
The AI on imaDjinn suggests building a social media presence, finding/building community using popular apps.
-
Dylan works his way up through SugarRush and starts getting recognized in the community. FlipAd further helps him collect more rewards and gain popularity.
-
Eventually with a large following, imaDjinn’s AI as a final push suggests pulling off a recorded stunt at a monument. The stunt goes viral and the monument’s price soars, making Dylan’s investment a success. He’s not only built a solid community, but also reached financial stability.
-
Janet congratulates Dylan while being extremely happy for her best friend; she is glad he finally gets to live a stress-free life again.
User Personas
Primary User: An early 20-something student, who is new to the city. They are a part-time worker and in need of money. Introverted and struggles to make friends.
Secondary User: A 21 years old communications undergraduate student, who has an active online presence. She knows about all trending songs and will teach you a step or two.
Phone Story Rough Layout
The Phone Story with all the four apps. FlipAd starts at 55 seconds in the video.
Approach for FlipAd- The Thing from the Future
-
Transform
-
Wealth
-
Song
-
Satisfaction
​​
App idea from the flashcards: Transform your current state by playing a game and earning currency points. Losing a level means watching an ad, and watching an ad means losing currency points.
The Crazy Eights exercise- each screen having one possible idea for the app
Design
Low- and Medium-Fidelity Wireframes
01/Home page: The Homepage shows the user the level they are on, and the next levels they need to play.
02/Level page: The Play level button on the homepage takes the user to this page. Here, the user can understands the requirements of that particular level.
03/Game page: The whole screen is dedicated to the game with a few buttons showing important information.
04/Scorecard page: If the players succeeds in clearing the level, they are taken to the Scorecard page. This page shows the user the currency won, their life-o-meter and provides with three options to choose from for the next part.
05/Lose Page- Listen to Ads: If the players loses the level, they are taken to the Listen to ads page. With each ad listened, the user loses currency points.
Cheerful Yellow
#FFC71E
Blue
#4285F4
Septembredescent Seaberry
#FD9911
Dark Gray
#474747
Corn Flower Blue
#4DA9FF
Amethyst
#925DC8
Infra Red
#FF4C66
GO Green
#0AB56E
White
#FFFFFF
Black
#000000
Design Solutions
Launch Screen
Game Page/ Dark mode
Level Cleared/ Scorecard
Game Warning/ Light mode
Watch Ads Warning
Home Page
Game Page/ Light mode
Refer a Friend
Lose Page/ Scorecard
Game Page (with ads)
Level Page
Game Warning/ Dark mode
Game Page (difficult level)
Watch Ads
Game Warning (with ads)
Interactive Figma Prototype. Open in new tab
Deceptive Patterns
To make sure the business benefits from the app, deceptive patterns were incorporated at different points in the application design. These designs were useful for both the parties- the customers and the corporation. It was made sure that the introduced dark patterns did not blindsight the users (like many companies in today's world), and no tricks or assumptions were made.
Dark Pattern 1:
Earn less the next time when you exit the current level.
If a player tries to exit before finishing a level, the app gives them a warning that they will earn less currency points on their next chance.
This dark pattern ensures that FlipAd spends less money in rewards, and the users still get a chance to win some money. It is a win-win for both the parties.
Here, the app won’t save the user’s game, but the user can come back anytime later to continue playing again.
Dark Pattern 2:
Refer a Friend
Refer a Friend allows users and the business to profit. A referral program is one of the most effective ways to promote a business. Instead of waiting for random word of mouth, a formal referral program streamlines and scales the entire process.
Spending a good deal of money is also a way of the business to thank their users.
Clicking on the 'stars' on the scorecard page leads users to the Refer a friend box. Also, they have the close icon option to click, in case they are not interested in the scheme.
Deceptive Pattern 3:
Watch ads at your own time
Watch All Ads button- Here, users have an option to watch all their compulsory ads and get done with them.
Play Again button- Users have a chance to try to clear the level. But they will have to play the game with an ad strip continuously in the UI. Also, some of the card flips will also have an ad. If the player flips that card, they will have to watch the ad.
Dark Pattern 4:
Pause ads
If a player pauses the ad, the app asks the user if they want to stop watching the ad and continue playing. If they select this option, they will lose 30% of the money they have earned so far.
FlipAd uses this pattern to keep users in the loop of watching ads so they can generate revenue through it. If the app loses ad revenue due to users avoiding ads, it makes sure that users also lose their currency points.
​
Reflections
This was my first project since I began my Master's in HCIM at the University of Maryland, College Park. It was a great learning experience working with my fellow classmates, all of whom came from varied backgrounds and complemented each other's skill set. This project was a good start of my journey and made sure of a smooth transition in my studies.
​
While evaluating our designs throughout the project, we always pushed to get a varied sample for testing. This helped in making sure that our solution wasn't targeting just specific individuals, but could instead help improve experiences for every possible user.
​
The theme of this design studio was 'Phone Story'- jobs to be done within an application. It focused on some jobs that need doing and described them in a form of 'user story' that revealed how a person might use their phone throughout the day.