Mogo Financial Technology
2016-2018 · Product and interaction design

Mogo

Make financial choices easier to understand. At Mogo, I worked across credit monitoring, spending, and lending, progressing from Intermediate to Senior Designer.

I used customer feedback and call-center insights to guide the work, then designed interfaces and motion prototypes with engineering for web, Android, and iOS.

This work was part of a growing financial platform that reached 600,000 members across Mogo's products by April 2018.

MogoProtect

From concept to launch for credit-inquiry alerts: 3 months

I led the product's design end to end. The team delivery timeline is documented in Mogo's November 2017 launch announcement.

MogoCard's web experience presents artist-designed cards through an animated gallery

Credit monitoring

Make new activity visible

MogoProtect was the first project I led end to end at Mogo. It alerted people to credit inquiries on their Equifax profile.

Building on shared wireframes, I designed the interface, motion, and interactions. A radar visualization represented inquiries, while a distinct new-alert state drew attention to activity the person had not yet reviewed.

MogoProtect with a previously reviewed alert

MogoProtect highlights new alert details in yellow

Alert states

Make the difference between new and reviewed unmistakable

A new credit inquiry
MogoProtect surfaces activity on the person's Equifax profile
Draw attention to the details
A distinct new-alert state makes unreviewed activity stand out
Recognize what's been reviewed
The reviewed state distinguishes familiar activity from a new alert

The two recordings above show the visual distinction between new and previously reviewed activity

Card selection

Give a practical product a personal choice

MogoCard offered designs by Canadian artists. I led the gallery experience so people could explore the options and choose a card that felt like theirs.

I worked with developers on the selection animation and transitions between designs. The prototype made the intended behavior concrete, including how the gallery responded as someone moved between options.

The selected card moves into focus as the next option comes into view. The prototype made that relationship clear for implementation.

Spending goals

Set a goal. See where you stand

User requests, call-center insights, and survey feedback supported a spending-goals feature. We framed the experience around a goal people could work toward.

I built a prototype in After Effects and Proto.io to show engineering and stakeholders how the interaction should behave. The prototype and screen designs supported implementation of the feature.

Mogo spending goal showing eight days left, a remaining budget of $150.34, and a daily budget of $18.79 — Time and money are shown together: days remaining, budget remaining, and today's allowance. A design-state export from the original Mogo source file

The prototype connects setting a spending goal to seeing it in the account. The movement explains a change of state rather than decorating the screen.

Financial understanding

Make comparisons easier to inspect

I designed an interactive credit-score dial with Lottie, working with engineering on the keyframes and transitions that explained different score ranges.

For a loan-versus-credit-card tool, I designed the interaction for entering amounts and comparing modeled costs over time. The interface brought the inputs and resulting comparison into the same view.

Credit-score dial demonstrating ranges and their explanations

Historical cost-comparison demo showing how changing inputs updates the modeled totals

Product communication

Carry the experience beyond the dashboard

With the UX Lead, Art Director, and graphic design team, I also designed product marketing pages. Research helped us decide what information people needed before exploring the products.

These pages combined product explanations, interaction examples, and visuals featuring Mogo employees. The work connected the initial introduction to the experience inside the account.

Mogo financial product marketing page — Opening of the product introduction · View the full page

Mogo credit-score product marketing page — Opening of the credit-score product page · View the full page

Craft and delivery

Make the intended behavior part of the design

Across these projects, I helped develop a shared design system and used prototypes to resolve the details that static screens left open.

The enduring part of this work was the connection between product intent and implementation: what an interaction communicated, how it responded, and how to deliver that behavior with engineering.

Announcements and coverage

The products in the public record

Mogo via CNW · August 22, 2016 · Launch releaseCredit score, spending, and loans in one accountThe account and iOS app launch connected monthly credit-score updates, prepaid spending, and personal-loan pre-approval BetaKit · February 23, 2017 · Industry coverageA digital spending account with a prepaid VisaCoverage of Mogo's spending-account launch and its place in the wider product offering Mogo via CNW · November 28, 2017 · Launch releaseMogoProtect launchesThe credit-monitoring product brought identity-fraud alerts into the account experience Ivey Business School · April 2019 · Company profileA connected financial-services platformAn independent profile documents personal lending, credit scores, prepaid spending, and the expansion into cryptocurrency

Continue exploringMogoCrypto: research and onboarding