Client
Collabera

Core Team
Me in iOS App Product Design and Visual Identity
Anjani Kumar in Business, Sr. Vice President and Global Chief Digital Officer
Goutham Bende in Business Strategy and Development

Challenge
How might we design the experience, key product and interaction features of a new mobile app for employers and recruiters to easily find and onboard talent in a more human way?

Deliverables
iOS App Prototype
Visual Identity

iPhone6_trans_search
iPhone6_trans_jobposts
iPhone6_trans_interviews

Why should I care and So what?:
Identifying and understanding user needs

Collabera is a global IT Recruitment and Staffing Agency with 40 offices worldwide. They match talent to work with the 250+ organizations in their network, and manage the talent end-to-end in the project. They came to me with a mobile app idea, but before we got into the feature requirements, I pressed on the brakes. Often with the excitement of new, early stage ideas comes a tendency to feature creep, and show users everything that a product can do, instead of showing them how their life would improve by what they can do with the product. 

The mobile app market is saturated with products vying for people’s attention. It will take a strong, concerted effort to introduce a new app at the company, or even department level, and not without met resistance. You’d have to scratch a real burning itch, a real felt pain that would make people go through the trouble, time, and energy of learning a new app and integrating it into their workflow.

User-centered design requires that we define What problems exist, and ask ourselves Why? and So What? In my kickoff meeting, I asked my client questions about 

  • their industry landscape. What service gaps do you see in your industry?
    Staffing is very location-based but there hasn't been any good location-based service for finding talent.

  • their target audience. What problem(s) are your target audience facing? What itches them? How would their (work) life change if they integrated this app?
    Small and medium-sized businesses (SMBs) will have to hire talent in one of three common cases: bulk hire (on a seasonal basis or for a new location) and last minute hire (after someone leaves the company). Think of an accounting firm looking to recruit CPAs during tax filing season or a healthcare firm looking to hire lab technicians for a new facility. 

    Most of them will not have a dedicated HR department, or have one but staffed with a few to handle all the processes. The documentation on HR processes, if any, will be sparse and scattered through e-mail threads or documents saved on someone's local computer. If an experienced HR person leaves, the history of a company's HR processes may be hard to trace. 

    HR will often be spread thin, losing time and energy to manually-tasking HR processes like sorting through hundreds of poor search results while looking for talent, or scheduling interviews back and forth during a bulk hiring period. Overburended by the many things HR has to handle at once, the consequence results in a poor experience for all, from the people in HR, to the prospective candidates, employees, and the organization as a whole. 

  • their business intentions. Why then do you think a mobile app would be the best way to solve the problem?  What will the mobile app prototype be used for? What assumption(s) do you want to test and validate?
    Collabera felt that most of their current and prospective clients will be doing more and more of this HR work on the go, and from their mobile phones, so they wanted to test the feasibility of a cross-platform mobile app idea that helps employers and recruiters find talent just in time, and onboard the talent all in one platform.

Because I wasn't able to interview any prospective users, I worked with Collabera to build a persona to make the user memorable in my mind as I designed for her. (Image source from Google Image Search)

 

persona_maria

(meta) Designing how to design

I used the findings in my kickoff meeting and user research to identify the key activities that users will be doing. These key activities formed the bottom navigation persistent throughout the app:

  • Searching and discovering talent
  • Creating and managing job posts
  • Shortlisting talent to interview for various roles
  • Scheduling and managing interviews
  • Managing account

Once I established the key activities, I designed a process for how I would build out the screens. For each screen, I would

  • Review and translate the relevant activity diagram, information flow diagram, and wireframes provided by Collabera
  • Apply systems thinking to define the main purpose and key tasks of the screen, and how they relate to other activities and tasks on the app
  • Map out the key user task flows to understand “what the user will want to do and the simplest, most effective way of doing that.”

 

Activity flow diagram of all stakeholders involved, and information flow diagram
for the Search and Shortlist screens provided by Collabera

