skip ↓ to the final work

🔎 Sprinting with SPC

Type
App design, personal project
Timeline (Feb 2022)
5 days, design sprint
Tools & Skills
Miro, Figma
UXR, heuristic evaluation
Figure 1. A peek at the final UI :))

Section 1 // Background Information

Overview

SPC (Student Price Card) is an annual subscription based savings card that gives students discounts at select retailers for a flat fee of $10 a year. They claim to have more than 1.1 million users across Canada, and recently discontinued physical cards-- moving all students to their app. In addition to being a first to market company, SPC has little competition because of their strong connections with high schools. However, I polled a group of high school students and found that SPC struggles with retaining users; only 48% of 54 purchasers bought the card for more than 2 years. I personally had a poor experience with the app in high school, and wanted to revisit it in 2022 after they had gone through several updates. My design sprint focused on addressing why students stopped buying SPCs, and what the app could do to retain them. While attempting to understand the complex audience of the app, I interviewed several students and found 3 main archetypes representing ex-customers or churners and their motivations
Figure 2. The 3 main types of ex-customers and churners

Customer Segmentation

I noticed that a difference between the “Saver” group and the other two was awareness and convenience. Where the latter wanted a streamlined experience curated by SPC, the Saver had previous experience in couponing and wasn't afraid to seek out deals from multiple sources. SPC’s business model is unable to successfully retain a large percentage of the Saver population because the discounts offered are set by the stores. On the other hand, many accidental buyers experience the app out of confusion, and have no real interest in SPC. Thus, I chose to cater my improvements to the “Go with the Flow” users. They are most likely to repurchase, show interest in SPC as a product, and their pain points take the least engineering effort to address. 

Section 2 // Evaluating SPC

Figure 3. SPC vs its free, direct & indirect competitors (found by searching SPC keywords in different search engines)

Competitive Analysis

Rakuten is proof that SPC cannot compete with stronger couponing apps dedicated to “Savers” because of coupon stacking and cash-back. SPC makes most income from a yearly subscription fee, making membership renewal the most important metric for the app. To do this, I identified 2 areas of improvement that I sought to address:
All apps offer coupons of some sort, but StudentBeans and UNiDays target university students, and Rakuten has an older demographic (ages 25 - 34). 
HMW Statement 1

How might we enable users to find and use high value deals more easily?

HMW Statement 2

How might we personalize the SPC experience to be more accessible?

What do users really want?

SPC's user base wasn't just unsatisfied with app value: 80% of interviewees said they were unable to scan deals and make informed decisions without image visualization. Furthermore, users also said the homepage seemed irrelevant and randomly generated, decreasing trust.
With a focus on "Go with the flow users," I asked interviewees why SPC wasn’t satisfying them, and what it could do to retain them (see right) →
Primary motivators: Accessibility, value, brand
Figure 4. Optimizing feature value with a Red Route Analysis

Feature prioritization

I reorganized my affinity map into a Red Route analysis to decide what should be the focus of my sprint (see right), hypothesizing that SPC app usage and multi-year retention could be improved through features based around personalization for hesitant users that don’t actively seek deals. Users responded sometimes or rarely when asked how often they would explore new deals, frequently using the homepage and to a lesser extent, search. The satisficing habit of humans leads to a preference for optimally placed computer generated recommendations over one’s own research. An example where this is successful is Netflix, where the “because you watched” algorithm gives users recommendations based on similar users, and movie content. SPC can implement this on a simpler level, giving users relevant deals with minimal effort on their part.
Satisficing -- The tendency for humans to settle for a solution that isn't optimal but that takes less effort

Section 3 // The initial designs

Figure 5. User testing improvements for the first few designs.

Forming an ideal medium for habits

For the issue of value and engagement, I did secondary research to find a company that heavily used coupons: McDonalds. They were able to bolster app usage through extrinsic motivation, offering free fries with a purchase for 24 hours (if the Raptors scored 12 three-pointers). SPC could similarly use an inconsistent and time-scarce feature to incentivize users to login more frequently and turn on notifications. Their 24 hour deal could involve partnering with different companies to provide an SPC-only coupon-- while the concept varies from McDonalds, the feature’s underlying value is still in creating FOMO and adding a memorable signature feature. A variable reward like this can work with SPC’s user flow to form an ideal medium for the HOOK model; potentially offering users a reason to remember the app and use it consistently.
The more trust that SPC cultivates with their products, the more time and energy users will invest— eventually forming a habit
Figure 6. Exploring and testing card iterations

Testing card iterations

