Morii

a gratitude-focused social media app

View Prototype

ROLE

UI Design
Prototyping
Research
User Interviews

TEAM

Jasmine To (Team Lead)
Anngie Villegas
Bibilomo Sanni
Dylan Bagwell

TOOLS

Figma
FigJam
Discord
Canva

TIMELINE

February 2023 - April 2023 (8 weeks)

Project Overview

Morii is a social media app focused on users practicing gratitude. 'Morii' is defined as the desire to capture a fleeting moment. The inspiration for the Morii app was "limited social media platforms", such as BeReal, where users have to follow set guidelines to prevent excess scrolling. This was done by limiting users to taking only three pictures of moments they wish to capture and revealing them later in the day for viewing. The app idea was pitched to the class by our team leader Jasmine To in January 2023.

We designed this app for our Interaction Design class, where we were taught and followed the Goal-Directed Design method. Our team spent roughly eight weeks in the spring semester following this design process to bring our prototype to life.

Goals

Design an app that allows users to quickly capture and share grateful moments.
Fufilling a gap of a social media platform without comparison culture.
A tool that merges different gratitude methods in an accessible method.

Figjam Workspace

Our Approach: Goal-Directed Design Method

Goal-Directed Design (GDD) was created by former software designer and programmer, Alan Cooper. GDD is a human-centered design process that provides solutions to meeting users' goals and needs. Goal-Directed Design combines techniques of ethnography, stakeholder interviews, market research, detailed user models, scenario-based design, and a core set of interaction principles and patterns (Cooper et al., 24). This process is roughly divided into six phases of 'Research', 'Modeling', 'Requirements Definition', 'Framework Definitions', 'Refinement', and 'Support'. However, for this project we made use of the first five phases in designing our prototype.

Goal-Directed Design Phases

Research

The research phase is very important in Goal-Directed Design process to gather information that helps determine the users' needs. The research phase is divided into five sub-phases of the 'Kickoff Meeting', 'Literature Review', 'Competitive Audit', 'Stakeholder/SME Interviews', and 'User Interviews'. These sub-phases acted as our starting point in the design process.

Kickoff Meeting

We started off the research phase by holding a theoretical kickoff meeting. In this meeting, group members discussed our plans and goals for our app. This meeting was held on FigJam, an online collaborative whiteboard, and completed by filling out a kickoff meeting template. The template consisted of a problem statement that stood in place of a problem a real-life company would have. There was also a collection of questions that produced assumption statements made by team members about the app and its users. We completed this kickoff meeting template to imagine and imitate what a kickoff meeting with stakeholders in real world settings might be like. We took on the role of stakeholders and defined our problem statement.

Literature Review

After our kickoff meeting, our team understood that the "stakeholder" goal is to help people practice gratitude. We then had to get a deeper understanding of gratitude to aid us in designing an app that helps people practice gratitude. To do so, we reviewed any literature that relates to the domain of gratitude. So we will have the knowledge to make research-driven design decisions. Team members gathered two or more sources to use for our literature review. We gathered sources from academic journals, magazine articles, and online forums. For our research, we focused on the overall benefits of gratitude to get an idea as to why people find it useful to practice. We then looked into the benefits of sharing gratitude with others since we know that out app is a social media app. After looking at the positives of gratitude, we looked into the limitations of gratitude to comprehend why people struggle with gratitude. Lastly, we researched the need for wellbeing related apps to understand what people expect out of wellness apps.

Competitive Audit

There are many gratitude related apps already developed that help people with their practice of gratitude. However, many are solely focused on the journaling method of gratitude. Since our app is a combination of social media and gratitude, we audited from a range of social media apps to gratitude apps. We audited the social media app, BeReal, which was what inspired our app idea. Though it has many great qualities, its purpose is not for gratitude. We then looked into the gratitude app, Happyfeed, which is gratitude-focused. Finally, we audited the video diary app, 1 Second Everyday, which is neither a social media nor a gratitude app, however, it allows video capturing and many of their users find themselves practicing gratitude with the app. Each of these three apps has many great elements, however, these elements needed to be combined to create an app that is a mix of social media and gratitude.

Stakeholder Interviews

User Interviews

