Rectangle 1

Welcome to the new meeting assistant powered by Artificial Intelligence.

WorkPal is an AI-powered meeting assistant that helps small businesses and start-ups who want to keep track of discussions and essential information, by automatically recording meetings, transcribing meeting notes, providing a summary, a transcript and dividing the tasks with the use of AI technology.

Project overview
CHALLENGE

Create a mobile app in response to a real world problem or need.

SOLUTION

Develop an AI-Powered Meeting assistant tool that listen and takes down notes. It also generates a summary, list down the tasks mentioned in a meeting and export the task list to your favourite project management tool.

ROLE
UI/UX graphic designer.
TIME
12 weeks.
TASK

Research, design and implement an app for Capstone Project at Langara.

TOOLS

Figma, Illustrator, Photoshop, React, Node and A.I.

View Prototype
My process
process1 1
EMPATHIZE

“How can I be engaged in a meeting and remember every detail?”

By working in advertising agencies I struggle with being fully engage in meetings and also, taking notes of everything what the creative director pointed such as concepts, campaign details and due dates; as a result, I tended to forgot many things or even didn’t recognize my own notes.

Problem

Small businesses and start-ups have difficulties managing their tasks because of their everyday hectic schedule. It is hard for them to remember every little detail from their meetings.

Usually, many meetings are done under heavy time constraint; keeping track of tasks and assigning them can be overwhelming.

Competitive Analysis

After defining a problem, we wanted to take a closer look at WorkPal’s competitors and how they’re helping users to solve all those problems people face when they are having a meeting.

robotpalRGB
User Research
USER PERSONA

To start getting an idea of who Workpal users are, we created provisional personas based on a research we did about which fields are having more meetings and how the members behave.

persona1-workpal
THE DETAIL-ORIENTED
(25-34 yrs)
GOALS

Focus on the meeting and get detailed, clear and written information.
Keep the workflow as smooth as possible.

PAINS

Fail to take or understand notes of the important details.
Being side-tracked easily of the meeting purpose.

persona2-workpal
THE PLANNER
(40-55 yrs)
GOALS

Manage efficiently tasks to ensure everyone is working towards the same goal.
Improve productivity

PAINS

Missing deadlines and reworking due to lose track of essential tasks.
Keep remembering team members their own tasks.

USER STORIES

“As a Content Creator, I want to get a way to record and storage meetings as easy and quick as possible so that I will be able to check accurate details whenever I need”

“As an accountant director, I want to get a summary of the meeting so that I’ll be aware what overall the team discussed when I can’t attend a meeting”

“As a Project Manager, I want to export and assign tasks easily so that the team members know exactly what to do”

DEFINE AND IDEATE
Solution

After the user research we focus on how might we help our users to mitigate their pains points and achieve their goals. We came up with a pack of doable features which match business and user goals.

Group 427318697
Real-time Transcription
Group 427318696
AI Summarization
Group 427318672
Schedule Meetings
Group 427318670
Transcript Editing
Group 36970
Export Tasks
Virtual Assistant
Group 37019
User flow

Despite the user flow is a crucial stage it could be an overwhelming process. The final version took us around 2 weeks to be ready and even after the wireframes we were still doing some changes to improve the user experience.

View User Flow
Wireframes

I believe sketching the wireframes by hand is really helpful to define, at first glance, hierarchy and layout.

sketch-wireframes-workpal
PROTOTYPE

For the prototype stage we built medium-fidelity wireframes on Figma by using components and parent elements which allowed us to easily adapt the UI style without wasting time and energy to be consistent.

wireframes1 wireframes2
TESTING

We found out interesting insights after testing the first stage of the prototype. Most of them related to core moment of the app “the recording part”; some users struggled with finding how to finish a meeting or even where to check the transcript after recording. So we noticed we needed to be more specific and let the user know key moments by putting some pop-ups.

popups-workpal
UI DESIGN
HIGH-TECH
INNOVATIVE
PROFESSIONAL
FRIENDLY
Branding
BRAND VALUES

For the logo design, we did more than 150 sketches among 4 designers. We pick the one suited the best with the values and then we did more iterations. The logo was inspired by the waves used for the audio sound when being recorded combined with the letter “W” of WorkPal.

IMG_1462 1 50sketch 1 IMG_5875 1 IMG_1461 1
Vector 606AFF Primary color
Vector 3E325A Neutral color
Vector 00C4A1 Accent
Vector F14E4E Required actions

We chose this color palette which creates high contrast and conveys professionalism without losing that friendly touch we wanted to keep.

Typeface

Carbona test is a sans-serif font with a medium x-height which makes it easy to read. Its versatility allowed us to play with 10 different styles and thus focus on hierarchy and consistency.

headings-workpal
UI kit

UI kit is key to keep consistency along the project. After sketching some of the logos, one of them turned into the good idea of creating “RobotPal” our AI assistant which became essential part of our UI kit and our app in general. We designed an acrylic pin for the final presentation which was hand out within the audience.

UI kit-1 UI kit-2
UI kit-3
robotpal1
3D VERSION
2D VERSION
robotpal3
ACRYLIC PIN
FINAL PROTOTYPE

The high fidelity wireframes and prototype were designed within 3 weeks. With WorkPal’s branding defined, we worked on incorporating the brand identity to craft the visual design of our app. We were testing the prototype several times in order to keep it as user-friendly and functional as possible.

prototype1 prototype2 protoype3
View final prototype
REFLECTIONS AND CONCLUSIONS

