Connect PBX

Mobile app for a business phone system

Who is Grobot?

Case Study

Contact

Who is Grobot?

Contact

Case Study

Design Portfolio

Mobile App - Portfolio Project

To view more, please use desktop mode :)

Overview

Problem:

The current app is outdated and clunky. Many functions are redundant and hard to find.

Goal:

Improve the user flow to enable ease of use and bring visual design to modern standards.

What I learned:

Making an entire app is a huge undertaking. I initially thought I would put in every feature I wanted in a phone system app. after a while, I had to reel in my expectations for what was possible to complete with a limited skillset. After spending way too many hours on the prototype phase, I settled on making a handful of user flows that were the most impactful.

What I would do differently:

This project was made without any repeatable components. If I were to complete this app, or do another similar project, I would put much more effort into creating repeatable elements rather than making everything custom and unique.

User Research

For this project, I conducted several usability studies and multiple rounds of interviews after each iteration of the design. Research participants were given the opportunity to provide feedback after each round of questions.

Pain Points

1 Voice Chat

Some users, especially ones who were not as tech-savvy, had difficulty differentiating between voicemail and voice chat.

2 Button Size

Some users found the buttons to be difficult to press in the Figma prototypes.

3 Gestures

Some users liked using gestures to navigate, and others did not.

Persona

"I’m so glad I have the opportunity to work from home. Commuting was a real chore."

Age

Gender

Female

Family Status

Married

Children

None

Job Title

Legal Assistant

Most used device

Smartphone

Cassie

Art credit: Framui

Cassie

Background

Cassie wakes up at 6 am to make sure she gets to the gym before making back home and signing in to her computer for work on time. As she goes through her morning routine she is taking mental notes of what she needs to do that day. “File briefs, call clients for the 3 cases she is working, and order more legal notepads,” she thinks to herself while she brushes her teeth. She organizes everything in her online calendar as she eats her breakfast. As she looks through her calendar, she sees an automatically generated meeting invitation for a video call with her boss. She accepts the invite and opens the Connect app to send her boss a message: “Did the meeting with Corpa Capital get moved to today?” Her boss calls Cassie to go over the details of the meeting.

Goals

• Keep her work and personal life separate, but equally organized.

• Be great at her job, and make connections she can use as references.

• Study for the law school admissions test in her spare time.

Frustrations

• Using technology for work and school does not come naturally to Cassie.

• Can never remember all of her passwords.

• Can’t figure out copy/paste on her smartphone.

User Journey Map

Persona

Goal

Action

Tasks

Emotions

Opportunities

Cassie

Transfer a call to her boss without dropping the call

Speak with boss

Set reminder

Place a call

Prepare for transfer

Transfer Call

• Receive call from boss

• Take notes on who to call and when

• Open calendar

• Set reminder and save

• Open Connect app
• Go to contacts tab

• Find contact and call

• Introduce herself and let the person know she will connect them

• Press transfer

• Select boss from list

• Confirm Transfer

• Understanding

• Curious

• Determined

• Nervous

• Neutral

• Unsure

• Notes feature

• Calendar integration

• Transfer confirmation

• Animation

Starting the design

The main consideration when making paper wireframes was deciding whether to use a homepage with a dashboard or not.

I wanted to make the calls page feel familiar to what users experience on iOS and Android. We did not want to reinvent the wheel here.

Digital Wireframes & Lo-Fi Prototype

The goal here was to make the calls page feel familiar to what users experience on iOS and Android. We did not want to reinvent the wheel.

Accessibility is key when designing features like voice recording, so I decided to make the button very large, since this screen was intended only for this one purpose.

At this point in wireframing, it was so exciting to be able to make the features I thought a great app needed. Learning new tools is an awesome experience.

View Lo-Fi Prototype

Usability Study & Design Iterations

Round 1 Findings

1 Everyone expected the filters to work

2 Some icons are inaccessible because of their size

Round 2 Findings

1 Accessibility features are better for everyone

2 Users expect a confirmation after they transfer a call

Not all features appeal to all users

Some users are completely new to the idea of sending a voice chat.
Users may not know that a voicemail and a voice chat are different things.
Once users were able to find the feature, they could use it without issue.

Let users know they completed a transfer

Most users were unsure that their call transfer was completed successfully.
Implementing a confirmation screen was a quick and easy fix.
Simple things like this can be forgotten when designing without any outside input.

Accessibility Considerations

1 Button size matters. In the real app, I would make sure to implement multiple accessibility options that would adjust button and text size.

2 Users may not be very familiar with how many features are available on phone system apps. Giving them explanations can be helpful.

3 Some users did not remember what page they were on, so I added a light background on the bottom nav to remind them what section they are currently in.

HI-Fi Prototype

I consider my first ever prototype to be a huge accomplishment. Learning what is available in UX design software was an exciting endeavor, and at this point in my learning, I felt I could make anything. The reality was that I still had a lot to learn after completing this project. Moving forward, I learned about making components and using existing elements and layouts to expedite the design process and create more organized structures.

View Hi-Fi Prototype

Back to Portfolio