Back to home page

Turned Tables

Interaction Design, Visual Design


Project Details
Challenge: Can job-hunting graduates and talent-strapped Indian start-ups network over 'Question & Answer' discussions?

Client: Elysium Labs

Role: UX Consultant

Duration: June 2015 – August 2015
Contribution
Persona Development
Task Flows
Information Architecture
Wireframes
High Fidelity Mockups
Tools Used
Pen and Paper
Lucidchart
Illustrator




OverView

In a booming startup economy, perennially cash strapped companies often find it difficult to attract the right talent. On the other side of the coin, candidates find it hard to judge a startup's potential without reliable sources of information. Elysium Labs - founded by serial entrepreneurs who face this struggle everyday- set out to create a powerful online networking tool to bridge this gap.

'Turned Tables' is based on the premise that simple question and answers can often spark interesting conversations. Using context, these dialogues can then be leveraged to match the right talent with right vacancy.



Guerrilla Testing

Since there was no budget for a comprehensive user research, I planned a quick guerrilla study over phone with two start-up founders and two job seekers. This gave me a glimpse of the problem environment to identify pain points and come up with actionable ideas.



User Persona

The above research was also synthesized to develop a persona. This was primarily used to ensure that I was on the same page as the client when it came to defining the target audience. Below is an example of one of the persona's used in the project.



Design objectives

Once I was clear with user behaviours, I outlined project scope based on client needs and research results:
1. Create a platform for informal but professional dialogue in the form of question and answers.
2. Design an easy to use content development page that will be used to create and share content (like projects, blog posts, job openings, company profiles etc.)



Task flows

In the next step, I worked closely with the client to establish a data inventory. Based on this, relationship between various features were identified. This knowledge was used to develop content flow diagrams.



Sketching interfaces

After validating task flows, I started work on user interface. I find pen and paper to be the most efficient medium for fleshing out ideas.



Wireframes

Low fidelity sketches, notes and scribbles together formed the foundation for wireframe development. At this stage, I started identifying element behaviour and interaction patterns. Task flows were further broken down and local actions are specified. Most of the wireframes were annotated to show links to overall product goals.



Visual Design

Once the skeleton of the product was ready and approved, I came up with suitable content to set the right tone for the product.

Color
Yellow and Sapphire are used as primary colors with Sunglow Red as a secondary color. The look creates an aura of optimism and energy. It's used to make the brand look very confident in it's skin making it suitable for a target group of young audience.

Typography
Open source grotesque typeface "Source Sans Pro" is combined with the dynamic serif typeface "Alegreya" to reinforce the language of "informal confidence." The varied rhythm of Alegreya with its calligraphic influences sits well with the faint Humanist traits of Source Sans Pro.



Interface Details


Minimal Performance load
An emphasis was placed on minimizing the amount of effort required to complete a task and improve system efficiency. For example, it is possible to read, comment, reply, vote and share posts directly from Newsfeed. Similarly, the notification panel gives actionable links based on context. When a keyword/ phrase is searched, an option to post it as a question is offered.




Proximity-Compatibility
Information that may be required for a task is displayed in close proximity to the selected element. This eliminates any ambiguity and cuts down on task completion times. For example, when starting a search, past queries are available for reference. On typing a word, suggestions are categorically displayed. Also, all editing is done in real time so that the interface looks exactly as intended.




Error Recovery
Error messages have been designed to clearly communicate what went wrong and how to recover from it. Use of conversational language reduces frustration by taking the blame away from users. Inline error messages show actionable recovery options, so that the users do not have to think about their next step.



Product mockup screens