The remark app prototype was created as a digital design solution to student communication and collaboration problems during the Covid-19 pandemic shift to online learning. Through the lens of human-centered design, I interviewed users to understand how to develop a solution that both addressed the problem space and was delightful and intuitive to use.
In my capacity as a UX designer, I also took on the roles of researcher, UX writer, UI designer throughout the entire process.
Problem Space
With the recent shift to online learning, many higher education institutions have struggled to keep up to date with digital technology, and both students and educators have experienced zoom fatigue while feeling disconnected from the academic community.
According to the BEA, education
is one of the least digitized but most people-intensive economic sectors.
75% of college students
were unhappy with the quality of e-learning after the pandemic started.
94% of college students
said that online college classes were not worth the tuition.
My design intervention will benefit students in higher education that struggle with note-taking and collaboration with other students.
It will do so by providing cross-platform functionality, focusing on text-to-speech, captioning, and scanning technology to allow students to use a wide variety of methods to collaborate.
After interviewing three users, I was able to extract some key insights and quotes. Using these, I was able to better understand the specific pain points, goals, and behaviors of the users. After this, I was able to author a how might we statement to solve these pain points, as well as create a persona and envision a task flow through the app.
Key Insights
1
Students appreciate note-taking resources aimed at different types of learners.
2
Community spaces are important hubs of student communication and collaboration, whether online or in person.
3
Public and shareable learning resources are crucial, especially for people who may have difficulty with conventional methods of note-taking.
“I’d love to be able to share notes on a public repository - like dropbox, but having the files being there and being mutable.”
“I really liked the ice-breaking activities I did with my teammates, and determining strengths and weaknesses of group members was very useful.”
“I miss the period after class ending. I usually get to connect with classmates, which is not something I can do on zoom.”
“Messaging systems for online learning spaces are so important.”
“I struggle with note-taking in general. I’m unable to listen, watch someone write, as well as take notes at the same time.”
"I’m bad at remembering things that have no meaning. I have to have physical notes to recognize it in my head."
communicate.
collaborate.
innovate.
Although my initial assumption was that the note-taking functionality of the remark app would be the cornerstone of user needs, interviews have shown that communication and collaboration are inherently tied to the e-learning experience and are important themes to consider. As such, I pivoted my how might we statement to reflect this.
How might we...
increase engagement and cross-platform collaboration between college students through online learning?
Persona
Emilie Gagnon, 21
Toronto, ON | UX Design Student
When you’re designing for other people, collaboration is the key to success.
Behaviors
-
takes notes by hand
-
likes to discuss class topics with peers in the student lounge
Motivations
-
learn and understand fundamental UX Design skills
-
network with peers
Pain Points
-
communication with peers hindered by pandemic restrictions
-
hard to consolidate handwritten notes
User Stories
As a student...
I want to share my workspace with other students so that I can seek support out of the classroom and collaborate more easily.
I want to assign roles to my teammates and I so that we can make the best use of our strengths and weaknesses.
I want to have a virtual hangout video and voice chat so that I can connect with my peers out of class time.
I want to be able to see a log of my messages so that I can keep a record of previously discussed topics and access them later.
I want to be able to message with my peers so that I can seek support out of the classroom and collaborate more easily.
chosen user story
chosen epic: communication
User Flow Diagram
Task flow diagram legend.
Initial task flow diagram based on selected user story and epic.
Then came the ideation process. I began to collect images and UI inspiration, as well as sketch and wireframe some mobile application screens, collecting these into artifacts that I would be able to reference and build off throughout the rest of the design process.
Moodboard
-
Detailed-oriented and crisp, with enough breathing space to create, collaborate, and innovate.
-
Keywords: clear, crisp, spacious
-
View expanded moodboard here
Curated moodboard gallery.
UI Inspiration
General UI Inspiration
Heavy use of whitespace and grouping to separate and clarify dense information. Strong use of hierarchy, both in text and buttons.
High-level elements
Establish consistent colors, button format and shape, icons, and how notes and books would look within the app.
Information hierarchy
Distinguish importance of visual and textual elements on the screen through the use of color, layering, and drop shadow effects.
Solution Sketches
-
header with navigation menu and notifications
-
user icon and profile information
-
page navigation button block
Homepage
Workspace Page
-
header with navigation menu and notifications
-
search bar
-
workspace name and blurb
-
user name, icon and short blurb
-
header with navigation menu and notifications
-
search bar
-
add from workspace buttons
-
manual add button
New Contact Page
-
header with navigation menu and notifications
-
add new button
-
user icon and profile information
-
workspace buttons
-
notes preview cards
User Page
Contacts Page
-
header with navigation menu and notifications
-
search bar
-
contact icon, and blurb
User Message Page
-
header with navigation menu and notifications
-
user icon and name
-
call and video call buttons
-
message bubbles
-
keyboard and text field
Having sketched out some solutions for a user task flow within the mobile app, I was then ready to translate them into low fidelity wireframes, conduct user testing to iterate, and then develop them into a high fidelity prototype.
Wireframes
User Testing Insights
I conducted two rounds of user testing of five users each. After each round of testing, I prioritized the most impactful feedback to integrate into the prototype.
Round 1 testing insights
1
Standardize labels, icons, and headers. Clarify language according to user assumptions.
2
Swap calendar and deadline hierarchy.
3
Create new screen to mark end of flow.
-
Add contact button changed to message, call and video call icons, all of which direct user to the messaging page.
-
Page names have been updated for clarity and consistency.
-
Section labels standardized to be consistent with page names.
Round 2 testing insights
1
Revise button and text hierarchy, especially on the homepage.
2
Are the search bar and share icon necessary? If not, remove. This is confusing for users.
3
Standardize headline and back button placement.
-
Notification icon and back button moved to bottom navigation; search bar standardized to search icon across screens.
-
Navigation button hierarchy revised; color and position used to distinguish hierarchy for most useful buttons.
-
Bottom navigation shows place on homepage; page title removed.
Mockup of iterated prototype homepage screen and final prototype version, based on insights from round 2 of user testing.
High Fidelity Mockup
View prototype here
With a completed prototype, I was ready to begin the branding and marketing process. This included the creation of a wordmark and logo, as well as designing a responsive marketing site for desktop and mobile.
Branding
Color exploration board.
In order to begin ideation for a wordmark, I referred back to the themes of "communicate, collaborate, innovate", jotting down a couple of words that came to mind for each theme. For the logo, I tried to match both the chosen word and the idea of note-taking, ending up with a pen tip and a scribble.
remark
/rəˈmärk/
verb
-
say something as a comment; mention.
-
regard with attention; notice.
communicate
-
chat, remark, group, team, video, call, jot, jam, scribble, speak
collaborate
-
mark, write, note, notepad, pad, correct, collaborate, work
innovate
-
redo, iterate, innovate, grade, ideate, idea, imagine
Wordmark ideation board.
Final wordmark and logo.
With the marketing and branding complete, my next steps were to reflect on my key learnings and think back on the design process in order to dream up future possibilities regarding my design solution. What could the future hold for the remark note-taking mobile app?
Key Learnings
1
Redesigning and iterating is part of the process; it's okay to completely change your design after encountering new research or feedback.
2
It is important to lay out key design elements and be able to clearly explain the process of ideation, both for yourself and your clients.
3
Other designers are your best resource, both in terms of active feedback and by taking inspiration from their work.
Multiplatform Challenge
What would the remark mobile application look like on other platforms? Given its note-taking, communication and collaboration capabilities and primary use by students, I believe that it would have excellent functionality on tablet devices.
Side by side view of notebooks screen on the hi-fidelity mobile and tablet prototype.
-
Large tablet screen and stylus option could give students used to taking notes by hand the options to take notes directly on screen.
-
Notebook reader functionality is already widely used by reading apps and would be intuitive to users.
-
Camera on tablet would allow for physical note scanning functionality, as with on mobile.
-
Compared to a desktop platform, typing would be limited, as with on mobile.
As a student...
I want to be able to categorize my notes in a variety of ways so that I can organize them in a way that suits my note-taking style.
I want to have voice to text functionality so that I can I can take notes in a variety of ways.
I want to have voice and video recording functionality so that I can I can take notes in a variety of ways.
I want to be able to access other students' notes so that we can pool our resources for a better understanding of the material.
I want to take digital notes by hand so that I can retain information more clearly.
chosen user story
chosen epic: note-taking
Imagine if...
remark was a smash hit. What happens when 100 million people use the product?
What would mass scale use of your product reveal or cause?
-
Mass adoption of remark across higher learning institutions would encourage more student innovation and discussion.
-
The learning process would shift from instructors disseminating information to individuals to students challenging and solving problems collaboratively.
How might a community change if 80% of residents used your product?
-
If a large amount of students used remark, learning would become decentralized from only the classroom.
-
Students would be encouraged to take notes, learn, and share their learnings in a large, online, cloud-based network.
How could habits and norms change?
-
Collaborative notes would be widely available, potentially providing all students with internet connection access to class material and solutions.
-
Teaching material would have to be fluid, varied, and up to date to prevent the sharing of standardized test answers or homework questions.