Overview
adam.ai is an intelligent meeting management platform built for the modern workplace. Since 2018, it has helped 9000+ organizations and teams worldwide to manage their entire meeting life cycle. In 2020, we embarked on a journey to fully revamp the product in terms of both design and code, as well as bring the meeting experience to mobile devices (to be launched in 2021). This revamp also extended to enhancing our visual identity and redesigning our website to give adam.ai a brand new look.
Scope of Work
→ Design System
→ Web App UI Design (Redesign)
→ Mobile App + iPad Design
→ Website UI Design (Redesign)
→ Illustration Design
Role
Lead Product Designer
My role was to lead the strategy and execute the redesign of our existing web app, build a unified design system in the process and recreate the experience across mobile devices (iOS/iPadOS/Android), in close collaboration with the product manager at adam.ai.
Challenge
How might we facilitate effective meetings online?
With the COVID-19 global outbreak, the way we live and work might perhaps never be the same again. Countless organizations and teams suddenly forced to work from home, and soon enough remote work has become the new normal. Doing everything online has challenged us all to find better ways of remotely working, collaborating, managing meetings and organizing all the information across the different tools we use to get things done. But at the heart of the matter is how people meet together online and what they do after the meeting ends.
Where does all the information go? Who remembers what happened? What were the next steps to be taken and decisions made? Will anyone really listen to the two-hour recording again? All the content in meetings end up undocumented, scattered across different tools or trapped in individual silos inaccessible to everyone else.
What if we created virtual meeting rooms to capture all this content, helped people run more structured meetings and gathered working knowledge across the team or organization?
1st:
Building a Design System
In 2020, after more than a year in the global market and reaching a solid traction milestone with our current product version, we decided to shift gears and invest in radically improving our user experience by giving it a cleaner look and feel, focusing more on user content by making the design aspect invisible and expanding to multiple platforms to ensure we deliver the best meeting experience across all devices.
After making a full audit of our existing web app UI, we said goodbye to all our Sketch files and started designing our new and improved version in Figma from scratch.
Throughout the design process, I was heavily inspired and guided by several fantastic design system resources, checklists, articles and other famous design systems. As this was my first attempt ever at building a design system, the responsibility was huge. It wasn’t as easy as is sounds, but in the end, after tons of design decisions, researching, ideating, iterating and learning, I guess it wasn’t as hard as it looks :)
Coming from a graphic and visual design background certainly made all the difference in designing the user interface because my design acumen has been refined by working on many creative projects that demanded visual coherency, symmetry, clean layouts, thoughtful typography, harmonious colors and well-applied design principles.
Information Architecture
In close collaboration with the product manager, we then iterated and expanded on our web app’s information architecture, to enable users to navigate effectively between the generated content across all their meetings, and find the information they need quickly and easily.
After gathering user feedback from multiple channels and gaining insights from ongoing user interviews, we also crafted a roadmap of new features to include in the new version.
2nd:
Redesigning the Web App
With the foundations of the design system in place, I set out to design the basic components of our web app: layouts, cards, bars, modals, tiles, as well concept screens for our main features. Everything in the workspace -which we call ‘meetplace’- is designed to easily capture and find content items generated within meetings.
A virtual room for every meeting
As for what happens inside meetings, we revamped the virtual meeting room to have a minimal look and feel, so users can focus on the heavy content created during the meeting. The meeting ’tiles’ are organized in a way that enables everyone to quickly understand the information and collaborate together to bring their best ideas to the table.
3rd:
Designing for Mobile & Tablet Experiences
Translating a complex web app with heavy features and user content into a mobile user experience was a challenge at first. But having the design system and thinking with a responsive-first mindset and modular design approach from the beginning made the execution much smoother. The virtual meeting room was transformed into a tab structure to allow the user to focus more on capturing the content during the meeting.
4th:
Redesigning the Website
To conclude our new look, we also redesigned the website to maintain the visual coherency and adhere to the design system. The new and improved web app and mobile app are expected to launch in 2021, but the website is live, check it out below.
Yasmine Amin 