AgendaX
The AgendaX app is a simple, yet powerful agenda tool that automates many of the annoying manual processes around creating and upkeeping agendas. The app’s goal is to maximize its usefulness while not overloading the user with unnecessary features.
My Role: UX Research | UX Design | UI Design
Overview
The Challenge
The client came to me with an idea for a meeting tool that was based off his current experience of conducting team meetings. Currently, he uses Google Docs for creating and using agendas. However, it is a largely static tool and does not support his need for reminders, check-ins, and updates on the progress of items.
The Solution
After interviewing the client, I worked with him to create the brief. We defined that the goal would be to create an agenda web tool that is cleaner, more minimal, and easy to use.
I also used the “How Might We” design thinking exercise to reframe challenges, discover new design opportunities, and identify common themes to prioritize functions.
Click image to see in detail
I decided to keep a laser focus on simplicity for learnability, creating items and to-do tasks easily, and automating as much of the manual processes as possible.
The Audience
Those within startups, agencies, non-profits, or in voluntary organizations would derive the most value from the AgendaX app.
Those that are part of large corporations and organizations are not within my target audience because they usually have access to a larger suite of services, such as Microsoft Teams.
Process
Research
Strategy
Information Architecture
Low Fidelity Wireframes
Medium Fidelity Wireframes
Research
Client Pain Points
Google docs is fairly static and not helpful for reminders, check-ins, and seeing the progress on items
A very manual process where agendas are created weekly, the meeting owner sends out a link and pings people to update it, and items have to be copied and pasted in order to be moved around or carried over from the previous meeting
No visibility across team members when one finishes a to-do task
User Research
I first sourced participants for my research by reaching out to my personal network. I then screened for those who might be good fits for an agenda app.
Quantitative Research
25 Participants
Screener survey via Instagram
Qualitative Research
7 Participants
1-1 follow up conversations about the tools these participants use, what their meetings typically look like, and how they keep track of to-dos
Key Takeaways From User Research
Within the target audience
78%
update the same document for recurring agendas
67%
have to use more than one tool to create agendas and keep track of tasks
67%
feel like their process is not formalized
Competitive Analysis
I started by researching four main competitors to understand their products’ strengths and weaknesses, as well as gain an understanding of basic user expectations when using meeting/agenda apps. I looked at Google Docs, Fellow.app, Meetly, and Soapbox.
Google Docs
Google Docs is easy to start using. Most already know how to use it, so there is a low barrier to entry and flat learning curve. However, it is largely static and not optimized to be a robust meeting tool.
Meetly
Meetly is closest to the client’s ask. However, it is requires a calendar integration and is very feature-heavy. A user cannot create agendas independent of meetings, and it doesn’t send to-do summaries automatically. The user must set up their own automated rules. These factors make the app difficult to learn and frustrating to use.
Soapbox
Soapbox provides templates for various types of meetings and integrates many features. However, its UI and UX is very poorly designed. It is confusing and difficult to make sense of, impeding a user’s ability to start using it right away.
Fellow.app
Fellow.app is designed to be a robust meeting tool and has many features. Its UI design is also strong. However, because they try to do so much, the cognitive load is overwhelming for a user and ends up feeling too cluttered.
Strategy
Personas
Based on my research, I created two personas to inform my sketches and to create my first set of low-fidelity wireframes. I first created proto-personas and then updated them to the final versions below as I continued to learn more.
Demographics
38 years old, Project Manager
Married, has children, upper middle-class
Has her Bachelor’s degree and multiple certifications
Works at a digital creative agency
Behaviors & Beliefs
Extremely organized and always conscious of time
Feels highly responsible for keeping the team aligned and on pace to meet deadlines for successful project launches
Loves the feeling of getting things done
Goals & Needs
Find information easily
Maximize efficiency
Desires increased visibility and accountability across all team members
Dislikes having to follow up with people all the time
Wants to free up mental capacity
Demographics
22 years old, Jr. Account Executive
Single, recent grad
First job out of college
Works at a tech startup
Behavior & Beliefs
Eager and slightly nervous to prove himself in the workplace
Passionate and excited about working at a fast-paced startup
Hasn’t mastered prioritization or managing a fluctuating workload
Doesn’t want to be a burden on his higher-ups
Goals & Needs
Staying on track with multiple responsibilities
Prioritizing tasks
Prove his talent and reliability to the team, his manager, and the organization at large
I then focused on the primary user to create an Empathy Map and Customer Journey Map for the scope of the MVP.
Empathy Map
Key Pain Points
Chasing people around to see if they got their work done so the next person can start their leg of work
Having to confront others if they’re slacking
Customer Journey Map
Key Opportunities
Design a celebratory aspect to the experience
“End Meeting” button to send summaries to the team, as well as signal to the app to begin its automated processes
Reshuffle items to new categories
Move to-dos to the “done” category when completed
Information Architecture
User Stories
I created user stories based on tasks and potential motivators. I then prioritized the list to focus on Amy’s greatest needs in a minimum viable product.
As a new user, I want to quickly start exploring the app, so I know if it’s worth using with the rest of my team or not
As a user, I want to have effective and efficient meetings, so our team can hit all of our deadlines
As user, I want to create new agendas, so I can organize efficient meetings
As a user, I want to trust that my teammates will remember to do their assigned to-dos, so that I can have peace of mind
As a user, I want to spend the least amount of time organizing an agenda, because it’s tedious but necessary
As a user, I want to look good for being organized, because I’m responsible for the meeting and my team
I decided not to create user flows and design functionalities for user stories that were:
Simple, easy features to incorporate into the design
Did not require multiple steps to complete an action
Purely emotional in nature
Not a “high” priority
User Flows
I narrowed my scope to focus on creating three user flows that would cover the users’ greatest needs when using the AgendaX app.
This flow is the most complex and shows how important it is for the app to enhance facilitation and collaboration between team members.
User story: As a user, I want to have effective and efficient meetings, so our team can hit all of our deadlines
The other two flows map out users performing the two most basic functions that the app must do seamlessly at launch, in order to be successful:
Flow 2: Having a low barrier of entry in signing up
Flow 3: Creating a new agenda
Site Map
I created a site map to organize my screens and lay out the hierarchical structure of my app.
As I progressed into the design process and received feedback from testers, my mentor, and the client, I learned that users needed and actually desired more guidance. I continued to iterate on my site map to this final version. It went from a very simple format of just having one basic screen + one other feature, to something slightly more complex.
Version 1
Final Version
Low Fidelity Wireframes
Sketches
A critical part of my ideation and sketching process was to study best practices and successful UX examples from different apps: Asana, Google Reviews, and Thrive Market. Looking at apps in both similar and different industries was especially valuable because I could pin point what in the design made the user experience so enjoyable, easy, and overall successful.
After studying other examples, I continued on to my own sketching phase to begin designing a viable solution for AgendaX.
Four Ups Sketch
I did a Four-Ups exercise to quickly produce ideas and creative solutions. After reviewing my sketches, I chose to iterate on the first sketch, while adding in elements from the other sketches into my Solutions Sketch.
Solutions Sketch
To understand how a potential user might experience my app, I sought quick, initial feedback from two testers. Overall, they came back to me with:
“Todo” reads as Spanish “todos”
Enjoyed the “nudging & reminding” aspect
Liked the automated aspects of the app with “End Meeting” button
I decided not to adjust the “to-do” section since only one participant had given me this feedback so far. I wanted to continue gathering data on this aspect before I made a significant design change.
Paper Prototype
I also created a Paper Prototype to understand how certain functions would work when a user would interact with the app, such as creating a “to-do” task or designing an accordion folder.
Medium Fidelity Prototype
Digital Wireframes
Early Stage Testing
I created digital wireframes in Figma to begin early stage user testing. I walked each tester through a scenario and gave them three tasks to complete:
Setting up an account
Creating a new agenda
Assigning a to-do
Usability Testing
I conducted three total rounds of user testing with participants who fit within my target audience to either validate and/or invalidate my hypotheses and design decisions.
Usability Testing Round 1
I tested three participants for this round.
Key Takeaways
Likes
Simple, feels very useful
Visibility and accountability provided by the app
Email summaries and notifications
Dislikes
Written as “todo” was off-putting
To-do section placed at the bottom
Dragging functionality initially unclear
Iconography for “more options” unclear
Wishes
More robust note-taking functionality
Why I Didn’t Accept All User Feedback
I decided not to change designs around the dragging functionality since all participants also provided feedback that it was very easy to understand once they learned how to do it. Recognizing that digital prototypes are also limited, I would like to test how users understand this functionality once further into the development phase.
Updates made from Version 1 to Version 2
According to the feedback, I made the following updates:
Changed spelling to “to-do” from “todo”
Changed the “add more” icon to test if the new one would be more intuitive to understand
Version 1
Version 2 with updates in green
Usability Testing Round 2
I tested three new participants for this round.
Key Takeaways:
Likes
Simple, clear, intuitive, well organized
Automated aspects of app
Emails
Celebratory aspect
Dislikes
Dragging initially unclear
To-do section at bottom
“More Options” icon still unclear
Upon opening app, overwhelmed
“Make to-do” button is confusing
Wishes
Second way to create a New Agenda
To-do in different section
Ability to filter through to-dos
A “how-to” wizard
Ability to assign others to items
Final Prototype
I designed a total of three, more complex prototypes and detailed user flows to provide the most realistic user experience as possible, before testing for a final, third time.
New User Sign Up
I decided to redesign the to-do section to make it separate from the list of agenda items as additional testers echoed earlier user feedback. I also updated the flow to have the side panel folder expanded upon opening app for the first time to alleviate user confusion around iconography.
Returning User Creating New Agenda
I designed a new page that would help users navigate between creating a new agenda or going to their existing agendas. In earlier designs, I had the app open on the last agenda opened by the user in an effort reduce the total number of potential steps and maximize efficiency. However, this was extremely confusing and disoriented my testers. Introducing an extra step with this navigational page, immensely improved the usability and user experience.
Returning User in Recurring Meeting, Assigning Tasks
With the new to-do panel design, I introduced the ability to create to-do tasks by dragging an item from the left panel to the right panel. I also updated the “More Options” pop-up box to make it clearer that the “Create To-Do” was a button. For the email summaries, I updated the design and copy to make its purpose and functionality clearer.
Final Feedback
For my third and final round of testing, I tested two new participants instead of three since my changes were more minimal at this point.
Click here for a summary of User Testing Insights & Key Takeaways
Key Takeaways
Likes
Simple, clear, intuitive
Easy to learn after one time
Automated aspects of app
Enjoyed emails
Well organized
Seeing both panels at once
Dislikes
Side panel icon not immediately clear
“Send Summaries” button not immediately clear
Wishes
How-to wizard
Final Design
After three rounds of usability testing, I skinned my wireframes with a visual design that would appeal to my personas. I aimed to communicate the keywords: Professional, Friendly, Stylish, Techy, Speedy/Fast.
I conducted a preference test of two versions of six screens amongst a total of 147 participants (28 participants on usabilityhub.com and 119 participants via Instagram). Based on participants’ results on how successfully each screen represented the keywords, the final designs are below.
My Recommended Next Steps
In order to keep improving on the UX of this app, I recommend addressing the following in the next design iteration.
More testing on the learnability of this app.
Do I need to create an instructional wizard? Or, will users learn after clicking a couple of times and forget about the initial pain and move on quickly?
Should I have the side panel opened in the beginning as the default?
Better note-taking functionality.
Ensure it will not take away from the clarity and simplicity of the app
Tracking progress of items.
Be alerted to when items are consistently pushed from meeting to meeting
Time limit controls.
App will know if there are too many items that may push the meeting over time
More sophisticated control features.
Design different levels of access and features for various types of users
Final Thoughts
Throughout this project, I found success and learning opportunities in the following areas.
I accomplished something very simple that was easy to learn and felt organized.
I consider it a huge success that this was the most consistent user feedback that I received from beginning to end.
I stayed laser focused on and disciplined about sticking to the scope.
I did not get distracted by the numerous features that could be added on. I recognized when a user “wished” for something that was a good idea, but a “nice to have” rather than a requirement for the MVP.
I learned the importance of observing and studying successful UX examples.
By studying the UX design for successful apps in both similar and completely different industries, I was able to identify the elements that created a delightful user experience. I looked at Asana, Google Reviews, and Thrive Market.