ux designer
THECB.png

Career and Education Exploration Portal

Discovery research, wireframes, visual comps, and user testing validation.

Deloitte Digital | Career and Education Exploration Portal

  • Timeframe: 20 months

  • Role: Primary UX Researcher and Interaction Designer

  • Team: I worked closely with a Senior UX Designer, UX Creative Director, and team members specializing in content strategy, service design, visual design, and engineering.

  • Industry: State, Local and Higher Education (SLHE)

  • Project Objective: Propelling adult learners toward degree, credential, and job attainment.

This web portal offers millions of Texas students a direct route to career opportunities by facilitating the attainment of valuable postsecondary credentials. It provides comprehensive resources, actionable information, and data-driven recommendations, supporting an equitable increase in opportunities for educational and career success in line with the client's vision.

The portal is designed and developed to be easy-to-use and maintain, accessible and inclusive, and scalable to adapt to evolving market conditions and growing student populations in Texas.

*This is a client within in the Government and Public Services practice at Deloitte, and their name may be changed or referenced differently to anonymize this project. If you have any questions, please send me an email!


Project Approach

A human-centered design (HCD) approach was used to identify the needs of users and deliver on the client’s core values. The work was organized around the framework of discover, define, design, develop, and deploy as described below.

  • Discover: Gain a comprehensive understanding of the current landscape and users, as well as identify needs that are unique to each user base of the portal.

    • Guiding Design Principles

    • UX & Brand Competitive Analysis

    • 1:1 interviews with users and stakeholders

  • Define: Synthesize research findings to draw insights, make recommendations, and create foundational elements to enable successful design and development iterations.

    • Role-based Personas

    • Experience Principles

    • Modes & Mindsets

    • Process Map

  • Design: Visualize and solidify a product solution that achieves both business and product goals for the defined audience of adult learners with extensibility into future audiences.

    • Wireframes

    • Prototypes

    • Style Guide + Design System

    • Iterative Usability Testing

  • Develop: Utilize materials from the Design phase to iteratively build and test the portal based on user and stakeholder feedback.

  • Deploy: Execute release readiness and launch activities and provide necessary training and knowledge transfer materials to support successful portal go-live and maintenance.

*Design, Develop and Deploy were executed largely in parallel to allow design and development to be executed iteratively, enabling increased utility, accessibility, and satisfaction for users.


Discovery

Guiding Design Principles: Guiding design principles were developed as one of the first steps of discovery, because as designers, our duty is to ethically prioritize user needs throughout the Discover, Define, Design, and Develop phases. Key considerations include:

  • Whom are we prioritizing?

  • How are we engaging in the work?

These principles, rooted in the foundational values of the product, guide design decisions, especially when addressing conflicts between stakeholders such as users and service providers.

  • Inclusivity: Center the needs of those directly impacted by the portal and actively reduce barriers for historically underrepresented communities.

  • Care: Foster a sense of care in users’ interactions with the platform stakeholders and services and empower people to achieve their goals.

  • Empowerment: Maximize the freedom of those affected by the platform while minimizing the burden on the users in determining their future pathways.

Competitive Analysis: A competitive analysis was conducted to identify gaps and opportunities within the existing product landscape. By examining the ecosystem in which this portal operates, key insights were formulated to guide the design and implementation efforts. Throughout this process, critical categories and competitors for analysis were pinpointed to determine the following:

  • How each competitor is meeting/exceeding landscape expectations,

  • Gaps in the market that leave target audience needs unmet, and

  • Established benchmarks that will set user expectations when interacting with this portal.

When analyzing competitors for features & experience, focus was centered on the following areas:

Subsequently, analysis was completed on how each of the 16 competitors meets, exceeds, or falls below the implementation of the 10 competitive categories. To illustrate the intersection of each competitor/competitive category, Harvey balls were utilized to visually convey the degree to which a particular item meets a particular criterion (shown t0 the right).

Stakeholder/User Research: Over the course of 3 weeks, stakeholder and user research was conducted to gain insight into the opportunities and pain points that adult learners encountered when seeking credentials of value.

If you’ve met one adult learner, you’ve met one adult learner.
— Stakeholder Interviewee

