AT&T interactive/YellowPages.com

NBMBAA Conference Recruitment App

An HTML5-based mobile recruitment app for the 2013 NBMBAA event for AT&T interactive/YP.com

Mobile Recruitment HTML5 App Adaptive Design LinkedIn Integration

ROLE/TEAM

Local Online Display Ad Team
Creative Lead
Product Designer
UX/UI Designer
UX Researcher, QA
Content Writer

TOOLS

MS PowerPoint
Adobe Creative Suite
MS Office
HTML 5
Bootstrap
Adaptive Design

DATE/DURATION

Nov 2013
4 Weeks from concept to implementation

Situation

AT&T needed to create a mobile app within four weeks to serve as an engagement vehicle for the 2013 NAABMBA event. The app was to be a recruiting tool and had to be designed with UX/UI in mind.

The project was a special request from YP (formerly AT&T Advertising Solutions/AT&Ti) with a very tight timeline for the entire project scope of work.

Goals

  • Build a mobile app for the 2012 National Black MBA Association Conference from start to finish in 4 weeks
  • Increase YP/AT&Ti brand awareness
  • Attract and recruit new qualified talent from minority talent pools
  • Enabling attendees to apply for jobs or submit their resumes directly and in the conference
  • Engage and educate with event attendees
  • Build a qualified minority talent pipeline
  • Create a template for recruitment vehicles that could be repurposed and implemented at other conferences

Concepts, Sketches, Wireframes

My goal was to devise a portable and device-agnostic app that would ensure seamless interaction for respondents. Given the highly limited runway we had to complete the project, I created basic designs incorporating YP.com brand elements and used other event apps and webforms as reference.

Recognizing the need for ease-of-use in a bustling and distracting environment, I introduced the option of extracting information from a published LinkedIn profile. Although this functionality was relatively novel and uncommon at the time, it provided a straightforward means of gathering ample candidate data with minimal exertion.

Lastly, I adopted an adaptable approach, allowing for potential optimization of app content across screens and devices in the future.

 
NBMBAA mobile recruitment app user flow registration process adaptive design mobile tablet desktop

Action

The flow starts with the launch screen, and from there, users are directed to the home screen card that displays both old and new values and links to the feature educational content, including videos, text, and external articles available via branches from the home screen.

The main feature can be accessed via two paths: integrated into the performance summary or as a stand-alone capability. In addition to these core features, we have introduced some additional capabilities, such as launch screens and video educational content.

Flows

As we wanted to minimize development overhead while creating a simple, easy-to-follow registration flow so I designed the low around shared components and followed adaptive design concepts to ensure that users would be presented with a consistent experience that guided them to completion as we mapped out flows for both mobile and tablet/desktop devices.

NBMBAA mobile recruitment app user flow registration process adaptive design mobile tablet desktop

Visual Design & Prototype

Because this would not be an app that would have time to go through the normal review by the brand team, I developed a style guide for a that aligned with the established YP Design System guidelines. This way, when it was launched, it would look the part and be able to pass review when submitted for subsequent years.

NBMBAA mobile recruitment app user flow registration process adaptive design mobile tablet desktop
NBMBAA conference recruitment app final mobile tablet interface screens AT&T interactive YellowPages

Result

We created a hybrid adaptive app that works on both tablets and mobile phones for the event. The app was designed to be easy to use and helped YP recruit people who were interested in internship, mentorship, and employee recruitment programs.

This pattern was then also used to create targeted recruitment apps for other events.

Challenges and Limitations

There were some setbacks:

1. The delivery timeline was considerably condensed. With more time to explore the architecture and design I might have made different choices.

2. Extremely limited testing and feedback before going to production. While there were no usability problems as we were not able to do more in depth user testing of the prototype or final release version. Luckily, there were no reported issues with the app.

We were able to meet the request shortened launch timeframe, and despite some trepidation around more testing, the app was well received and was a great first mobile app for me as a UX/UI and Product Designer.