PERSONAL PROJECT
Stay in the Conversation
Introduction
Some context and description
This originally started as my mobile application development course's final project. However, with the project not fully realized, I took it upon myself to continue its development as both a design and product exercise.
Designed for iOS, MarkThat is a voice-enabled application that augments how you take notes, so you can better focus on and participate in your conversations. With multi-party transcription, auto-summarization, and audio indexing, MarkThat makes it easy to take, find, and share your notes.
Read more about the earlier version of MarkThat here!
Duration
April - Jul 2019 What I did
User Research, Product Design, Prototyping, User Testing
Tools
Sketch, Adobe Illustrator, Invision, Origami
Overview
Note-taking: good, bad, and ugly
The Problem
How can people be better engaged during conversations while still taking effective notes? Not everyone is a bad note-taker; however, those who use conventional/linear note-taking methods (like copying down info verbatim) or just forego note-taking in general, fail to properly leverage their notes or lack thereof and can miss out on recording important information and proper active learning.
In our private lives, the workplace, and even the classroom, we spend a startlingly large amount of time communicating with others. Studies show that 70% of your waking day is spent on communication, and about 75% of that time is spent speaking or listening.
Yet most of the words we hear each day are either ignored, forgotten, or misunderstood. While email and messaging leave inherent digital records of the ideas and information being conveyed, phone calls, video conferencing, and face-to-face meetings don't allow people to retain as much of that information.
There are 55 million meetings every day in the U.S. But 90% of the information being conveyed in those meetings is forgotten by meeting participants within a week. If you or someone isn’t taking excellent notes, chances are you’re missing something.
Relying on memory, which is famously inaccurate, is not enough. And more’s the pity: studies show that more and better ideas are produced in face-to-face meetings, and that in-person interactions bring a host of other advantages as well. Given the fact that many of these interactions take place on the fly — at the water cooler, in the elevator, during group discussions, on the way to or from another meeting — odds are you won’t have access to any notes or records, and that much of the value of those encounters is being lost.
My last two brain cells as I struggle to take notes on information I don't even comprehend
The Solution
A voice-first audio recorder and note-taking application that offers time-stamped indexing and automatic transcription, MarkThat is designed to understand and capture both short and long-form conversations that take place between multiple people. MarkThat leverages machine learning and voice technology to allow users to better focus on their conversation or meeting by augmenting note-taking and sharing responsibilities.
Some of the screens from final design
With MarkThat, you will never forget what was said in a meeting, on a phone call, in a classroom, or in any other context where talking is key. Use MarkThat to record what you need, so that you never have to lose a thought or an idea again.
My Process
Improvise. Adapt. Overcome.
I loosely approach product design and development with a combination of IDEO's human-centered design thinking and Lean Startup methods.
Objectives
Methods + Techniques
Understand
Generate
Evaluate
Understand
Define, learn, and empathise
Following an initial hunch with a broad target user group (college students) and problem space (note-taking), I knew I had to lead with generative research to fully find, narrow, understand, and define any opportunity for solutions and innovation in regards to the below challenge statement.
Initial challenge statement: create an app that simplifies note-taking and improves note usability.
But before I dove into the research, I declared these high-level goals:
Focusing my generative findings into a concrete declaration, I outlined prominent problem statements and concerns to address them.
Some key points and possible areas of concern I found were:
Short Interviews
To both avoid any personal bias and narrow the scope of my research, I decided to first consult/interview common college student note-taking stakeholders— college students, TAs, etc. I conducted 5 short interviews with people who fit into my stakeholder group to quickly get a broader understanding of the domain and identify any surface-level problems.
Surface-level problems
A selection of key quotes I found to be insightful
Literature Review
Using abstraction laddering, I was able to translate the surface-level problems into more abstract, yet core-level problems. With that, I knew to constraint my efforts to focus on researching 'poor and biased information capture', 'ineffective note-taking methods', and 'difficult information retrieval and navigation' instead of starting with no direction during the literature review.
Key questions & related findings
Other interesting findings
Which lead me to
Surveys
Using google forms and sheets, I reached out to students on various facebook groups and my own network. The survey served to 1) further narrow my target user group by other possible common identifiers and 2) help me validate and learn more about general problems, satisfaction levels, and strategies that they have in regards to their current note-taking methods, or lack thereof
Some of the Data Collected 33 total participants
Interviews
I then conducted a series of semi-structured interviews (10) with my now identified target users (busy students who take linear and conventional notes + non-notetakers) to 1) discover and/or understand any nuances with note-taking paint points and 2) further empathize with real user stories and interactions to form accurate use cases.
Some of the questions asked to understand note-taking situation & their effects on note-taking strategies
Some key findings from the interviews were that
Task Flows
Synthesized a task flow from an interviewee's description to better visualize situation.
User Pain Points
Using the above findings from the research, I condensed the following core problems that I wanted my product to solve.
Design Goals
Based off of my takeaways on user needs/pain points and the gaps in current solutions, I created design goals to better solidify and align my most core values.
Boost Conversation Engagement
User Goal — Focus and contribute to the conversation without multi-tasking or being preoccupied
Design Implications — Provide an unintrusive or passive solution to record information
Accessible and Prevent Loss of Information
User Goal — Quickly and easily record all the information from their conversation
Design Implications — Allow users to capture all the necessary information from their conversation
Improving Content Digestion & Navigation
User Goal — Quickly locate and digest meeting content.
Design Implications — Help users efficiently find important information and traverse the meeting.
Personas
To establish empathetic target users, I developed personas based on the research done. Each persona provided contextual information, needs, and user pain points.
Competitive Analysis
To find both inspirations and gaps in existing products, I looked at a couple of solutions that survey participants and interviewees mentioned.
Google Docs
Pros
Cons
Voice Memos
Pros
Cons
Evernote
Pros
Cons
Only Evernote really came close to addressing my identified issues with engagement and sharing; however, it still lacked key functionality and focus.
Generate & Evaluate
Ideate, visualize, and iterate
With design goals in mind, I could finally start ideating and developing possible ideas that could address said goals - which I framed within the context of main actions regarding notes below.
Taking Notes
Referencing Notes
Sharing Notes
Referencing the design goals and findings, I brainstormed and sketched any solution that could fit my outlined design goals. My ideas ranged from personalized voice agents to note-taking gamification; however, one stuck out as feasible (for a junior developer), appropriate (for addressing design goals), and familiar (uses the concept from Mark That v1 and Voice Memos).
Return to Initial Concept
I was drawn back to v1 of MarkThat, a product idea that could address the design goals I had established with some further refining.
MarkThat v1 allowed users to take audio recordings like Apple's Voice Memo application, place time-stamped indexes, organize recording in a folder system, search recordings by title or description.
Some mockups for v1 that I made
I did some user testing with a simple but working, android app that my friends and I developed off of the v1 specs, running a total of 2 usability tests.
Shots of the android app used for user testing
Usability Issues
My solution + some extra goodies
Wireframes + Mockups + Prototypes
I, unfortunately, don't do too good of a job with always documenting my work, so I won't be able to share my sketches. However, I can show my initial wireframes of MarkThat v2 and the subsequent bad mockups of v3 which did not follow a structured design system (no adherence to a grid, color palette, font, etc.)
Using Sketch + Craft + Invision, I tried out my designs with a combination of "paper" digital prototyping and wizard of oz style user testing, which lead to further product feature additions and interactions in the final design.
Final Design + Decisions for Now
Using an 8 point soft grid and the lessons learned from v3, I designed v4 of MarkThat.
To set up personal voice recognition, the user needs to repeat the 3 Harvard phrases. After pressing the record button, the user only needs to repeat the select phrase as it automatically moves on to the next after recognizing completion.
Last step of set up is repeating the default wake phrase 3 times, MarkThat's wake-word engine or algorithm can accurately detect the phrase "Mark that" from a stream of audio.
Users can quickly access their recent or starred conversations with the tab navigation bar.
Recordings are people centric, so that users can find conversations in a more natural way.
Users can search for a recording either by people involved in the conversation, tags, or title.
Shows most recent searches so that the user can easily find latest recordings.
In my v3 iteration of the home screen, I thought using indication animation and the action gesture of swiping would be good for editing a recording; however, I realized that the swiping action would be also conflict with the swiping tab bar.
So, I decided on a simple tap on a "more options" icon.
On a separate note, I chose to do away with v3's tag and folder type display in v4 and have just names and profile images since our conversations are more naturally organizaed around people.
Opening the menu, lets a user access their settings (like account, profile, and voice controls).
Instead of having a bottom nav bar with a folders tab in the main screens, I chose to have a limited amount of folders (at least for the free ver.) to reduce clutter, while still allowing the user to organize recordings into folders
Users can start recording with a simple push of a button.
*Note: I was unable to prototype it in Orgiami, but upon recognizing audio MarkThat sound indicator should display soundwave like animations.
Using a combined right and left thumb map, I placed the recording button on the home screen within the "Natural" thumb threshold for ease of access.
Similarly, I also placed the main action buttons on the recording screen within the "Natural" thumb threshold. However, I might consider switching the mark button with the picture button since marking is more frequently used.
Users can place Marks with a tap or a voice command.
The voice control allows the users to be untetherd from their device and focus instead on the conversation.
By tapping on a placed Mark, users can edit the Mark's title and/or add further notes.
This lets users both organize their Marks and write any ideas or notes that they didn't necessarily want to say out loud.
By tapping the downward facing chevron on a placed Mark, users can either edit, share, or delete the mark.
Users can skip to the time-stamped index by taping on the associated Mark.
Allows users to navigate around the recording quickly and easily.
Users can search through the recording by keyword instance.
The blue border shows what is selected. Since MarkThat doesn't just do transcription, but also records actual audio, the "inaudible" text is a placeholder for inaudible words.
The user just needs to tap on the camera button to take a picture of something.
After pressing the camera button, the user is taken to the camera screen where they can take pictures with flash, nightmode, or back and front facing cameras.
Tap on the taken images on the bottom left to finish.
The recording will remain uninterrupted while you are taking pictures.
Tap on return to live to scroll down to live view.
Moving Marks
A user manually placing marks by hand or voice isn't always going to be accurate. So to account for mistaken or off mark placements, users can easily move their marks around the recording with just a long press, drag, and then drop. I choose this form of interaction because 1) a user’s touch should directly control the movement of elements and 2) it was the most elegant and intuitive solution I could come up with for the action.
Ending Recording
To prevent accidental or premature recording finishes, users have to first pause the recording and then do a long press on the end button until the circular border indicator makes a complete rotation.
After ending the recording, user can edit or view the recording information.
Using TLDR tech, MarkThat generates a recordin summary and tags.
If the user wants to add their own tags, the user can type in their own or continue to choose tags from generated list based off of frequency of mentions.
Changes made will then be applied to recording information.
MarkThat
Designs for now
Font and colors
Chose to go with SF Pro to emulate an aesthetic akin to Apple's since I wanted users to feel semi-consistent visuals when used along with Siri shortcuts in the future.
Main Features
Below are just a few of the key features I designed, to see the rest please go to the 'Generate & Evaluate' section and click on 'view more'.
Setup voice recognition for personalized voice commands and multi-party conversations.
Switch between recent and starred conversation views.
Search by person, conversation, Mark, or phrase.
Record and transcribe your conversation with a simple tap.
Place Marks to index key parts of the conversation for later visit.
Add further notes to your Marks.
Edit, share, or delete your Marks.
Lookup specific parts of your conversation with keyword search
Add images from your camera or camera roll.
View and manage your conversation's recording general info.
Conclusion?
Challenges, takeaways, and next steps
My biggest hurdle is user testing the transcription + voice command features. It's difficult to create a design prototype that can full convey working transcription along with voice. So instead, I had to use Dialogflow (formerly API.AI), Google's live Transcribe, Android Studio, and some manual simulating to test the effectiveness of said features. Also, the lack of a team meant I had to rely on bouncing my ideas off of friends and kind strangers.
My takeaways are:
This project is still 'In Progress', I will continue with user testing and improving multiple speaker detection. I also want to look into introducing more trigger words or voice actions so that MarkThat can schedule meeting times, set reminders & tasks, and clarify words/terms. Integration with Siri shortcuts is also an avenue of exploration.
Thanks for reading! If you want to be a part of MarkThat, give feedback, or just tell me your deepest darkest secret, shoot me an email at [email protected]
My Projects
MarkThat: Voice Powered NotesProduct Design, iXD, Prototyping
Spotify Podcast RedesignProduct Design, iXD, UI Design, Prototyping
Fiori Design System and more @SAPProduct Design, iXD, UI Design, Prototyping
Credible — Contact PreferencesProduct Design, iXD, User Research
UCSC HCI Lab — EmotiCalResearch, UX/UI Design, Development
Voice @Yahoo!VUI Design, UX Research, Prototyping