- 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.
BuyerZone.com's mobile lead generation UI.
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.
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.
Font: Avenir, StandardThis 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 BlueTo stay consistent with other parts of BuyerZone.com, I used Havelock Blue for text links.
Color: RangitotoI used Rangitoto (weird name, huh?) as a background color.
Color: AnzacThis is slight tweak of the orange color conventionally used on BuyerZone.com. I used Anzac for all of Call Connect's CTAs.
Color: Dove GrayI felt that this was a good color to differentiate paragraph text from its background while maintaining readability.
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.
Page load animation.
Call Connect Results Page
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.