Overview
It's a large-scale product with three different user groups, each having many tasks and scenarios.
Product name: eTeki
Product owner: Amanda Cole from Tampa (USA)
Design team size: 3 (I'm the desinger another two are UI developers)
Dev team size: 8
QA team size: 4
One dedicated business analyst
Duration: 2-3 years
State
When I joined the team, there was no UI, and only a few feature documents were available. The developers were focused on setting up the environment and addressing technical constraints.
How I approached
The business analyst briefed me on the product, and I began attending stakeholder meetings. I also had one-on-one meetings with the development and QA leads to understand the sprint planning and project scope.
I gained clarification after discussing with them.
- The front-end is developed using Angular and the PrimeNG framework, while the back-end is built with Node.js.
- The team typically follows an agile model with 2-week sprints, which may be extended depending on complexity or availability.
My proposal
- I proposed starting with clickable wireframes in Axure RP, which allows us to visualize the entire workflow in real-time.
- I was conducting internal reviews with the dev lead, QA lead, and business analyst, making any necessary iterations before presenting the final version to the Product Owner. Typically, I do extensive paperwork and documentation before creating the wireframes.
- Once the Phase I wireframes are approved and signed off, I move on to branding and visual design. HTML development begins only after the visual screens are approved and signed off by the Product Owner.
- The Product Owner approved this approach, and I proceeded with it.
User centric research
The product owner confirmed the market segments after discussing with stockholders. It’s recruiter, interviewer and candidate. We need to explore their tasks, scenarios, personas etc.. I was working with business analyst in this stage and we have done lot of research on the job portals and competitor analysis.
Direct interview method:
Actually these methods are very expensive. By luck we have realtime users in the our organisation. It’s in-house recruitment team and interviewers who usually participating in the hiring process. Therefore our research started with them.
and list out the tasks and scenarios in their daily basis.
We interviewed three members of the recruiting team and three senior leads who are typically involved in the hiring process. We gathered a lot of information about the tasks and scenarios. See the details below.
General Tasks: Conceptually recruiters are expecting below tasks when they interact.
- Create job
- Edit Job
- Filters
- View all job status
- Add candidates
- Add candidate
- Request Interviewer
- Share Interview
- Share Job
- Add timeslots
- Rate Interviewer
- View & Download Reports
- Join Interview
- Pay to Interviewer
Technological Constraints:
- Must compatible for leading browsers like Chrome, Firefox, Safari
- Should be available on iOS and Android
- Must be responsive for different resolutions
I prepared all the personas. Here's one of them, focusing on a recruiter.
Recruiter Persona
Country: India
Gender: Male
Age: 38 years
Marital Status: Married
Education: BCA
Occupation: Sr. Recruiter at Amzur
Domain Expertise: Excellent
Internet - Excellent
Social Networks - Medium
Games - Poor
Messaging - Medium
Online Shopping - Medium
- Quick access for all his jobs status
- Show new candidates
- Show pending/required activities
- Pending payments
- View/Download Reports
- Unnecessary ads
- Suffering with small fonts
- Create new job
- Add candidates
- Request interviewers
- Rate interviewer
- Schedule interview
- Join interview and few more from general tasks
User Profile
| # | Characterstics | Market Segment | ||
|---|---|---|---|---|
| Recruiter | Interviewer | Candidate | ||
| 1 | Language | English, Hindi, Telugu | English, Hindi, Tamil, Telugu | English, Tamil, Telugu |
| 2 | General Education | B.C.A | M.Tech | B.Tech |
| 3 | Domain Expertise | Expert | Medium | Low |
| 4 | General Computer Experience | Medium | Expert | Expert |
| 5 | Age / Gender | 28y / Male | 36y / Female | 24y / Male |
| 6 | Expectations | Hiring Candidates | Interviewing | Get New Job |
Task Profile
| # | Characterstics | Market Segment | ||
|---|---|---|---|---|
| Recruiter | Interviewer | Candidate | ||
| 1 | Login/Signup | Yes | Yes | Yes |
| 2 | Registration | No | Yes | No |
| 3 | Create Job | Yes | No | No |
| 4 | Edit Job | Yes | No | No |
| 5 | Share Job | Yes | No | No |
| 6 | Timeslots | Yes | No | No |
| 7 | Add Candidate | Yes | No | No |
| 8 | Close Job | Yes | No | No |
| 9 | Filter/Sort Interviews | Yes | Yes | No |
| 10 | View All Interviews | Yes | Yes | No |
| 11 | View/Download Reports | Yes | No | No |
| 12 | Join Interview | Yes | Yes | Yes |
| 13 | Prepare Agenda | No | Yes | No |
| 14 | Eteki Questions Library | No | Yes | No |
| 15 | Interview Calendar | Yes | Yes | No |
| 16 | Interview Notes | No | Yes | No |
| 17 | Code Snippet | No | Yes | Yes |
| 18 | White Board | No | Yes | Yes |
Environmental Profile
| # | Characterstics | Market Segment | ||
|---|---|---|---|---|
| Recruiter | Interviewer | Candidate | ||
| 1 | Location | Indoor | Indoor | Indoor |
| 2 | Geography | India | USA | India |
| 3 | Work Space | Office/Individual Room | Individual Room | Individual Room |
| 4 | Lighting | Cool/White/Outdoor | Cool/White | Cool/White |
| 5 | Sound | Quite/ | Quite | Quite |
| 6 | Device | Mobile, Desktop | Desktop | Desktop |
| 7 | Software | Eteki Platform | Eteki Platform | Eteki Platform |
Wireframes in Axure RP
I used Axure RP for the wireframes. It creates low-fidelity or high-fidelity wireframes with drag-and-drop functionality for UI elements. Build interactive and clickable prototypes with realtime content
Scope
The Product Owner finalized the market segments after discussions with stakeholders, including the recruiter, interviewer, and candidate. Consequently, we have begun working on the corresponding wireframes.
Process
I usually present my work to the internal team, gather feedback, make iterations until it's refined, and then present it to the product owner for approval. Once approved, I share the designs with the development team.
Recruiter's wireframes
I created separate wireframes for recruiters, interviewers, and candidates. Below is an example for the interviewer, and you can learn more through this link
UT approach
We selected a few individuals from the interviewer and recruiter user groups, which are commonly present in most organizations. I began the usability test sessions with the interviewer module. In these sessions, I acted as the moderator, while CH. Balu served as the observer and took notes. Before the sessions, I prepared a questionnaire with open-ended questions to cover all the tasks and scenarios typically encountered by interviewers.
Roles
Moderator: G. Balaji Sridhar
Observer: Ch. Balu
User: P. Mythili
Here are the details of the interviewer's usability test:
Tabulate Data & List findings
Prepared a detailed report after completing the user interview. Listed each task and assigned a rating based on performance:
(rating) 2 = Task completed independently in under 2 minutes.
(rating) 1 = Task completed with some assistance.
(rating) 0 = Task not completed within 2 minutes.
| # | Task | Expected | Comment | Rating |
|---|---|---|---|---|
| 1 | Registration | Areas of expertise Skill set Professional details Contact details Account settings |
- Few things are not listed in the areas
of expertise. Allow to add new ones. - Auto populate is better for the domain selection instead of dropdown from skill set section. - Some file formats are not supported on the resume attachment. Like PDF etc.. |
1 |
| 2 | Training videos | 5 Training videos from dashboard | Yes, It's helpful | 2 |
| 3 | Scheduled interviews | Calendar from dashboard | Quick access for the scheduled interviews but if add info-tips it would be great. | 2 |
| 4 | Upcoming interviews | Upcoming interviews from dashboard | Works fine | 2 |
| 5 | Eteki library | Eteki questions library from create agenda | At the first time user difficult to identify / understand this feature | 0 |
| 6 | Submit Report | Preparing feedback notes about the candidate | Works fine | 2 |
| 7 | Interview requests | Requests from recruiters | Works fine | 2 |
| 8 | Interview | Job Description Prepare Agenda Join Interview Cancelation reason Cancel interview |
Only confused on the prepare agenda | 1 |
UT Analysis
| User | Registration | Training Videos |
Scheduled Interviews | Eteki Library | Interview Builder | Create Agenda | Earned Amount | Rating | Certifications | Tech Panelist |
|---|---|---|---|---|---|---|---|---|---|---|
| Mythili | 2 | 2 | 1 | 0 | 0 | 1 | 1 | 2 | 2 | 0 |
| Shiva Kumar | 2 | 2 | 2 | 0 | 0 | 1 | 2 | 2 | 2 | 1 |
| Akshay Tiwari | 2 | 2 | 2 | 0 | 1 | 0 | 2 | 2 | 2 | 0 |
| Roshni | 2 | 2 | 1 | 1 | 1 | 1 | 1 | 2 | 2 | 1 |
| Adhitya | 2 | 2 | 2 | 0 | 0 | 0 | 2 | 2 | 2 | 0 |
| Avinash | 2 | 2 | 2 | 0 | 1 | 1 | 2 | 2 | 2 | 0 |
Analyzed how all users performed across tasks, identifying areas of success, struggles, and tasks needing redesign:
Green: Tasks completed successfully without issues.
Orange: Tasks requiring some guidance to complete; minor improvements are needed.
Red: Tasks that need to be completely redesigned and simplified for better usability.
Colors
Here is the color palette for eTeki. Primary and sencondary colors for the branding. High and medium emphasis colors used for the text.
Typography
I used two font families for the entire application: Open Sans and Muli. Open Sans is used for the titles, and Muli is used for the body text.
Icons
It has two styles of icons: branding icons and standard icons. Branding icons are used in the top navigation, while standard icons are used in all widgets in the body.
Branding icons
Standard icons
Visual screens
I created visual screens after they were finalized by the product owner, ensuring they followed the branding guidelines. Here are a few examples of the screens.
