My Business App
The Project
Design the booking functionality for My Business app, where users can book appointments, and see their current and future events.
Responsabilities
Created concepts, UI and prototypes with Figma, validate them with end users and implement them well together with development, and created, maintained and expanded design systems.
My Role
Semi Senior UX Designer
Timeline
June - November 2022
Client
Mavenir.com
Tools
Figma, Photoshop, Miro, Jira, Teams
About My Business by Mavenir
Mavenir is a technology company that specializes in providing mobile solutions for businesses. In order to enhance their offering, they have created an app called My Business, which is designed to help small businesses manage their operations.
My Approach
Research
Benchmarking
I did a comparative evaluation against competitors. The aim was to identify a baseline or benchmark from which to set goals before diving into design.
There were some commonalities in the apps I research. I found that:
- The majority of the apps have long flows to create a new event.
- Most of them have hybrid UI.
- Lack of consistency in the UI.
Design
User Flows
The first step for me was to create user flows to mentally visualize how users would travel through the app while performing a specific task (in this case creating an appointment).
Based on the requirements, multiple meetings with the product owner and the product needs of the project I tried to come up with a design philosophy for the feature.
Eventually, I settled on the following design principles
Low-fi Designs
After creating the main task flows the next natural step was to create low-fidelity wireframes to visualize how the target audience will interact with the feature. This is important to understand how different users might not perform tasks the same and may travel in different paths. They are typically attached to a specific persona but in this case, I just wanted to focus on understanding the main user flows so I skipped the creation of user-personas.
Revised Feature Requirements
After the initial low-fi designs were presented they sparked a lot of discussion around the requirements for the feature, it was clear we needed for them to be clear and concise to proceed to the next step. After a couple of meetings with the product owner and after feedback from the team we were able to come up with more clear and more specific requirements for the feature.
Multi-employee view support
View: 1user- 1 Calendar / 1owner - N calendars
Owner and Manager can edit calendars
Give the option to all the staff members to see all the calendars
Availability of each employee: Part-time, vacations, PTO, et
Each employee can manage its own calendar
High-Fidelity Design
Android
iOS
An issue with the existing Design System
Mavenir had been using an outdated design system that had become increasingly inconsistent across iOS and Android. This meant that the user experience was disparate and confusing for users, so I proposed to create a unified design system that would be consistent across all platforms.
The Goal
The team goal was to create a new design system based on an existing design system framework that would be consistent across all platforms, and create a better user experience.
Research and Discovery
Before beginning the project, I conducted research into the best practices of Material Design 3 in order to develop a comprehensive understanding of the design system. I also conducted interviews with stakeholders to better understand their needs and expectations for the project.
Material 3
Material Design 3 is Google’s latest design language. It is based on the principles of material design, where physical and digital elements are combined to create a unified experience. It is focused on creating a consistent user experience across devices and platforms, as well as providing a modern look and feel. It also provides a library of components and tools for creating custom designs.
Choosing Material Design 3
When deciding on the best design system for My Business, the team chose Material Design 3 for a number of reasons. Firstly, it is highly adaptable, allowing us to create a design that works across multiple devices and platforms. Secondly, it offers a great user experience, as it is designed to be easy to use and intuitive. Finally, it is scalable, meaning that it can be used for a range of projects, from simple to complex.
The Challenge
Whilst the team saw the benefits of using Material Design 3, there were some challenges we faced during the design process. Firstly, creating the design took a lot of time and effort, as it needed to be tailored to the specific needs of the My Business app. Secondly, executing the vision was a challenge, as it required the team to have a deep understanding of the Material Design 3 principles and guidelines.
Results
Despite the challenges, the team was able to successfully implement Material Design 3 into My Business app. This resulted in improved user experience, as the app was easier to use and navigate.
Color
The app uses dynamic color based on the original My Business primary blue. This palette was generated using the M3 color plugin for Figma using the primary color as a seed and then further customized.
Typography
The app type scale provides the typographic variety necessary for the app content. All items in the type scale use Roboto for Android and San Francisco Pro for iOS as the typeface.
Android
iOS
Components
The app showcases a variety of components. From beautiful Icons to stylized but modern buttons, including contrasty dropdown menus.
The Website
I proposed to create a website where we could showcase the new design system ala “Material Design” with design guidelines, the latest documentation, and developer tools, this was mainly driven because of the constant changes in the people working on the project, to have a unified source of truth and to have clarity on components currently used in the app.
Dynamic Color For Each Business
Taking advantage of Material 3 Dynamic Color framework I proposed to have this functionality implemented in the redesign of the app, we were able to visualize this with the Figma plugin, starting with different seed colors. The results were just amazing. We were really impressed by how easy was to change the whole UI color theme with one click.
New Green
New Purple
Cantaloupe
Conclusion
Revamped Design Language
In conclusion, the team at Mavenir chose to replace their old design system with Material Design 3 for the My Business app. This decision was made for a number of reasons, including adaptability, user experience, and scalability. Despite the challenges faced during the design process, the outcomes and results were positive, as it resulted in improved user experience and increased adoption.