Stakeholder interviews are meetings between the design team and those interested in the design or project. Here, the design team would usually record, explain the project, and ask the stakeholders questions to gather information relevant to the topic. This gives an opportunity for the design team to gain insights that leads said project to success. As stated in the 'Kickoff Meeting' section, this project is for a class and we did not have any stakeholders present. Therefore, our design team took the role of stakeholders to imagine what might occur. We did this by filling out the worksheet presented below.

After our team concluded the Stakeholder Interviews portion of the Research Phase, we transferred our focus into user research so that we could see how our assumptions align with possible user goals. Before getting into interviews, our team must consider what kind of users would use our app. The GDD user Research Phase recommends creating a persona hypothesis to help decide who our candidate are for interviewing. Our team looked for interviewees who practice gratitude and those who don't intentionally practice gratitude, but may practice once in a while. Five interviews were held in total, either online via Zoom or in person. In these interviews, we asked interviewees their views on gratitude and questions on how they practice gratitude in their day to day lives.

Collected Insights on an Interviewee

Research Report

User Research Participants

After each interview, our team completed an affinity mapping activity on FigJam. Affinity mapping gives designers a visualization of important relationships by simplifying the large amounts of information received from interviews.

In concluding the research phase, we gathered our recorded insights and processes into a full research report.

Modeling Phase

Identifying Behavioral Variables

After gathering all of our research, we used this information to create a primary persona to represent the goals and needs of our targeted users. After the completion of the research phase of GDD, the next phase is the Modeling phase.

In the Modeling Phase, behavior patterns from user interviews are synthesized into user models, or personas. Personas are not real people but a re-design tools assembled from the behaviors, aptitudes, attitudes, and motivations we saw from our user interviews in the Research Phase. Personas help us understand and communicate how potential users of our app behave and the goals that they have. They are crucial for validating design decisions and informing designers and stakeholders what our users' needs are to keep our focus centered on users throughout the whole design process. Looking at our user research, we identified key behavior patterns.

Defining User Goals

Primary Persona

Identifying Behavioral Variables

Cooper suggests creating brief points to define users' goals based on the behavior variables identified. We first worked on synthesizing characteristics of our user. This was a process of detailing the key behaviors into actions a user may perform.

Our team then defined four end goals (what the user wants to do) and a life goal (who the user wants to be) for our primary persona.

To give our persona more relatability, we brainstormed a name to identify them with. Using our synthesized characteristics and defined user goals we created our primary persona, Presley Parker.

End Goals, wants to be able…

To quickly share her gratitude w/ close friends and family
To see friends’ and family’s grateful moments
To use a social media without comparison
To be able to choose between different features like journaling, photo sharing, and voice affirmations

Life Goal, wants to be…

someone who shares gratitude to maintain a positive well being

Presley Parker

20 years old

Sophomore in college

Journalism major

Chicago native

Loves photography and taking pictures of friends, especially on film

Persona Narrative

Presley is a sophomore studying journalism at the University of Chicago. As the head photojournalist for her school newspaper, she often visits the surrounding areas of Chicago to document and review the food, culture, and sites. While traveling around the city, she likes to take photos of little moments that make her happy to reflect on either through vocal affirmations when she doesn’t have much time or writing in her gratitude journal when there’s more time to do so.

She would like to post these little moments onto her Instagram account to share with her friends and family, but these pictures always end up sitting in her camera roll because she feels they aren’t Instagram-worthy. She feels pressure to post perfectly crafted and edited photos to fit in with everyone on Instagram.

Due to the competitive social media environment, she hopes to find a space where she can publicly post her grateful/joyful moments with her friends and family and express her gratitude to the fullest without feeling anxious about what others think.

Requirements Phase

Following the modeling phase and the creation of our primary persona, our team needed to define our requirements. This is what is required for our application to help our persona to achieve their goals. To extract these requirements, we went through various steps to create a Context Scenario for our primary persona. A context scenario is a written series of interactions our primary persona would have with the Morii app.

In this phase, we also created a problem and vision statement. Our team had already created a problem statement during our theoretical kickoff meeting. So, we moved on to editing our original problem statement by adding more defined details. Meanwhile, our vision statement was centered on our users’ goals in relation to our app.

Problem Statement

The current state of gratitude has focused primarily on how to privately practice it. What existing products/services fail to address is quickly sharing moments of grtitiude with loved ones. Our product/service will address this gap by creating a social media for gratitude that allows users to capture and share the exact moment of gratitude

Vision Statement

