Embedded Files
Context
I volunteered with Proteus Ai for about 14 weeks. During my time there, I worked with the entire team - the Engineering team, the in-house designer, the social media person, and the founders of Proteus AI.
My goal, was to have an experience designing for an Ai solution. And be part of the process of launching into the market—the company is a Start-up.
Design Summary
I worked on multiple key designs during my time there, namely:
Email and in-app notifications
Integrations page and its accompany pages
Admin Homepage
Employee Homepage
Settings Page and its accompany pages
Web-view Landing page
Proteus-Ai chat interface—For mobile users
My Design Strategy
Ease of Navigation (AI Trust and Clarity)
Modern and clean design UI (With Accessibility Consideration
Consistency with existing Design system
User Groups
Employees (Staff users)
Admins (HR users)
My Design Flow
Below, I will walk you through my design process—What worked; what didn't work and what I learned from it.
New Notifications Design for Onbuddy
Why was this design made?
The team needed a new notification design for Onbuddy's Email notifications. A design with elements that can be easily adopted for other communication/collaboration platforms, Onbuddy integrates with over time.
Note: This design is set-up for Emails, with consideration for other messaging platforms.
What Worked?
The exact design I made wasn't adopted but the language and tone of communication. Alongside the "frequency set-up" option—For users to personalize their notification whenever they receive a notification was adopted.
Impact:
Both internal and external users of the new notification found this new adoption: "Useful and empathetic"
Key Design Considerations
Visual hints—The use of icons e.g. hint user where the task was set-up.
Use of colour codes to tell users the priority level: Red; Yellow; Green
Friendly tone—The use of "buddy"
Use of Onbuddy’s branding colours—consistent with the current Onbuddy website design.
Use of animations and visuals to make it less boring and lighten the mood when a notification comes in.
Empathetic text - sitting in the recipient's shoes.
What I learned from it
Consideration for users can not be over-emphasized. Even in the seemingly overlooked little things, such as notifications.
What prompts a user to respond/engage with a notification is most times its tone of communication.
If this aspect is great, it has a huge impact in driving user engagement with the product.
I was finally able to understand that I had more people like myself that would prefer autonomy over my notifications. And prefer to engage with a notification that speaks empathy as part of its language.
My Inspiration Board
After I received this task, I went on to research best practices for a notification design as this was my first attempt designing notifications. I also didn't want it to be a boring notification so I took cues from Duolingo; Jira—because it's a similar task management platform, that is in the same niche as Onbuddy. And Ease—use of simple colour codes for design visualization.
However, I didn't want the notification to be annoying as Duolingo, so I included a personalization of notification—whereby the user can at a click, set or change the frequency of a notification from Onbuddy anytime a notification is recieved.
Also the tone of message was made to be empathetic and not like the Duolingo way that feels sometimes like an emotional blackmail.
Previous Notification Design
New Notification (Implemented) Design
Integrations
Why was this design made?
The team was working on enabling more integrations with other platforms. Enabling Onbuddy connect easily with other tools employees already use. For example, Teams, Gmail etc.
What didn't work?
At first, I added a button—"Add integrations", that would allow multiple integrations set-up at a click—With the aim of simplifying steps for the users.
But after a meeting with the engineering team, I realized that although I meant well with the design, it wasn't feasible technically—To perform multiple integrations at once.
What I learned from it
Talking through my ideas early with the team will help us align my designs with what we can realistically build.
Not all well-intended design is a feasible design for implementation.
Implemented Design
Here is a snippet of the designs in real time on the Onbuddy application.
Other screens can be found on the Onbuddy application when logged in as a user.
Homepage
Why was this design made?
The "homepage" in the current Onbuddy application had similar look and feel to other screens and lacked the space where the user can actually see what they have to do at a glance which the homepage is for.
Previous Output/Design
I used more colours in my first design output—using lighter shades of the Onbudy's colour branding. I also considered accessibility, ensuring the contrast was good.
However, only a part of the team was open to trying this out. While some weren't, based on the visual direction they had in mind for it.
Because it wasn't a specific need from a user(s), this design was refined.
Homepage (Employee)
What I would have loved to try out
I would love to try out the addition of some colours to add some cheerfulness to the current Onbuddy's designs. Although it wasn't adopted for the homepage, I am still curious to know users thoughts on this.
What I learned from it
As much as I loved the idea of adding some cheer to the current interface, (use of colours), it wasn't a specific need of a user.
Since it wasn't addressing a user's painpoint, I was able to meet the team in the middle.
Settings
Why was this design made?
These designs were created to help users personalize their experience on Onbuddy. And to manage their notifications.
Homepage (Employee)
Homepage (Admin)
Design Spotlight
The team really liked the notification settings feature—"Set holiday schedule".
Whereby the HR can turn off all notifications during company wide holidays.
What I learned from it
The first design I came up with had two button navigation to switch between the settings main options.
However, the engineering team changed the navigation layout of the Onbuddy to a sidebar menu.
I didn't see this as a possibility—having two sidebars in one design. Because I was used to designing screens with only one side bar navigation.
I went on to do my research, and found out that it actually helped in the scalability of new features. Which will be the reality of Onbuddy—having additional features in a not so distant future.
Implemented Design
Here is a snippet of the designs in real time on the Onbuddy application.
Other screens can be found on the Onbuddy application when logged in as a user.
Landing Page
Why was this design made?
The team needed a new landing page, to replace the existing design.
Beyond this, the current landing page didn't have some key options. For example: Sign in and Sign up buttons/options were lacking. And these will make navigation easier for existing and new users to access the Onbuddy web application.
This is Template 1, that I designed.
This is Template 2, that I designed.
Proteus Chat Mobile Design
Why was this design made?
The proteus chat design was only available as a web version.
In order to make it responsive, the mobile designs were created. Giving consideration to the mobile-first users.
Other Screens
This is a product that hasn't been officially launched yet. Hence, I am able to show this via a one-on-one video chat for now.
My Overall Reflections (1)
I saw first-hand how my eagerness, and being intentional to ask questions helped me understand the team dynamics, its focus and integrate with the team faster.
My Overall Reflections (2)
I was able to resolve a communication gap dispute between the engineering team and the design. Which was part of my highlight experience.
My Overall Reflections (3)
Based on the feedback I got from some of the team members, at the point of my exit, I can say without a doubt that my contributions were of a great help to the team.
And in meeting the business goals as well—the work pace moved faster during my time, volunteering with the team.
Client
Client
Proteus Ai
Project duration
Project duration
14 weeks
Impact of my collaboration and designs
Impact of my collaboration and designs
The designs I made brought about some useful and new ideas the team didn't have before. For example, the ability for an HR to deactivate notification for onbuddy across the organization during company's holidays.
A quote from one of the co-founders:
"I want to thank you sincerely for all your contributions; this goes beyond the lovely Figma designs you produced, extending to the insightful questions and constructive suggestions that often prompted us to re-examine our initial assumptions.
Your ability to integrate and work effectively with the team during this very early, and at times admittedly chaotic, stage of development was deeply appreciated. You navigated it all with remarkable professionalism."
Google Sites
Report abuse