OVERVIEW

Introduction to Mirror Mirror Mobile App

The application is meant to help emerging adults, those in their early to mid-twenties, reflect on the purchases they make to increase mindfulness of spending habits and allow them to make small changes overtime to improve their financial condition. This application will let you evaluate and categorize your purchase a short time after your purchase, and will encourage you to reflect on that purchase again a day, a week, or a month later depending on your preferences.

      INFO

      Category

        HCI Foundations Group Project @ Georgia Tech

      Duration

        Aug. 2017 - Dec. 2017

      Keywords

        UCD Process, User Research, Finance, Mobile App

      Team

        Jason Paul, Michelle Ma, Sijia Xiao, Tony Jin

      Research Methods

        Literature Review, Competitive Analysis, Survey
        Semi-structured Interview, Task-based Usability Testing

      Tools

        Paper and pen, Sketch, Balsamiq, InVision, Photoshop

      PROCESS

      MY ROLE

      Research

        Conducted the competitive analysis; designed the survey and interview; conducted semi-structured interview.

      Design

        Led the design phase including ideation, concept design and development; designed the user interface and crafted the interactive prototype; led the iteration.

      Usability Testing

        Designed and moderated the task-based user testing session; qualitative data analysis, design refinement.

UNDERSTAND

The Context + Target Audience

We started with a vague idea
"To help young Americans improve their financial literacy."

      Literature Review

      Objectives

    • Understand the general social background of financial education for the young.
    • Investigate existing solutions and channels that children and parents utilize.
    • Uncover barriers and unsatisfied user needs which lead to potential design space.
    • Derive questions to ask in further user research stage.

      Findings

    • Young people are lack of financial knowledge and are lack of motivation to learn.
    • Existing solutions focus on in-class education, teaching children about financial literacy. There is few solution focusing long-term improvements.
    • Most young people turn to their parents for financial advices.

      Competitive Analysis

      Objectives

    • Explore current products and seek for unfilled design space.
    • Investigate existing solutions and channels that children and parents utilize.
    • Findings

    • Most products focus on either saving and budgeting, or providing educative content.
    • The more educative a product is, the less interactive and motivating it would be.

      Survey

      Why this method

        We decided to start with an online survey to as it was the best way to collect massive data with limited time and resource. The findings can help us narrow down our scope and derive research questions for the interviews.

      What to ask

    • Young people's attitudes towards learning financial literacy.
    • Their parents' attitudes towards financial literacy education and current approach.
    • Financial concepts parents consider important for their children to learn.
    • The barriers and difficultis they encountered so far.

      Findings

    • Financial literacy seems to be a distant topic to the young people, and therefore they lack motivation to learn about financial knowledge.
    • It is hard for children in early adolescence to understand complex financial concepts.
    • Parents consider financial education extremely important to their children. However, they lack proper methods and tools.
    • Budgeting, staying out of debt, and price vs. value (knowing the difference between the true value of a product and its retail price) are the top three concepts that parents want their children to learn before leaving home.

      User & Expert Interview

      Why this method

        We conducted several semi-structured interviews with parents and also financial experts to dive deeper into existing channels parents adopt to educate their children about personal finance and the problems they encounter. We also obtained insights about children’s attitudes through our participants.

      What to ask

    • Parents' attitudes towards financial literacy education and their current approach.
    • Ask detailed questions about what problems they encountered when teaching their children about financial topics.
    • Gather feedbacks about our previous findings and discuss possible new approach.

      Findings

    • Parents usually utilize practical methods to teach their their children about finance, like opening bank accounts and letting them manage their own financial resources. These methods are considered every effective. Some parents share their knowledge during casual daily conversations as well.
    • Some parents consider themselves inadequate to teach their children about finance.
    • Pre-college teenagers do not think financial literacy important when they live with parents; once they leave home for college, they start to realize the importance of this topic and need to learn.
    • Not only teenagers but also adults in their early 20s have little knowledge about how to manage their financial resources.
    • A lot of people use budgeting apps to keep track of their spending. However, they only have a vague idea about how the data in financial apps can actually help them.

      affinity mapping

      Key Insights

    • Both pre-college teenagers and emerging adults aged between 18 and 25 have the need to learn to better manage their financial resources. Younger children are less motivated to improve their financial literacy.
    • The mostly mentioned concepts were learning about price vs value of a product, maintaining budget, and staying out of debt.
      • As the user needs for pre-college teenagers and emerging adults are different, we should delineated the different needs and brainstormed separately.

IDEATE

Brainstorming & Design Alternatives

Mindmap

Design Concepts

        The ideas were then integrated into 4 concepts. Concept 1 and 2 targeted at emerging adults while concept 3 and 4 were focused on younger teenagers.

        Concept 1

        Encouraging users to reflect on their own purchases over time, and using the self-reflections to improve spending behaviors.

        Concept 2

        Visualizing one’s future financial conditions based on current budgeting trends, and making distant financial concepts more relevant to now.

        Concept 3

        Providing a tool that encourages parents to co-plan a major family expenditure with their children and discuss financial concepts through practices.

        Concept 4

        Giving children an opportunity to practice through letting them control part of household money and reward them when making good spending decisions.

User Feedback & Design Implications