The new design of Morii will help users achieve gratitude practice and improved mental state by allowing them to express, document, and share their moments with greater efficiency; without problems of organization, comparison, and negative perspectives that they currently experience. This will dramatically improve people’s well being and lead to increased social usage of gratitude practice.

After noting our problem and vision statement, we took the time to brainstorm our ideas of our application’s layout and features. After brainstorming, we identified our primary persona’s expectations.

These expectations are based on users' attitudes, experiences, and aspirations. To do so we divided our persona's needs into ‘Data Needs’ and ‘Functional Needs’. We began to write our context scenario after defining our users' needs. For our context scenario, we wrote a series of interactions our primary persona would have with the Morii app.

To conclude this phase, we finalized our Requirements List. A requirements list details the needs of This was done by extracting the information we wrote in our context scenario. This list was categorized by 'Requirements for Primary Persona' and 'General Requirements'. We reordered the requirements list in order of importance to wrap up this phase.

Requirements List

Frameworks Phase

Key Path Scenarios & Validation Scenarios

Following the requirements phase, our team began working on our low fidelity wireframes. These low fidelity excluded detailed features and colors. We focused on defining our prototype's structure. We used our requirements lists to create features; turning each requirement into an app feature. After wire framing we constructed our Key Path Scenarios. A key path scenario is the most used path or steps our primary persona will take while using our app. We used color coded arrows to identify the key path scenarios throughout our wireframes.

Validation Scenarios are the less followed or used paths by users on an application. They are oftentimes more in number than key path scenarios. After adding items from the key path scenarios or validation scenarios to the wireframe, we crossed out the item on the requirements list.

Wireframe including Key Path (yellow) and Validation Scenarios (blue) (FigJam)

Refinement Phase

Refinement through Usability Testing

Next, our team moved on to work high fidelity prototyping on Figma. Previous to this most of our work in the previous phases took place on FigJam. In this phase, we also refined our prototype through Usability Testing.

We performed three tests with participants from the Research Phase. Our team leader moderated these tests by explaining the app's concept, introducing the test, and asking questions. These tests were conducted remotely on Discord. Each participant walked through the prototype while explaining their experience, and their likes or dislikes. Some of their feedback included:

Participants expressed that the interface was easy to understand and follow along. They were able to understand the function of each element without confusion.

Although not verbally expressed, participants seemed confused by the application's time switch transition (the app's interface changes at 8 pm when users are allowed to view their friends' post & post their capture of the day).

Participants were confused by how many pictures needed to be taken daily.

Participant suggested moving up the "next button" that is shown in the tutorial screens due to some users having bigger phones.

Based on the constructive feedback received during usability testing, our team made refinements to our final prototype. We changed the frames' color scheme (darker colors of blue & purple) for when users are on the app after 8 pm. This highlighted the fact that the application went through a time transition. We adjusted our capture screen to emphasize that three pictures could be taken daily. We also increased and adjusted the placement of the "next button" on the tutorial screens for users with bigger phones. Our team, work on refining other elements of our prototype that stood out to us even if they were not mentioned during usability testing.

App Color Scheme Transition (after 8pm)

Conclusion

Working on Morii was my first experience using a design method to execute a prototype. Using design method taught me the design process consists of thought processes and evaluations before you start wireframes. I gained insightful experience working on UX research and UI design. Decision decisions should be rooted in real user data and information to act best in users' needs. Although we faced some constraints, final prototype was based on research which strengthen its usability.

Through modeling, we identified our users' needs and behavioral patterns between users. By defining requirements and creating a context scenario, we could detail the possible user interactions. Creating wireframes with the key path and validation scenarios provided usability context before creating high fidelity wireframes. Concluding, on the refinement phase allowed us to reach real users through usability testing and make adjustments based on feedback.

Key Takeaways

Overall, I genuinely enjoyed creating an app that promotes taking the time to appreciate moments you are grateful for in your daily lives. In the age of social media apps, finding a way to connect without comparison or doom scrolling is slim. I am very proud we could realize this idea.

Due to time constraints, we could not realize every feature on our prototype. I believe we could have benefited from more user interviews and usability tests. Additional user interviews and user interviews would have helped us gain more information on how people practice gratitude and their relationships with social media apps to inform our design. Despite this, I gained a valuable experience that I can use to my advantage when working on future projects.

Works Cited