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.



        I analyzed the competitive products and led the design of the online survey. In user research phase, I was responsible for the interview question design and conducted several semi-structured interviews.


        I led the design phase as design leader including ideation, conceptualization, and concept development. I created the information architecture and was in charge of all the visual user interface design. I also led the effort in interactive prototyping.

      Usability Testing

        I led the design of the usability testing sessions and created the guideline. I moderated several usability testing sessions and was in charge of qualitative data analysis, which were then derived into insights for design refinement.


Context + Target Audience

      Literature Review

        Although previous studies indicate that schools’ curriculum on personal finance education are effective, there are data showing that most young adults turn to their parents for advice when facing financial decision problems. We conducted further research on the barriers and difficulties that parents have met in educating their children about personal finance.


        Online surveys were distributed to parents of teenage children and we hoped to understand what financial concepts parents hope their children learn before leaving home, whether they have attempted to educate their children about these concepts, and whether the process has been successful.


        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 towards this topic as well.

Competitive Analysis

        Through analyzing following popular financial education products for children and financial management products for the general population, we found that:
      • Existing personal finance education apps are either too childish for teenagers or too static to raise teenagers' interests.
      • Personal finance management apps focus on budgeting instead of spending wisely.
      • Few products target late adolescence and emerging adults, who are not yet motivated to learn about complicated financial concepts, yet will encounter personal finance management as soon as they enter college or start working. Therefore, we decided to narrow our user group.

affinity mapping

        Based on the findings, we realized that 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 there are user needs for both age groups, we then delineated the different needs for pre-college teenagers and emerging adults, and brainstormed ideas for both.


Brainstorming & Design Alternatives


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.


Concept Development & Iteration

Information Architecture



The Interactions & The Visuals

Core Functions


      Data visualizations that provide users with their spending and expenditure facts with relevant insights and advices.


      A timeline containing user's purchase history and logs of user’s previous self-reflections.

      Action Center

      Self-reflection cards that require user’s actions will be shown here, and user will also be able to access this module from system-level push notifications.


      This section contains settings for the account, notifications preferences, price thresholds, etc.

User Flow

Interactive Prototype


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.

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 giving the same background color to detailed settings under the same tiatle, and increase the distance between detailed settings under different titles.

      Issue 2: Some users don’t understand what a day, a week, and a month mean when customizing the notification timing by category.
      Solution: Change “a day” to “after a day”, etc. Change “Customized by category” to “Customize Notification Timings”.