We have interviewed 15 participants, bringing all 4 concepts to them for feedbacks. With insights obtained from the participants, we decided to proceed with concept 1 as the core concept with incorporating the short-term financial status analysis feature from concept 2. Apart from the decision, we also derived several design implications from the interviews.

        Feedback 1

        Different products have very different lifecycles and need to be evaluated at different times. More flexible notification settings are preferred as well.
        Implication: The design should provide customizable notification and time settings regarding the self-reflections.

        Feedback 2

        It can be troublesome for users to reflect on all purchases, especially the trivial ones and large spendings, which tend to be well thought-out.
        Implication: The design should enable users to set up a price threshold for purchases they would like to assess very easily.

        Feedback 3

        Learning about when they have made poor purchasing decision is not enough. Some users indicated they would like to know what they should do about it.
        Implication: The design should not only provide the users with purchasing data and insights, but also actionable suggestions on future behaviors.

Conceptualize

Concept Development & System Layout

We convened what we learnt from user research and sketch feedback sessions
into this design concept
" To help emerging adults self-reflect on their purchases in a retrospective manner
so as to identify what spending gives you the best value through aggregating the data inputted in long-term
and to inspire behavioral change over time through providing actionable insights. "

Information Architecture

Wireframes

Design

The Solution: Interactions & Visuals

Gradient & Colors

Key Features

      Insights
      ——

      Personalized actionable advice on how to spend you money

      The app keeps track of your purchases over time. Our algorithm aggregates the data the your input over time and help you discover trends of your spending. We won't discourage you from spending; instead, we help you spend your money in a way that provides you with the best value.

      Reflections
      ——

      Only you know how much a product worth to you

      Instead of imposing arbitrary and impersonal financial plans on you, we let you reflect on your purchases and help you identify what kind of spendings provides you the most value over time. Only you would know what you actually want.

      Action Center
      ——

      Quick and frequent, reflect your thoughts

      We will prompt you with the reflection action flash cards each day after the purchase, and we encourage you to reflect multiple times after some time too. This helps track your attitude change towards each purchase over time, so that you will know better when and where to spend your money next time.

      Settings
      ——

      Everything is customizable, everthing

      We know that you don't want to be notified on every purchase. Therefore, you can define a price range for items that you believe worth evaluating. And for all purchases within the pricing threshold, we will send you a reminder for follow-up reflection after some time based on your settings.

User Flow

Interactive Prototype

Evaluation

Usability Testing & Design Refinement

Task-based User Testing

To identify usability problems of the design and collect feedbacks on the design concept in general, we have conducted a task-based usability testing with several potential end-users. The users were given high-level description of 4 tasks which involved the core functionalities of this app. The users tried to accomplish the tasks while thinking aloud. Follow-up questions regarding feature awareness and general feedback have been asked in the post-test interview and the users were asked to fill out a survey about demographic information, their purchasing habits, and their subjective ratings of the usability of the app(adapted from the System Usability Scale, or SUS).
To measure the learnability and memorability of our design, the users were then asked to perform the tasks again. We asked the users to compare their experiences completing the tasks in the two rounds. Users’ subjective feedbacks indicated that even though the concept is intrinsically complex, the app is considered highly usable, learnable and memorable.
For more details, check out our Usability Testing Guide

Feedback & Insights

      Insights Tab

      Issue 1: Some users were confused about whether the emotional category of the product (e.g. Necessity vs. Treat Yourself) is decided by the system or inputted by the user.
      Solution: Add a tutorial when users first use the app to perform a self-reflection.

      Issue 2: Some users voiced that there is too much text on the insights page.
      Solution: Only provide an one-line suggestion for each recommendation presented in this page. Make it really clear through visual design that the one-line suggestion can be clicked in order to see further details and evidence supporting the suggestion.

      Issue 3: Some users mentioned that the wording of the suggestions might sound controlling and need to be refined, though they are open to recommendations that are phrased properly.
      Solution: Try to rephrase the recommendations, though it is not the core issue of our project.

      Action Center Tab

      Issue 1: Several users were confused about which buttons are clickable on the reflection card.
      Solution: Develop a color scheme to indicate different states of a button/label (clickable/selected/unclickable), and keep the style consistent throughout the app.

      Issue 2: People were confused about why we asked them when they’ll start using the product. Some didn’t notice the field at all.
      Solution: Explain the start date into the tutorial. Move the start date field to a more prominent location and potentially increase its size.

      Issue 3: Some users are confused about the difference between factual categories (food, clothing) and emotional categories (necessity, treat yourself).
      Solution: Remove factual categories from reflection cards.

      Issue 4: The wording of the questions are confusing. Some didn't understand why we ask them to categorize the purchase while giving them several emojis to indicate their emotions. Some thought that the comments are for the product itself. Others think that the question about comments is compulsory.
      Solution: Rephrase the question and make it clear that we are asking them about their emotions. Add a hint text to the input box saying that it’s optional, and decrease the size of the comment box.

      Reflections Tab

      Issue 1: The “required action” filter seems confusing to several users. Some users expect those cards to take them to the action center, where they can complete the required actions.
      Solution: Delete the “required action” filter in the reflection tab. Add a list view option to action center, so that the users can see a list (timeline) of all the cards that need to be filled out.

      Issue 2: One user mentioned that she’d like to see more information on the reflection timeline itself.
      Solution: Design a color scheme that corresponds to the 5 emojis that represent user’s feelings about a product. Color code all the cards in the timeline to indicate whether the user is satisfied with the purchase or not. Iteratively test the color code and A/B test the version with color coding against the current one without color coding.

      Settings Tab

      Issue 1: Some users mentioned that there’s a lot of content on the settings page.
      Solution: Change the UI design so that on each page, each section’s title clearly indicates what’s in that section, and that it is clear that the detailed settings in each section appear to be in the same group. We can achieve this by increasing the distance between detailed settings under different titles and changing the title to uppercase.

      Issue 2: Some users don’t understand what a day, a week, and a month mean when customizing the notification timing by category.
      Solution: Refine the explanation for that section and highlight the keywords.