Upskillable Virtual Assessment Platform

Square

Upskillable

Web and Product (UI/UX) Design, Brand Identity

Upskillable is a virtual assessment/employee development platform in the MENA region with a vision to help companies assess and develop the competencies of their employees propelling their growth.

Duration: March – October 2023
Team: Anthony Chukwu (Lead Designer – Brand and Product)
Dubem Okonkwo (Product Designer)
Maymouna Aldabobi (Graphic Designer)
My Responsibilities
: UX Research, Product (UI/UX) Design, UX Writing, Brand Identity Design, Usability Testing

BACKGROUND

In 2023, the Saudi Minister of Human Resources and Social Development decreed that companies with more than 50 employees must disclose employee their training data annually on their Qiwa portal. (Arab News, 2023) This means that companies must not only prioritize employee development, but show proof. For years, employee assessment and development had been prioritized by the Saudi Arabian government leading to the rise of several virtual assessment platforms in the region.

REPOSITIONING

On joining the team, the stakeholders were talking about repositioning. Upskillable was known initially as an assessment platform only for hiring. But with the focus of the Saudi government on training, they wanted to reposition as an end-to-end employee development platform – from assessment to personalized report to development plans. They also made the platform bilingual – English and Arabic, and prioritized Arabic language in all touchpoints including Website, Social media, and Email.

DESIGN ADVOCACY

Even though the stakeholders wanted designs to continue at a fast pace, I advocated for a more systematic approach to solving the problem. I joined the team when they were at prototype phase. With the new positioning, I had to lead the team back to the drawing board – Empathize.

MY ACTION PLAN

Going back to the drawing board, I realized a few problems with the product strategy. So I decided to draw up an action plan for the design team
1. Market and User research
2. Establish a brand identity to foster design consistency
3. Redesign the website
4. Redesign the app

1. MARKET AND USER RESEARCH

The stakeholders had assumptions about the market and the users. Are they true?

ASSUMPTIONS

ASSUMPTION 1

Companies in Saudi Arabia are focused on employee development

ASSUMPTION 2

These companies need to carry out employee assessment

ASSUMPTION 3

They will pay for a digital solution that caters to these needs

ASSUMPTION 4

Employees are intrigued to know about their soft skills and how to develop them

MY SECONDARY RESEARCH

INSIGHT 1

Managers who are in charge of assessing training needs lack the necessary skills and knowledge to perform their tasks (Source)

INSIGHT 2

86% of MENA organizations consider employee development as a top priority. (Source)

INSIGHT 3

The Saudi digital transformation market has reached USD $40 billion, showcasing a growing appetite for technology-driven solutions. (Source)

INSIGHT 4

91% of talent professionals agree that soft skills are a major factor in transforming organizations (Source)

USER INTERVIEWS

Participants: 10 participants including HR Managers and general employees. 
Goal: To validate the assumptions. 
Incentive to participants: Free limited access to the platform upon relaunch
Interview duration: 45-60mins. 
Research duration: Continuous. The validation is still an ongoing process as we continue to recruit participants

Interview Questions

  1. What are the biggest challenges you face when trying to gain insights into your workforce?
  2. Are there any specific aspects or metrics related to your workforce that are challenging to measure or evaluate?
  3. Are you currently using any assessment tools or methods to understand your workforce? If yes, please provide details.
  4.  What are the main objectives or goals you hope to achieve through these assessments?
  5. How do you currently determine the training and development needs of your workforce?
  6. What kind of insights or data would be most valuable to you when designing training and development plans for your workforce?
  7. Is there anything else you would like to share regarding your experiences, challenges, or suggestions related to gaining insights into your workforce and preparing training and development plans?

USER PERSONAS

Based on my validation, we created two personas that will guide us in every decision we make: The HR Manager and the End User, The Employee.

USER STORY

CUSTOMER JOURNEY MAP

To fully capture the user experience and opportunities lurking, I mapped out the customer journey detailing how the customer experiences the product from awareness to advocacy 

COMPETITIVE ANALYSIS

We did some research with the marketing team to know what other assessment platforms were doing. We found out that most were more focused on hiring, than employee assessment and development. Our value proposition lies in the latter.

Assessments only for hiring. Not offered in Arabic

Big impact in the region. Do not offer personalized learning plans

Global brand. Psychometric assessments not tied to the workplace

Assessments only for hiring. Not offered in Arabic

2. REBRAND AND FOSTER DESIGN CONSISTENCY

Now that we had a clear picture of the problem we want to solve and its users, we needed the right identity to communicate. There was no brand identity document that the design or marketing team could rely on to create consistent design. Hence the brand did not have a recognisable face and could not make much impact in the market.

BEFORE

AFTER

With the stakeholders maintaining that we didn’t have time for a logo redesign, I resorted to making improvement in the existing brand icon, and working on the logotype. We had numerous reports of Saudi nationals finding it difficult to read or prounounce “upskillable”. So I decided to visually divide the name into 2 sections by weight and colour. Also ran a social media campaign with a voice over that pronounces the name correctly

A sharp distinction between the old designs and the new. More personality, more vibrancy, more connection.

PUT STYLE GUIDE BEFORE THIS

3. REDESIGN WEBSITE (FROM SCRATCH)

The old website had an old messaging, with designs inconsistent with the brand image the company was trying to portray. Working with the team, I redesigned a new responsive website from scratch: from sketching to wireframes to high-fidelity, and ux quality assurance during development.

