mobile | likhitha

Partnerbeat Mobile anchor

Partnerbeat is a B2B Startup providing CRM services. This Application provides Spaces and Shared spaces for each client/partner relationship. The Shared Space is for easy external collaboration. I designed the end to end Mobile experience of Shared space.

My Role

UX Research, UI Design, Prototyping, High-Fidelity Mockups.

Team & Duration

I solely worked with stakeholder Susan Totten for 3 weeks.

Tools

Figma, Adobe Illustrator

Results

In Development stage.

Problem

20% of the users have tried accessing Shared site through mobile, which is unresponsive.

Screenshots of how it appears on mobile today

Problem

User cannot access full shared on mobile as, it is unresponsive. He can click on few meetings.

Problem

User cannot access full shared on mobile as, it is unresponsive. He can view notifications only.

The solution is to provide users the Mobile Experience to increase the overall usage of Shared site.

User Goal & Business Goal

The user goal is to easily access and manage shared site on mobile. The business goal is to increase the overall usage of Shared site by its users (Partner Managers).

UX Research

Understanding users

My first approach was to understand under which circumstances are users trying to access shared site on mobile.

JIM, Partner Manager

Jim is a Partner manger working for Aventis and he maintains 15-40 relationships.

Painpoint

Jim is in a internal meeting with his team and is away from his desktop. He now wants to check his upcoming meeting with Customer success manager. He also wants to review meeting notes.

On another occasion, when he was away from desktop, he recollected he had to update his CSM on onboarding issue, he realizes he has to wait as he cannot access his shared site on mobile.

Goal

Jim wishes to have access to his shared site on mobile, so that he view his upcoming meeting and edit the meeting notes if required and to access chat thread.

Alice, Partner Manager

Alice is on Partnerships team and is responsible for making sure these relationships are successful. He maintains 20-60 relationships.

Painpoint

Alice wants to easily manage his relationships hence accesses Shared site sent by one of his Customer success manager from Acme. He is on his way to having lunch and he receives alert from Partnerbeat site, indicating a new task action has been assigned to him. Unfortunately he cannot access it on mobile as the shared site is unresponsive on mobile.

Goal

Alice wishes to access notifications of Shared site on mobile to have a frictionless experience Partnerbeat is trying to achieve.

Competitive Analysis

My next approach was to do competitive analysis to understand the pulse of Partnerbeat competitors. I analyzed two Direct competitors : Churnzero, Gainsight, and indirect competitors: monday.com, Asana.

Purpose : The purpose was to understand whether competitors have mobile version of their app, how have they addressed their users painpoints and also to get the do's and don'ts of mobile design.

Insights : Indirect competitors and Gainsight have native mobile app and not Mobile web app. As shared site is part of full Partnerbeat application, to address the user painpoints, it is not possible at this stage for the company to develop Mobile app.

Sketches for Planning the User's flow

With the user research, I realized that users viewing alerts from Partnerbeat on Mobile space would be dominant. Hence started sketching user flow of alerts on mobile.

My first approach was see if I can avoid notification icon on the bottom navigation and use red dots as alerts
to indicate use of updated actions.

Pros:

It reduces number of clicks a user takes to read of the notifications

Cons

Red dots are overwhelming for the user to identify his primary action.
No history/ record of new action items.

2. My next approach was to add notification icon on the bottom navigatio and the notification page will be two tabs, one in where users were mentioned, like assigned an action, or mentioned in chat and All tab will have over all new actions.

Pros:

Users can clearly see which action items needs his immediate attention.
All his updated are recorded so that he can revisit the specified action if necessary.

Cons

More number clicks to address all the action items

Asana

Track, manage and collaborate across teams.

Pros

Easy navigation across the entire app.
Clearly indicating at which stage they are in the app.

Cons

Dark grey on bottom navigation is a strain on the users eye.

Design

Explorations for Landing Page.

From my initial sketches, I realized that having notification icon on navigation will help users access updates on Shared Site easily. Hence my approach of designing landing pages had notification icon.

Total Explorations : 14

Goals

Incorporating all the Shared site features available on the web application.
Make sure that users get what they looking for on mobile web application without them being lost.
Provide users experience as good as Mobile app.

Visual Constraints.

I cannot deviate majorly for Web application, in terms of experimenting with colors, font as it would be quiet challenging while developing Mobile web application.

Some initial Explorations (3/14)

Final design

I wanted the users have similar experience working on Mobile web app as Web App.
As in our research we observed that most of the users are trying to access Shared site on Mobile to quickly check next upcoming meetings and its related notes, I decided to make meeting notes as landing page.
Bottom navigation was chosen as it gets easy to navigate across the whole app, as its nearer to the thumb.
Swipe action to navigate across the app, as it gives users the freedom for usage.
Limited color palette as its company design philosophy of Function over form and any UI element include should justify its purpose for users.

Shared site appearance on Web.

Solution

Resolving Alice Painpoint : Viewing Notifications on Mobile.

User Journey: Alice receives an alert from the Partnerbeat team that a change has occurred on his shared site. Here is Alice's experience using Notifications on the mobile web app.

Alice

Partner Manager

Alice viewing Notifications.

Alice receives alerts from Partnerbeat team, he click on the link.

Alice lands on Meeting notes landing page. He clicks on notifications.

Alice cannot set to get notified only when he is mentioned in the action items, hence Notifications are divided into into two tabs. One as "Mentioned" and other as "All".

Resolving Jim Painpoint : To Access Meetings on Mobile.

User Journey: Jim is in a meeting with his internal team and is away from the Desktop. He wants to check his upcoming meeting with the Customer Success manager also check his meeting notes. Here is Jim's experience using the mobile web app.

Jim

Jim viewing meeting notes experience.

Partner Manager

Swipe left

Jim lands on meeting notes page, he clicks on up arrow to access his next meeting.

Jim clicks on his very next meeting to access it notes.

Jim views his meeting notes to prepare for his meeting

As Jim is in is need to view his previous to previous meeting notes to prepare better for his upcoming meeting, he can swipe left.

Jim can access upto 5 previous meeting notes with swipe.

Jim wants to add few points to his meeting notes, he click anywhere on the screen, type pad appears.

Jim makes changes, click on done to land on main page.

Resolving Jim Painpoint : To Access Chat on Mobile.

User Journey : Jim is on his way to restaurant for lunch, he recollects that he forgot to update his CSM of a certain task, as he is away from desktop, he accesses mobile web app of shared site for updating. Here's his experience using chat thread on mobile.