With SPC’s current coupon presentation, one day deals wouldn’t be possible (see initial card 0). Because coupons lower company profit margin and require coordination with stores + SPC, their losses should be subsidized by impressions and gains in brand awareness. When I observed users on the app, I found the current featured SPC slot had a low ROI on conversions (sorry Samsung). As a result, I would assume that many companies would be hesitant to invest in a featured slot.
Keeping a company’s advertising goals in mind, I redesigned the initial card to emphasize product photography and time-scarcity.
Figure 7. May the most user-friendly card win, and may the odds ever be in your favour

Test is best :)

To summarize my research insights, I found the HIG inspired card was best because users rated the aesthetics highest, and strategic text placement meant users actually read the deal instead of scrolling past it (employing the natural F-shaped reading pattern). 
Recall: Natural and common reading patterns include Z and F
addressing problem 1

“Wait, I didn’t know that existed?”

“Deals near you” is a great feature that saves searching time and solves the pain point of accessibility. However, it has a very small touch target and is placed inconveniently, creating access issues (the recommended minimum hitbox on IOS is 44px). Because many interviewees were unaware or confused by the feature, I designed a new component that would prompt users for location permissions on the homepage. Once accepted, the user would then be redirected to nearby deals.

Alas, no matter the popup’s design, users stated that they would be likely to ignore it because it looked like an ad. A bit of trickery was employed in the final design, allowing users to enable the feature by clicking on a preview that appeared broken, combatting banner blindness.
Figure 8. Different methods of location prompting.
Figure 9. An old screenshot, and the new stories features

Jakob says hi.

When I initially used ethnography, I noticed the problem of aimless scrolling. Most SPC content on the homepage share the same undifferentiated design (see Figure 10 below). As the deal preview is also cut off, People tended to look at the logo of the brand, and kept scrolling if it didn’t interest them.

I wanted to raise engagement and found that the existing circular shopping categories already mimicked Instagram stories, confusing some Instagram users. Because identical sections with the same redirect locations are already present in the app’s search (not to mention in a more appealing way), I moved the originals down to maintain a secondary entry point, and added the story feature. When users focused on a single deal at a time with a clear CTA, they'd be more likely to click in a deal; raising conversions. I found that all tested users were immediately aware of the gestures for this feature, showing how powerful pre-existing patterns are (Jakob’s Law of Internet UX).

Auditing the old "Membership" page

To improve the personalization and quality aspect of SPC, I revisited the existing “Membership” page and noted a few things that stood out to me. Based on my critique, I later made some UX changes to the screens themselves, like clarifying instructions to save reading time, adding a secondary color to make links look more clickable, segmented navigation that prefaced the next screen, and an upload button for those with a pre-existing photo of their ID. Below, the original design annotated.

A new card design

To reduce friction, I renamed the page “Card” and incorporated personalization to appeal to Gen Z. I decided on using the vertical card iteration because the credit card design might cause confusion amidst the prominence of online pay. When I interviewed several students and asked them what emotions they associated with the card, they mentioned it felt “exclusive” like a “concert ticket;” achieving my goal to elevate the experience quality.

Section 5// Challenges & takeaways

Figure 10. Before and after (mocked in frame) my redesign
Figure 11. SPCs old design system

Old SPC Components

Looking back, I found the greatest issue with SPC's old components was readability; particularly for advertisement cards. SPC's design system has a very clear playfulness to it, but harsh shadows, gimmicky gold borders, and textured backgrounds feel more outdated than modern. I tried to preserve their use of color while communicating affordances and lessening creating cognitive load.

Re-designed Components

Figure 12. Components from my new designs

My takeaways

If my redesign were to ship- metrics I'd look at include MAU, the number of sessions per user, and turnover rate. With more time, I'd also build a more comprehensive sticker sheet, prototype success messages, and other system feedback.
01

Painkillers over vitamins

When looking at time and engineering constraints through something like a Kano Matrix, impact and effort are super important. I tried to apply this mindset to new features by prioritizing critical solutions over nice-to-have features like embedded images and menus. This being said, I didn't have the time to prototype edge cases like no more stories or 0 results for search.
02

Consider the bigger picture

How does a feature apply the design system and build off build off of existing features or data? How does a feature function in the context of the app? I always try to situate my work in the context of a business and my brief. In this case, being realistic about an established app was necessary. I tried to find a balance between leveraging existing work and not letting it constrain the overall design.
03

Design sprints are hard

Being the designer, facilitator, and tester, I admit I was frustrated and disheartened at times. I’m someone who always makes at least 4 different iterations of each feature, and doesn’t move on until my UI is exactly how I envision it. Making paper prototypes, imperfect crazy 8s, and rough storyboards was odd, but wholly necessary. I initially hated myself for setting a 5 day deadline, but reflect back on it as a worthwhile challenge that I will continue in the future. 
(c.) 2021—2022
Next Case Study

Other Fun Projects

(c.) 2021—2022