NU Community App
A three-part design project to create a community social media app for Northwest University. During phase one our team identified an opportunity for design and worked through the processes of journey mapping, sketching, wireframing, and prototyping an initial app. I later individually revisited our designs as part of a research project. For phase 2, I conducted a usability evaluation with students and generated a report of recommended improvements. Finally, during Phase 3, I redesigned the app flow and navigation as well as individual screens to create a better experience.
Project Type
Student Project
App Design
Research
Date
Phase 1: February-March 2024
Phase 2: October 2024
Phase 3: November 2024
Role
Phase 1: Team Manager
Phase 2: Lead Researcher
Phase 3: Lead Designer
Phase 1: Discovery + Design
During Phase 1, I worked with a team to identify an opportunity for design and then storyboarded, sketched, wireframed, and prototyped an app design.
Project Type
Student Group Project
Discovery
App Design
Date
1 Month
February-March 2024
Role
Team Manager
Lead Designer
Discovery
For this project our class was separated into teams of four. My team started the first phase of our project with discovery. The general design prompt we were given was “How might we support NU students in their spiritual life? The constraint for this class project was that our solution had to be an app design.
After a brainstorming session involving lots of sticky notes we settled on a more specific area of focus. “How might we create an online community where students can connect and support each other in their spiritual life?”
Next, we took this idea and started to outline all the details, we named our product “NU Community” because we want it to be a digital extension on the community many students experience on campus. At this point we revised our goal statement once again settling on “How might we create an online community where students can connect and support each other in their spiritual life and be supported by Campus Ministries?” We defined why this was important, creating a list of our most relevant reasoning. We also worked to create the beginnings of a persona and start thinking about why she would want to use our app. Next we wrote a value proposition statement that highlighted some more of our ideas for features.
Then we defined some benefits, desired outcomes, and hypothesized resources for this project.
Inspiration
After completing the Discovery portion of the project we started thinking about the logistics of how to make this product come to life. Jakob’s law, states that “Users spend most of their time on other sites” which means that when designing for an audience it is good to look at the products they are already using for inspiration.
We brainstormed ideas of apps that we use and that other students use to pull inspiration from including GroupMe, Instagram (Threads), The You Version Bible App, Discord, Facebook.
Design Brief
After gathering some inspiration from other products we set out to create a design brief that would outline our objective, audience, team, scope, and deliverables.
Background
The purpose of this project is to design an app for Northwest University students that provides a place for online spiritual community and helps to bridge the gap between students and the Campus ministries team. Northwest University advertises themselves as being committed to "building a learning community dedicated to spiritual vitality." This app would help connect students and create a vital spiritual community.
Objective
The goal of this app is to provide an app where students can post prayer request, questions, and praise reports. These could be shared with the NU community or sent directly to Campus Ministries. This app would eventually replace other methods for communication used by Campus Ministries including a number which students can "anonymously" text for prayer, which is rarely used.
Target Audience
The target audience for this app would be Northwest University students, specifically undergraduates. Any students that are currently enrolled in Northwest would be able to use this app at any time. These students often spend most of there day on laptops and phones. These students are very busy. These students often prioritize other things than their spiritual life. Using this app would benefit them because it would be an easy way to incorporate praying for people, spiritual conversation, and acknowledging what God has done into their daily lives.
Team and Stakeholders
Team: Rachel Propes, Djordje Mitrovic, Aidan Tinnon, and Paige Berger
Stakeholders: Northwest University Administration and the Campus Ministries Team
Scope
In Scope:
-
Designing this app for Northwest University students
-
Designing the student view of the application
-
Designing one user flow
Not In Scope:
-
Designing for students at other universities
-
Designing the Campus Ministries team view of the application
-
Designing screens that will not appear in the initial user flow
Deliverables
-
Discovery Notes
-
Design Brief
-
Story board
-
Branding
-
Site Map
-
Sketches
-
Wire frames
-
Style Guide
-
Mock-ups
-
Prototype
Story Boarding
Then we took that journey map and turned it into a storyboard that reflected how a student would use our app and the impact. For the first part of this assignment each group member was supposed to create our own persona. I created a character called Confused Carl and detailed his journey.
Then we brought our ideas together and applied them to the original persona we started to create during one of our early brainstorming sessions, Olive.
Branding
Next, we worked as a team to develop branding for the app. Much of what we utilized was derived from the Northwest University Style Guide for the purpose of ensuring cohesion with the University. We created a logo for the app and determined colors and typography as well as worked on the brand personality characteristics.
.png)
Site Map
The next step in our process was to develop a site map that showed all pages of the app and their connection to the home screen.
Sketches
Then we started to sketch our app user flow, this was another individual portion of the project where we all went our separate ways to create what we imagine the layouts of each screen in the user flow to look like. This was mine.
Then we brought our ideas together and I sketched a user flow that combined our favorite components from each person’s ideas.
At this point we were able to gather class feedback from other teams and incorporated those insights into a final sketched user flow so that we could begin wire framing. Here is a selection of the screens with the changes we made highlighted.
Wire Frames
For this portion we each selected several screens to create low-fidelity wire frames of and gathered them into the user flow. These are some of the screens that I worked on.
We had the opportunity for another class feedback session, following this we refined several screens before moving to a higher level of fidelity. Here are some screens with the most changes.
.png)
Then we increased the fidelity and started to add shading, icons, and details.
Style Guide
Now that we had created a fully planned user flow in the form of a wire frame, we worked to create a style guide. This was another area that I focused on. I created our color palate, type ramp, and defining spacing and applying all of these styles into Figma. While other group members collaborated on creating components and variants for all of our elements.
Final User Flow
Finally we applied everything from the style guide and all of our components to build out the final version of our app flow. Here are some selected screens from that flow.
.png)
Prototype Walkthrough
We created a walkthrough and made a scripted video to show the process of our persona Olive as she uses the app. Here is a link to access the app prototype (Link to Prototype)
Here is a link to access the walkthrough video (Link to Video Walkthrough)
Phase 2: Usability Research
During Phase 2 of this project I worked to evaluate the previous design of the app through usability testing and identify opportunities for improvement.
Project Type
Student Project
UX Research
Date
2 Weeks
October 2024
Role
Lead Researcher
The Initial App
NU Community a place for NU students to connect in spiritual community through a digital platform. Allows users to post prayer requests, ask questions, and access the Campus Ministries team.
Research Plan
The first step of this project was to create a research plan.
About
This document reflects a research plan for thinking aloud testing, which is a usability procedure that sets potential users in front of a product and asks them to use the product while speaking aloud about their experience, for the purpose of gaining user insights and identifying opportunities for improvement.
Background
The purpose of this study is for the evaluation and improvement of the connect feature of the campus spiritual life app. It is important to ensure that users will be able to understand the design of the app and how to use the features. The app is designed to make it easier for students to connect with campus ministries and their community, it is important that this app simplifies the process instead of complicating it. For this project, our design challenge is: How might we conduct usability research on the campus spiritual life app to evaluate the usability of the app feature and identify opportunities for iteration to improve the interface.
Business Questions
-
What are students’ first impressions of the connection feature of the spiritual life app?
-
Would students be interested in utilizing this app to connect with community, have their questions answered, and receive prayer?
-
Are there any confusing aspects of the process that may discourage students from using the app or make it more difficult to use?
Decisions and Outcomes
This research will inform the following decisions
-
User flow
-
App hierarchy and page structure
-
App navigation
As a result of this research, our team will
-
Adjust the user flow to meet user needs and provide for understanding.
-
Determine if the structure and hierarchy of the app matches the user’s mental model and make changes.
-
Ensure that app navigation is effective and allows users to effortlessly navigate the app.
Audience and Sample Specifications
The target audience for this experience is Northwest University undergraduate students. Approximately 18-25 years old. To represent this audience, we need to hear from demographically representative participants who match the description above, with specific focus on students who are not serving in campus ministries. We need to hear from about 3-5 users to represent this audience’s point of view. Due to budgeting and time constraints, this sample size will provide enough insights, and this representation is likely to catch any major usability errors.
Stakeholders, Timelines, and Milestones
Stakeholders
-
Rachel Propes (Project Mananger, Lead UX Researcher, Lead Designer)
-
Theoretical Client (Northwest University
Proposed Research Methodology
This study will apply thinking aloud protocol for the purpose of evaluative insights. Evaluations will take place in an available quiet uninterrupted location. Using the Figma prototype mock-up screens. No additional testing needed for this stage of research. Individual sessions should be completed within 15 minutes.
Research Questions
Research Questions to address in this study include:
1. What are students’ first impressions of the connection feature of the spiritual life app?
a. What are student’s impressions based on a verbal description prior to seeing the app mock-ups?
b. What are students’ first impressions after their first interactions?
c. What suggestions do students have to make this app better for student’s use?
2. Would students be interested in utilizing this app to connect with community, have their questions answered, and receive prayer?
a. Would students want to use this app?
b. Do students feel like this app would be meeting a need that they have?
c. Would students feel comfortable being vulnerable to the community through this app?
d. Do students trust the anonymous submission feature?
3. Can students successfully use the app to submit requests and interact with the community?
a. Are students able to successfully submit a question?
b. Are students able to successfully submit a prayer request?
c. Are students able to successfully navigate the app features?
d. Are students able to successfully view the answered question?
4. Are there any confusing aspects of the process that may discourage students from using the app or make it more difficult to use?
a. Is anything in the UI unclear to students?
b. Can students understand the navigation and hierarchy of the app?
Research Study Methodology: User Tasks
To support the research questions above, users should be asked to complete the following tasks:
-
Warm up: Ask about the use of current spiritual life apps and needs that are unaddressed
-
Task 1: Walk through the onboarding, feed, and navigation
-
Task 2: Submit a question
-
Task 3: Submit a prayer request
-
Task 4: View notifications and responses
Research Study Methodology: Preparation, Set-Up, Materials
To support the research questions above, the observations session requires.
-
Software: Figma (Prototype)
-
Hardware: PC with keyboard and monitor; no additional peripherals needed
-
Recording: Device and platform
-
Notes: Researcher & observers will need script and note-taking tools (paper and pen recommended for best focus)
-
Other lab /set-up requirements: No additional materials or custom configurations are needed.
The Research
Next, I followed this research plan, along with my research protocol script to collect feedback from users.
.png)
Research Report
Finally, I created a research report to present my findings and recommend next steps.
Executive Summary
-
In person think aloud app walkthroughs were conducted for the purpose of understanding how users would interact with the app and their thoughts about it.
-
Four participants were tested, recruited from the Northwest University campus
-
They all understood how to use the product and saw the value in implementing this type of app for student use.
-
75% of users liked this app compared to current ways of connecting with campus ministries.
-
75% of users had a concern about privacy related to the anonymous posts
-
4.36/5 was the average rating given to the overall app experience by participants.
Introduction
This report outlines information about the usability research conducted on NU community a new spiritual life app for Northwest University students. How might we create a feature for the new Northwest University Spiritual Life app that helps students to better engage in spiritual life on campus through better connection with their community and easier interaction with campus ministries.
Research Goals
1. Hear students thoughts on adding a community feature to the campus spiritual life app.
2. Find out if students would be interested in utilizing the app to connect with their community, have their questions answered, and receive prayer.
3. Discover any confusing aspects of the app walkthrough that may discourage students from using the app or that make it more difficult to use.
Business Value
-
Understand what students first impressions of this feature being added to a spiritual life app are.
-
Find out if students would use this portion of the app and if they find its features valuable.
-
Discover any confusing aspects of the process that would discourage users from using the app so those can be fixed before development.
-
Ensure that the value prop of the app is being communicated to the user through the app
Methodology
-
In person usability testing
-
App mid fidelity prototype walkthrough, limited interactions
-
Utilized think aloud protocol and a defined list of qualitative and quantitative questions
-
Sample size: 4 participants, Northwest University students
-
15-20 minutes of testing with each participant
-
Recorded participants interactions in a quiet location on campus, limited distractions
Results
-
75% of users had a concern about privacy related to the anonymous posts
-
50% of participants seemed confident that they would regularly use the app
-
4.36/5 was the average rating given to the overall app experience by participants.
-
75% of users felt that the app would help them to see more seen and heard by their community.
-
100% of users recognized and utilized wording from the initial value proposition laid out in the discovery phase of developing this app.
-
The appearance and functionality of the anonymous feature was overall the most confusing aspect of the app.
-
25% of users wished the app wasn’t just text based but also allowed users to add images
-
75% of users liked this app compared to current ways of connecting with campus ministries.
Recommendations/Next Steps
1. Improve the appearance of the anonymous feature to make it more clear that people can’t see their posts.
2. Add photo capability so that users can attach a photo of someone to pray for or attach a photo of their praise report.
3. Simplify the menu and navigation with filters rather than separate pages
4. Ensure sufficient notification preferences options so that users have complete control over how many notifications they are getting and when.
This design improvement will be out of scope for the redesign since there isn't anything any the current user flow signifying what actions pertaining to notifications are currently possible. This is an example image of Facebook's notification preference options.
5. Add a way for users to respond back to responses from others, reply to a question being answered, thank people for praying, etc.
Phase 3: Redesign
During Phase 3, I took the recommended improvements I had identified during the research study and worked to implement them into a redesign of the app. I redesigned most screens of the user flow.
Project Type
Student Project
App Design
Date
1 Month
November 2024
Role
Lead Designer
Background
I previously worked with a team to design NU community, a social media style app for Northwest University students to connect through posting prayer requests, questions, and praise reports. As a follow up to that project I conducted usability testing with the target audience to determine what improvements were needed and created a list of recommendations for how to improve the app. In this third phase of the project, I had the opportunity to implement those changes to create a new user flow design. Here is my design process.
Problem Definition
The goal of this app is to fix a divide that currently exists between members of the Northwest University community, and also between students and the Campus Ministries team. Our proposed solution was to create an online platform to allow students to connect with one another and receive support from Campus Ministries through a social media style app.
Usability Study
During Phase 2 of the project I conducted a usability study with participants who are part of the target audience for this app. Participants were presented with a prototype walkthrough of a mid-fidelity version. I used think-aloud protocol, a rating scale, and scripted questions to gather feedback on the functionality of the current app design. I was also interested to hear if participants were interested in using this type of app, and what features they would be interested in seeing.
Research Insights
-
75% of users had a concern about privacy related to the anonymous posts
-
50% of participants seemed confident that they would regularly use the app
-
4.36/5 was the average rating given to the overall app experience by participants.
-
75% of users felt that the app would help them to see more seen and heard by their community.
-
100% of users recognized and utilized wording from the initial value proposition laid out in the discovery phase of developing this app.
-
The appearance and functionality of the anonymous feature was overall the most confusing aspect of the app.
-
25% of users wished the app wasn’t just text based but also allowed users to add images
-
75% of users liked this app compared to current ways of connecting with Campus Ministries.
Prioritized Goals
From these results I prioritized goals and recommended improvements for the design and functionality of the app.
1. Anonymous feature
-
Goal: Improve the appearance of the anonymous feature to make it more clear that people can’t see their posts.
-
Reasoning: Users were concerned that they couldn’t tell if a post was anonymous after posting it, previously posts appeared in the same way as publicly posted content.
2. Menu and Navigation
-
Goal: Simplify the menu and navigation with filters rather than separate pages
-
Reasoning: The extra pages are a strain on users cognitive load, and over complicate the navigation
3. Reply and Respond
-
Goal: Add a way for users to respond back to responses from others, reply to a question being answered, thank people for praying, etc.
-
Reasoning: Users do not want the conversation to be complete after a response, participants of the study seemed interested in keeping the conversation going.
4. Post Submission Page
-
Goal: Rework structure of post submission page
-
Reasoning: After learning more about industry standards I am aware of opportunities to improve this page
5. Photos
-
Goal: Add photo capability so that users can attach a photo of someone to pray for or attach a photo of their praise report.
-
Reasoning: Users felt this would help them to be more engaged in using the app.
6. Notifications
-
Goal: Ensure sufficient notification preferences options so that users have complete control over how many notifications they are getting and when.
-
Reasoning: Study participants mentioned concerns over too many notifications
-
Note: Out of scope for this design project as these changes do not impact any of the screens for this selected user flow.
Before and After
This is a screenshot from my Figma design file, the top row is the design at the beginning of phase 3. The bottom row shows my updated app along with a detailed description of each change made. (Figma File)
Here are highlights of some of the changes made between the main app screens.
Specific Changes
1. Improve the appearance of the anonymous feature to make it more clear that people can’t see their posts.
2. Simplify the menu and navigation with filters rather than separate pages
3. Add a way for users to respond back to responses from others, reply to a question being answered, thank people for praying, etc.
4. Restructure post submission page to be one page rather than three. Make options more clear and easier to navigate.
5. Add photo capability so that users can attach a photo of someone to pray for or attach a photo of their praise report.
6. Ensure sufficient notification preferences options so that users have complete control over how many notifications they are getting and when.
This design improvement will be out of scope for the redesign since there isn't anything any the current user flow signifying what actions pertaining to notifications are currently possible. This is an example image of Facebook's notification preference options.
Prototype
Here is a link to access the app prototype. A walkthrough featuring the journey of Olive a Sophomore at NU during her first time using the app. (Link to Prototype)
Next Steps
-
Wireframe the remainder of the screens to determine layouts and features
-
Create a functional prototype of entire app
-
User test the updated design
-
Create a corresponding desktop version of the app
Learnings
-
I learned how to take user feedback and research results and integrate them into a design.
-
I learned how to go back to a project with more developed skills and apply it to my work
-
I learned that a design is never done, there is always an opportunity to improve.