Adult learners come from a variety of backgrounds and circumstances, and a one-size-fits-all approach will at best only serve some of their needs, and at worst will alienate users who need the most support. The user research focused on recruiting a variety of users, with a focus on:

  • Ages 25-61

  • Racial and socioeconomic diversity

  • Family situation

  • Current employment status

  • Time away from school

  • Career goals

  • Geographical spread (rural, urban, from all corners of Texas)

In total, our research comprised of:

  • 14 Stakeholders interviewed: Staff, agency representatives, higher-education institutions.

  • 20 Users interviewed: Adult learners, advisors, employers.

  • 30+ Hours of interviews.

  • 1k+ Interview utterances generated.


Define

Affinity Mapping: Individual utterances and takeaways were pulled into a digital whiteboard to conduct affinity mapping. The affinity mapping board was populated with takeaways from stakeholder and user interviews, existing research (e.g., pain points and opportunities, personas, journeys, and competitive analysis results). Through this iterative, collaborative process, common themes were identified across user groups. These themed groupings were transformed into Role-Based Personas, Experience Principles, Modes & Mindsets, and a Process Map.

Affinity Mapping via Figjam.

Role-Based Personas: Role-based personas are important to further refine the understanding of feature and permission sets required for users while still avoiding the unconscious bias of traditional personas. Four role-based personas were created based on the target audience of this portal.

Experience Principles: Experience principles are the most concise distillation of the user research. Through synthesis, common themes were identified based on what was heard again and again in user research to generate these five guiding design pillars. These principles serve to guide the design effort at both the macro and the micro level — from prioritizing features within a product roadmap to designing the granular aspects of specific screen controls.

Modes and Mindsets: Modes & mindsets transform attitudes, beliefs, and behaviors into meaningful, client-centered patterns and relationships. Modes and mindsets are not intended to be a static representation of the adult learner, but a dynamic one. Adult learners can embody any of the modes and mindsets depending on their context and environment. This methodology not only translates the findings obtained during the existing and new research phase into opportunity-driven, user-focused insights, but it also scales to depict the potential behaviors and motivations of future student groups.

Modes: Modes are collections of tasks and actions that adult learners perform in the course of navigating their return to higher education. Modes help identify and prioritize epics, feature sets, and user stories for design and development. They also help ensure we’re building the functionality that adult learners need.

Mindsets: Mindsets are the outlooks and approaches that users bring to the modes they are acting in. Mindsets can shift over time based on the context the adult learner is working in. Mindsets help the team design UX, UI, and content catered to the most common approaches adult learners take as they interact with the portal. When combined with role-based personas, the provide a fluid and dynamic way to understand users.

Process Map: The Process Map is designed to convert research insights into actionable features and functionalities for the portal. It details the journey of an adult learner within the portal, outlining necessary actions, features, content, and data integrations.

Following the creation of the Process Map, a prioritization session was conducted with the client. During this session, features were strategically categorized into three key phases: the minimum viable product (MVP), the next release, and subsequent releases.


Design

Over 40 wireframes were designed for this comprehensive portal, working in sync with front-end, back-end, and database engineers. This collaboration aimed at transforming client requirements into a dynamic application that integrates data from multiple sources effectively.

Lo-fi Wireframes: Figma was utilized to design lo-fi wireframes for all core functionality for the following pages: Homepage, Career Explorer, Program Explorer, Career Quiz, Global Search, Learner Profile, and authored content pages.

Example of Program Explorer wireframes.

Design System: This design system was created in order to create a consistent, visual look for all products across the product ecosystem. The design system features an extensive collection of components defined by a core set of shared principles and foundational patterns to ensure intentional design from a user, technical and visual perspective. ​

High-fidelity Comps: Within each sprint, partnership with the visual design team was crucial to effectively refine low-fidelity wireframes into high-fidelity comps, ensuring a seamless handoff to the development team and maintaining the integrity of the user experience. These were tested in bi-weekly user testing sessions, and user feedback was incorporated into designs after each session.

Example of Program Explorer high-fidelity comps.

Annotations: Post each sprint, the UX team meticulously annotated each page element to clarify functionality for the development team. These annotations detailed guidance on buttons, drop downs, icons, and other components, which ensured seamless communication and precise implementation.

Example of Annotations file for Program Explorer.