4. REDESIGN THE PLATFORM (WEB APP)

I had a new vision for the platform but due to limited resources – time and technical personnel to develop, I resorted to redesign the existing platform. This posed more challenge than creating a platform from scratch. 

ACTION PLAN 1

Streamline the user flow for easy self-management

ACTION PLAN 2

Streamline features through prioritization

ACTION PLAN 3

Add a Freemium pathway to reduce time to value, and monetize a Premium plan

ACTION PLAN 4

Redesign components and align with refined brand identity

PUT COMPONENTS AND REST OF DESIGN SYSTEM HERE

FEATURE PRIORITIZATION

Working on the new app, I realized there were lots of unnecessary features that cluttered the app and made it so difficult for users to understand. Remember that it was built for hiring purposes. I walked through every feature with the Product Manager dividing them into important and to-be-removed

Feature list

REPORT DASHBOARD

REDESIGN COMPONENTS FOR BETTER UI

With an established user flow, redundant features removed, and a clear vision of who the users were and what problem the product was to solve, I was able to redesign the app with basic features. Note that I didn’t have the figma for the old design. I had to trace the design from from the live version.

Style guide, Sign Up, Select Assessment, View Reports, Dashboard, Upgrade to team account, Share assessment, Mobile

A MORE USER-FRIENDLY APP

With an established user flow, redundant features removed, and a clear vision of who the users were and what problem the product was to solve, I was able to redesign the app with basic features. Note that I didn’t have the figma for the old design. I had to trace the design from from the live version.

Style guide, Sign Up, Select Assessment, View Reports, Dashboard, Upgrade to team account, Share assessment, Mobile

A MORE INTUITIVE REPORT

With an established user flow, redundant features removed, and a clear vision of who the users were and what problem the product was to solve, I was able to redesign the app with basic features. Note that I didn’t have the figma for the old design. I had to trace the design from from the live version.

Style guide, Sign Up, Select Assessment, View Reports, Dashboard, Upgrade to team account, Share assessment, Mobile

INTRODUCE MONETIZATION THROUGH A PREMIUM PLAN

One of the dilemmas the stakeholders faced was how they were going to monetize the app while also giving users the opportunity to see the value for free. That’s when I introduced the Credit system. Typically, when users upgrade to a teams account (talk about this individual and teams earlier), they are given a few credits to share assessments with their teams and get a team report. Then they need to pay to access the premium plan and unlimited assessments

Show the upgrade pages, payment pages, etc. mobile and desktop

GAMIFICATION

One of the dilemmas the stakeholders faced was how they were going to monetize the app while also giving users the opportunity to see the value for free. That’s when I introduced the Credit system. Typically, when users upgrade to a teams account (talk about this individual and teams earlier), they are given a few credits to share assessments with their teams and get a team report. Then they need to pay to access the premium plan and unlimited assessments

Show the upgrade pages, payment pages, etc. mobile and desktop

DESIGN LEADERSHIP

To improve our UX maturity and foster design consistency, I wrote the company’s design manual in collaboration with the other Senior designer, documenting a step-by-step approach to conducting usability testing, user interviews, ux audit, etc.

USABILITY TESTING

Using the Usability Testing manual I wrote for the company, and leading the design team, we were able to carry out testing on all touchpoints to ensure usability and zero bugs. A total of 3 issues were spotted and prioritized for fixing

show the testing process and screenshots

EVALUATING SUCCESS

Using Zoho analytics. identifying metrics to track. identifying data points. Blah blah blah

CROSS-FUNCTIONAL TEAM COLLABORATION

Using Zoho analytics. identifying metrics to track. identifying data points. Blah blah blah

STAKEHOLDER ENGAGEMENT

Using Zoho analytics. identifying metrics to track. identifying data points. Blah blah blah

ETHICAL CONSIDERATIONS

Using Zoho analytics. identifying metrics to track. identifying data points. Blah blah blah

MY LEARNING POINTS

Blah blah blah

NEXT STEPS

Keep on working on the redesign while optimizing the UX based on continuous user feedback.

LATEST UPDATE

We’ve pivoted again. Due to very dire financial circumstances and the need to quickly generate much more revenue, the focus of the product had to be streamlined. So the individual (free) plan was put on hold and all focus was directed to the team plan. The app has now been stripped away the individual side of the user flow

BRANDING

Philosophy

1. Community

2. Variety

3. Seamlessness

Naming

1. Lagos Eats

2. The Restaurant Hub

3. Eko Jeun

STYLE GUIDE

SKETCHING / PAPER WIREFRAMES

I sketched out ideas for the app screens: how each app page should look, and its features. 

LOW FIDELITY DESIGNS

I moved on to create a lo-fi prototype with the following major functions: Signup/Login, Order a dine-in/take-out, place a delivery order, Select restaurant/meal, and Wallet.

USABILITY STUDY

I conducted a moderated usability study to evaluate the ease of use of the app (low-fidelity prototype) and identify areas for improvement. Using an affinity map, I was able to group the feedback and see areas in the design that needed to be reviewed. Firstly, the homepage was simplified to show the user a Categories section, Top recommendations and Recent visits. The option of Dine-in, Takeout and Delivery were moved to later in the flow. Favourites was added to the bottom navigation bar and the option to save debit card was introduced.

AFFINITY MAP

DARK MODE

I also set out to explore a dark UI mode for the app due to its aesthetics and accessibility advantages.