Interactive End Cards

Client
Brand Identity
2022
Interactive End Cards

 Overview

Interactive End Cards (IECs) are mobile ads that create a lasting impression with consumers via a custom interactive experience. IECs offer consumers a reward — often in-app currency — in exchange for opting in to play a mini-game. These are some of the IECs I’ve designed in Figma and programmed in Javascript. Every IEC seen here has went live to hundreds of thousands of users.

Screenshot of recipe publisher
Publish Recipes

Problem: Users are encouraged to share the recipes they created to the public, but doing so requires too much time and effort.

Solution: I re-designed the flow making recipe-sharing much easier. Improvements to the old flow include: previews so that users can visualize exactly what the information they input will be used for, better page hierarchy, and a faster input process.

Screenshot of onboarding
onboarding new users

Problem: Alloy is a powerful tool with many capabilities, and can be overwhelming to new users.

Solution: I designed a tutorial that walks users through making their first recipe. It also introduces users to Alloy-specific terminology, including action blocks, triggers, etc.

Screenshot of Version Control
version control

Problem: Recipes can become complex, involving while loops, if conditions and multi-step actions. Command-Z could bring users several steps back, but some users wanted to refer back to the recipe they made days ago.

Solution: I designed version control to allow users to save backups whenever they wanted to and enable auto-saving.

Screenshot of analytics builder
analytics builder

Problem: Users want to see trends regarding their businesses.

Solution: With the user's permission, Alloy can collect data on its user's businesses. I designed a flow that allows users to choose which metrics they want to see, graph them, and analyze trends.

Screenshot of metric builder
metric builder

Problem: Sometimes, a user might want to see not just one value graphed versus time, but a mathematical formula graphed versus time.

Solution: I developed the metric builder for users who want to create and save their own formulas specific to their business. The user could combine data and mathematical operations to create their own equations.

 hackathon

For our hackathon, we created a new game mode called Word Crush. We got our inspiration from Candy Crush, where users level up by reaching increasingly difficult target scores. Word Crush is for users who want to challenge themselves to play high-scoring words during the later levels. I created the background art, some level platforms, and mini-boss designs.

 gameplay

Basic concepts:

  • Increasingly difficult bots challenge the user by requiring them to spell out a word that scores higher than a required amount of points in a limited number of plays.
  • The space theme makes the user feel like they are exploring uncharted territory, marking planets/levels along the way.
  • User earns in-game rewards with every level passed.
Wireframes of hackathon

 research

Chronic digestive disorders are one of the most common reasons for patients readmitted within 30 days. UPMC Passavant aims to reduce the readmission rate of patients diagnosed with Irritable Bowel Syndrome, short for IBS. Reducing hospital readmissions represents an opportunity to lower health care costs, improve quality, and increase patient satisfaction all at once.

 goal

My goal in this project is to reduce the IBS readmission rate at UPMC Passavant. I hope to accomplish this goal by creating a learning experience for newly diagnosed patients.

 ideating

I came up with storyboards, each representing a different learning experience for patients. Then, I presented these storyboards to my interviewees. Learning why some methods would not be as effective helped inform my design decisions.

 Create Game Flow

During ramp-up, new designers critique WWF2 and provide suggestions on how to make it better. For my game report, I looked for times when the user flow is frustrating and time-consuming.

Mistplay demo

OERB demo

Molly McGee demo

Under Wraps demo

Always demo
Mistplay demo

OERB demo

Molly McGee demo

Under Wraps demo

Always demo

 proposal

I’ve learned that there is no one list of foods to avoid for everyone diagnosed with IBS. It is a great challenge to figure out which foods trigger their symptoms. I decided to develop a food tracker + visual symptom analysis app to help patients discover how their body react to different foods. IBS sufferers can analyze their own symptom trend reports. This differentiates TrackMe from normal diet tracking apps.

 iterating

I reconnected with my interviewees to test my idea. First, I created paper prototypes and jotted down notes after watching patients run through the user flow. After reviewing the confusion points in the low fi wireframes, I created these mid fidelity wireframes. Then, I worked in Figma & Illustrator to create a design system and style. To learn more about my process in detail, please email me!

 Current flow issues

  • The Create Game button from the Friends page leads me to select Friends again from the list of game options.
  • I need to select Create Game on the Start New Game page. This is an unnecessary step.
  • The definition of a Friend on the Friends page is unclear. All Facebook, past people I've played before, and friends of friends are grouped by alphabetical order instead of categorical order.

This friction could cause new users to leave the Game. Create Game is the most important flow in WWF2 to gaining new users. My main goal in re-working the information architecture was to improve conversion.

Old Information Architecture

 solution

Consolidating the game modes into one section reduces ambiguity and streamlines the task flow. KPI Metrics that improve as a result of this change include Retention, New Users, and K-Factor.

Revised Information Architecture

 process

Mistplay demo

OERB demo

Molly McGee demo

Under Wraps demo

Always demo
I explored font families I felt would be appropriate for my audience. I chose Sofia Pro in the end for its warmth and distinctive quirks. Sofia Pro is based primarily off of geometric forms, allowing for easier “play” or editing of the type forms.

 Outcome

The advertiser boosts their click-through rate (CTR) and reaches new consumers. The app generates revenue through ad monetization. Most importantly, the consumer can enjoy a game to pay for their app.

  More work