activity_diagram_all@2x
info_flow_diagram search
  • Create a list of the required (and nice-to-have) elements to complete the task(s) successfully
  • Research mobile design patterns that would fit the solution
  • Note how the elements would interact with each other within the screen and across the other screens in the app

 

List of the elements in the Search screen

reqs for search
  • Wireframe the IA and layout of the screen
  • Design hi-fidelity mockup with applied style guide
  • and finally, Design in some key states to show how the user might interact with the UI

 

Wireframes on wireframes

app wireframes
search

Designing for accessibility

When Collabera gave me the green light to diverge from their current branding and play with a new visual direction, I jumped at the opportunity to explore color as a way to make the app more accessible to users with disabilities, and for the broader audience of mobile users who are accessing the app on the go, and outside where the glare from natural sunlight makes it often hard to read screens.

An A11y color palette ensures that the foreground and background colors of the app have sufficient contrast, and helps make the interface more readable for everyone. I used A11y Rocks and Random A11y to build several A11y color palettes, and mocked them up against a screen for comparison. 

color_palette_choices

"Attractive things work better." - Don Norman.

Altogether, this color palette, the font pairings, and a rounded shape UI made up the thoughtful style choices towards creating a product that is in balance--in beauty, utility, usability, and accessibility.

 

Final color palette we chose

background and foreground text combos

Designing information

Information design is the practice of presenting information in a way that fosters efficient and effective understanding of it. I wrote natural language UI copy, so that users interact with elements in the interface, in the way that humans talk and not how a system talks. Knowing that users will be performing several information-heavy tasks, I designed patterns to help users stay focused on the task at hand, reduce clutter, confusion, and cognitive workload. I applied progressive disclosure and a card architecture to

  • Break up the heavy manual data input into manageable chunks for Provide Feedback and Create New Post screens
  • Show the most important information first, and group related information into digestible chunks for Search Talent and View Profile screens
feedback prototype
iPhone6s_adult_hand_profile@1x

       👏 + ☹️😐🙂😄 + 😍😔😕

Another interesting information design problem that I came across involved designing rating systems. In three ocassions, users are required or given the option to provide some kind of rating on X. The rating systems must all unify in look, but be distinct and relevant to their purpose.


Collabera also wanted to divert from the traditional star or numeric rating system since they felt that neither systems were compelling and relevant ways to visually represent what was being rated in the app.

After doing some design research, searching for inspiration and reading up on rating systems here and here, I came up with an emoji rating system:

  • Emojis meet people where they are, on their phones. People are used to using emojis to describe how they feel about something
  • Because they're yellow with rounded edges, emojis lighten up even negative feedback
  • And you never get old of how cute they are!
iPhone6s_senior_hand_feedback@1x

Designing the defaults

Designing the defaults removes complexity from the process for users. Together with Collabera, we identified instances where we could save users time and energy, and reduce error by designing the defaults to automate manual and repetitive tasks: 

  • Too much back and forth scheduling eats up time when you're trying to fill roles quickly. By default, whenever users schedule a new interview, the app automatically suggests times that match with the candidate(s) they want to interview. The app also enables users to schedule one or more interviews with different candidates at once. 

  • Bulk hiring for the same roles in new locations and/or seasonally means you'll be hiring for the same roles over and over. By default, whenever users create a new job post, they can re-use old job posts that will automatically pre-fill in their new one, and modify it as necessary.

  • Often times, users will search for talent but delay creating a post because it takes more time. By default, whenever users search for talent, they can use their search criteria to create a job post, and modify it as necessary.

Human by design

"The details are not the details. They make the design." - Charles Eames

Every detail is an opportunity to make the product more human. I think about this a lot as I approach every new project, and this one was no different. I started by discovering and gaining an understanding of user and business needs, then designed a design process to ensure I solve for those human needs, and finally, designed all the details—the accessibility, the information, the defaults—that made the design.

iPhone6_trans_new_job_post
iPhone6_trans_new_interview
iPhone6_trans_interview_room

                                                      ✌