As students who wasn’t very familiar with A.I, my team and I had to learn a lot through research and iteration to get a more solid understanding. With a tight time constraint of 12 weeks and agile teamwork, WorkPal was  successfully implemented being the only team using Artificial Intelligence and winning the second prize at the Capstone student’s showcase.

After the final presentation, many people from the audience were intrigued asking us when it would be the product launch to the market. This kind of feedback encourages us to continue developing innovative experiences and why not, implementing in the real market.

Visit workpal.pro
Next project
Vector 88
workpal-hero

WorkPal is a B2B/SaaS app that helps small businesses and start-ups keep track of discussions and essential information in meetings—second place in the Capstone project.

PROJECT OVERVIEW

Team:

4 Developers & 5 Designers

Role:

UI/UX designer/Graphic designer

Timeline:

Jan- Apr 2023

THE CHALLENGE

Design and develop an application from concept to deployment within 12 weeks in response to a real-world problem or need. (Capstone project).

THE PROBLEM

Focusing on meetings and recalling details can be challenging, leading to missed important information.

"49% of employees admitted that they do other unrelated work during meetings rather than paying attention."

"69% of employees check their email frequently during a meeting."

"A report suggests that 91% of employees daydreamed during their meetings."

Statistics are from The Muse and Atlassian.

THE SOLUTION

Integrate an AI assistant into a cross-functional platform to maximize meeting documentation efficiency.

Introducing Workpal AI powered meeting assistant that records, transcribes, and summarizes meetings, allowing users to have all meeting details.
With its advanced AI features, it can even export tasks and provide help from its virtual assistant “RobotPal”, which makes teams more productive and efficient.

THE CLIMAX
What's out there?

Our team recognized the glaring deficiencies in existing recording meeting apps - confusing interface, poor mobile navigation, and no option to export tasks to the preferred management tool. We addressed the shortcomings and developed a superior solution.

Unexpected challenge

During the project, we faced an unexpected challenge. Microsoft was about to launch a product similar to ours, which meant we had to make our product stand out to the stakeholders and judges. To differentiate ourselves, we decided to create a virtual assistant, which we named "Robotpal".

To clarify, there was no platform with these features when we started the project in January 2023. Nowadays, with the rapid growth of AI, a platform similar to WorkPal likely exists.

Key findings from user interviews

ONE

“I've been taking notes during meetings for six years, but I've missed important details because I multitasked or lost focus. Sometimes, I wish I could go back in time and be in that meeting again hahaha”

Sam Kaur - Administrative assistant

INSIGHT

Despite having experience taking notes, there's no guarantee
that the information collected will be accurate.

SOLUTION

TWO

“As a project manager, I find it overwhelming to use multiple tools to keep track of all tasks. I use Jira, and it is more than enough for me.”

Daianne Cox - Project Manager

INSIGHT

Centralizing task management is crucial for success.
It avoids overwhelm and inefficiency.

SOLUTION

THREE

“When I’ve used real-time transcription platforms and the transcript is too long and I struggle finding specific information”

Marisela Plata - Brand Director

INSIGHT

Lengthy transcripts are undermining productivity and efficiency.

SOLUTION

THE CLIMAX
userflow - business proposal 1
View User Flow
Lo-Fi Wireframes

Our goal was to create a simple interface by implementing intuitive navigation, prominent notifications, and recognizable visual indicators.
This will significantly decrease the time users spend performing essential tasks.

Including tabs, sliders, and filters enables easy and intuitive navigation; this helps users quickly locate what they need.

After reevaluating Lo-Fi designs, the following reflections emerged:

  • Users need the right amount of information to perform tasks quickly and effortlessly.
  • To reinforce the main task and prioritize visual hierarchy we increased the size of the record button in the bottom menu.
  • Unnecessary elements might affect accessibility and user learnability.
Branding
BRAND VALUES
HIGH-TECH
PROFESSIONAL
INNOVATIVE
FRIENDLY
50sketch 1 IMG_1462 1 IMG_1461 1 IMG_5875 1
Considering the simplicity of the interface, we emphasized elements by adding a color palette with high contrast. Shades were incorporated to provide hierarchy and scalability.
Typeface

Carbona test is a versatile sans-serif font with a medium
x-height which enables easy reading. We played with different styles to focus on hierarchy and consistency.

headings-workpal
UI KIT

With a duotone flat iconography, we enhanced usability and ensured task success.

We created multiple logo designs and developed an interactive app character among them. However, due to unforeseen constraints, we decided to use that concept and bring our AI virtual assistant to life, "RobotPal," which became a vital feature of WorkPal.

UI kit-1 UI kit-2 UI kit-3
ROBOTPAL
robotpal1
3D VERSION
2D VERSION
robotpal3
ACRYLIC PIN
Prototype
prototype1 prototype2 protoype3
Testing and iteration

Task Completion Rate: 90%

Average time to complete task: 2min

Average rating on a scale of 1 to 10: 9.0

1. Improve affordances on key actions
when recording meetings.

Users struggled to finish the meeting, so we used pop-ups to specify actions and lead them to the next steps.

2. Color accessibility

We tested different color contrasts to avoid poor readability, confusion and frustration for users.

View final prototype
THE OUTCOME AND REFLECTIONS
  • Out of seven competitive apps, WorkPal achieved second place in the Capstone presentation project.
  • The scope of the project was about right.The right number of features was implemented, adding a new one when needed.
  • Be resourceful while needing to find solutions to challenges by thinking out of the box.
  • When making design decisions, it's essential to prioritize the user's needs and avoid personal biases or assumptions.
mockup-reflections
Live presentation
View live prototype
Next project
Vector 88