jm_white
Call Connect
Mobile App Design
Project Details

  • Role: UX/UI Design Lead
  • Deliverables: Mockups, Design Specs, UI Animations
  • Tools: Adobe XD, Illustrator, After Effects, Photoshop
  • Date: June 2018
The Core Problem

BuyerZone.com (one of Purch’s subsidiaries) wanted to launch a mobile web app that allowed users to quickly call a seller for a sales quote instead of completing BuyerZone’s multi-page online lead generation form and waiting to be called by numerous sellers. I was tasked with designing this mobile web app, which the team referred to as Call Connect.

My Approach

Here's an outline of my design process, with jumplinks to each corresponding section.

1: App Requirements

I met with stakeholders to learn the business's needs that the app needed to fill.

2: User Pathing

I mapped out the paths users could take when using the Call Connect UI.

3: Wireframes

I created a wireframe for each step of every potential user path.

4: Style Choices

My rationale behind the colors and fonts I chose for Call Connect.

5: Final Designs

My final designs for the Call Connect UI.

6: UI Animations

I created UI animations to help communicate the app's intended behavior.

BuyerZone.com's mobile lead generation UI.

App Requirements

I met with the primary stakeholder, BuyerZone's Senior Director of Operations, to understand the app's requirements and parameters, which were:

  • The app was specifically for BuyerZone’s mobile users.
  • The app was to be an overlay on top of BuyerZone’s mobile lead generation form.
  • The app needed to collect the user’s zip code before providing a phone number to call a seller.
  • The app needed to display a results page with the names, descriptions, and phone numbers of three sellers for the user to call.
  • Users should have the flexibility to exit the overlay and complete the mobile lead generation form, if they choose to.

User Flow for the Call Connect UI.

User Pathing

With the app's requirements set, I started creating a user flow for the actions that users should be able to take while using Call Connect.

Wireframes

Next I created sketches which evolved into wireframes for each app screen. I again met with the Senior Director of Operations to ensure that the concepts I put together addressed the company’s needs.

I also met with the front-end team and learned that we could determine our users’ zip code by using their IP address, instead of their phone’s GPS. Without a need for our users’ GPS, we could remove the app screen where we requested location permissions. As such, I omitted this screen from the app flow when creating my final designs.

Style Choices

Here are the colors and fonts I chose for this project.
Aa

Font: Avenir, Standard

This readable font is used all across BuyerZone.com. As such, I used it here for headings and paragraph text to help maintain consistency.

Color: Havelock Blue

To stay consistent with other parts of BuyerZone.com, I used Havelock Blue for text links.

Color: Rangitoto

I used Rangitoto (weird name, huh?) as a background color.

Color: Anzac

This is slight tweak of the orange color conventionally used on BuyerZone.com. I used Anzac for all of Call Connect's CTAs.

Color: Dove Gray

I felt that this was a good color to differentiate paragraph text from its background while maintaining readability.

Final Designs

Call Connect's final UI designs.
Design Specs

To help guide the front-end team, I prepared design specs with Adobe XD. These specs provided dimensions, colors, font sizes, etc., for every element on the page.

UI Animations

To illustrate the app's behavior, and to help guide the front-end team, I created some animations.

Page load animation.

Call Connect Results Page

Next Steps

By creating Call Connect, our team provided a way for our users to call sellers directly instead of waiting to be called by numerous sellers. Next, the team needs to test whether our approach was successful. Here’s the data that I’d like for us to collect as we test the Call Connect UI:

  • Exit rates for each page in the Call Connect flow.
  • Whether users are scrolling to see all sellers on the results page.
  • Which sellers on the results page are users calling?

With these data points, we can design another iteration of the Call Connect UI that could fit our users’ needs more closely.




Questions about this project?