UX Design and UX Strategy Consulting

Project Overview

In this article I document my recent work with a leading tech giant to design and develop a new product in the employee experience domain. The work included a range of deliverables such as Figma Designs, Research Documentation and Presentations, Knowledge Maps, Flow Diagrams among others. Although I am primarily documenting the UI/UX Design work in this page as sharing some of the other work could be overwhelming and would also involve internal material of the company.

This is a documentation created from scratch on my personal computer, based on the work I did at the company. This work is not directly affiliated with the company.

Primary Tools:

Figma

Miro

Lucid Chart (Diagraming Tool)

Duration:

7 months (full-time)

Research
Information Architecture
Components
UI Design
Prototype Overview

Research

The research included talking to stakeholders in structured interviews and workshops to collect insights and data. THREE steps in the research process I would highlight here are:

1. Stakeholder Workshops

Stakeholder workshops were conducted in a structured format where diverse set of stake holders including developers, technical experts, product managers, bussiness representatives among others were invited to participate.

Explained to us their key tasks day to day, their priorities, and their goals. This helped us to understand their experience of tasks in question such as internal recruitment, learning new skills, applying for Gigs and more.
Highlighted their painpoints and ideas for future improvement in various stages of the employee experience domain. With the entire expeirence mapped in Miro diagram where in they can just post sticky notes, this complex task was made easy for stakeholders.
Participants also were asked to design low-fedility UI in a FigJam board, these designs were based on a pre-prepared layout created by the design team and components which they could drag and drop.

2. Competetior Analysis

Multiple products which were in the domain including products by the companies Eightfold AI, Workday and Beamery were studied in depth. This included review of product design, user experience, and business goal alignment studies.

3. Figuring Out The Governance

We discovered through initial workshops that we needed to establish new governance frameworks to govern certain features of the product including Gigs, Courses and Mentorship.

System Diagrams & Information Architecture

Below are mermaid charts showing the new platform in the context it is situated. The charts below show how the new platform is connected to a range of employee applications and expeirences. Maps such as this, are created in Miro and/or LucidCharts but I am using Mermaid Charts here as it renders better on web.

1. Chart shows the system wherein the platform is situated.

graph LR A[ATS] --> B{Job Offer} B -->|Yes| C[Onboarding Platform] C --> D[Employee Experience Platform] D --> E[Offboarding Platform] F[Outreach Tool] --> G((Candidate)) G -->|Applies| A H((Employee)) --> D I[Manager] --> D J[HR] --> A J{HR} --> C J --> E K[Business Enablement Team] --> D K --> C K --> A K --> F K --> E style D fill:#8CACD5

2. Chart shows how the new platform is connected to a range of employee applications and expeirences.

graph BT A[Skill Library] --> B[Employee Experience Platform] C[Course Library] --> B D[Workday] --> B E[Internal Jobs] --> B F[Gigs Platform] --> B G[Benefits Platform] --> B H[Knowledge Platform] --> B I[Internal IT Support] --> B style B fill:#8CACD5

3. Information Architecture of the platform

graph LR A[Home] --> B[Profile] B --> BA[Personal] BA --> BAA[About] BA --> BAB[Interests] BA --> BAC[Links] B --> BB[Professional] BB --> BBA[Role] BB --> BBB[Team] B --> BC[Education] B --> BD[Skills] B --> BE[Past Experience] B --> BF[Certifications] B --> BG[Settings] B --> BH[Preferences] A --> C[Grow] C --> CA[Jobs] CA --> CAA[Explore Jobs] CAA --> CAAA[Job Details Page] CA --> CAB[Past Applications] CA --> CAC[Job Details] C --> CB[Gigs] CB --> CBA[Explore Gigs] CB --> CBB[Gig Details Page] CB --> CBC[Applied Gigs] CB --> CBD[Gigs Policy] CB --> CBE[Active Gigs] A --> D[Learn] D --> DA[Courses] DA --> DAA[Course Recommendations] DA --> DAB[Course Details Page] D --> DB[Mentorship] DB --> DBA[Explore Mentors] DB --> DBB[Mentor Details Page] DB --> DBC[Recommended Mentors] A --> E[Wellbeing] E --> EA[Discounts] E --> EB[Merch] E --> EC[Health] E --> ED[Wellness] E --> EE[Rewards] E --> EF[Retirement] A --> G[Knowledge] G --> GA[Knowledge Articles] A --> H[Support] H --> HA[My Support Tickets] H --> HB[Raise a Ticket] H --> HC[FAQ] A --> I[Search Results] A --> J[Notifications] A --> K[Saved Items] style A fill:#8CACD5

Components

A component library was developed on top of an exsisting design system. The components documented below are my recreation of the components based loosely on the design system of the company.

Top Nav Bar

The top nav bar is presented here in all it's variant formats.

Footer

Here is the footer in two different formats.

Card Components

Various Card Components are shown here.

Small Cards

Smaller versions of the cards are shown here.

Buttons and Icon Buttons

Here are the different button components used within the application

Input Components

Here are the input components used in the application

Filter Component

Here are the filter component, versions of this are used accross the application

UI Design

Below is the profile page UI

Below is the Gigs UI, this is quite similar to the UI of Jobs and Courses with minor differences.

Final Thoughts

Interactive prototypes of the application was created and tested with users and potential users. For brevity's sake I only documented a few representative screens and custom components in this article.

Back to projects->

Check out some of my recent projects.

Home Page->

Go back to the home page