STEM Insight
Project Summary
STEM Insight provides students with in demand science, tech, engineering, and math career information and links them to regional educational programs.
ROLE: USER EXPERIENCE, VISUAL & InTERACTION DESIGN, PROTOTYPING
Client: Dallas College, Fluor Partnership
As part of this grant funded project I worked within a team setting on the user experience, visual and interaction design of the site. I led the design, development and usability testing of the interactive quiz, career profile sections, and the user dashboard.
Goals & Process
High End Goals
Streamline access to regional career and degree opportunities in STEM (Science Technology Engineering and Math) for students
Provide regional in demand STEM career information
Provide educational career pathway options
Expand the pipeline of STEM graduates entering the workforce of North Texas
Challenges
Major challenges of the project included the large amount of differing potential education pathways available to students
Meeting multiple stakeholder goals along with and grant based restrictions and requirements
Managing collaboration between internal and external partners
Advocating for user needs versus stakeholder wants
Research & Discovery
Actively including all stakeholders in the preliminary content planning phases was key to establishing trust and collaboration between administrative, community business partners, and academic content experts.
Project Brief / Product Vision
An original project brief and project vision that was submitted to the grant funders was the basis for the initial requirements of the site.
Sprints
Through content sprints we were able to establish the overall site goals along with a content roadmap and gain insight into target user needs.
Card sorting was used as a quick and easy way to establish content grouping patterns. This design technique allowed us to include the large diverse groups of stakeholders in the content structure and needs process.
Empathy Map
We guided the content sprint participants to collaborate on empathy maps. Because of the variety of stakeholders involved this process helped to bring awareness to the student end user needs.
Information architecture
The information architecture was refined based on content and card sorting sessions.
Card sorting during one of the sprint sessions.
An early iteration of the information architecture based on phase one grant goals.
Design Solutions
Wireframes & Collaboration
Career Profile Wires & Flow
To streamline collaboration we initially used InVision to share and iterate on lo-fi wireframes.
This allowed all stakeholders to view progress, share, and provide feedback in one centralized location.
Dashboard Wires and Flow
The student dashboard underwent multiple iterations based on the growing goals and sections of the site.
Mid fidelity wireframes of the user dashboard.
Advanced Wireframing & Visual Design
Design solutions were pushed further with each phase of the wireframing process.
Home Page
design INsights
Design solutions were pushed further with each phase of the wireframing process.
Immediate access to exploring careers meet the project key goals.
Bright colors used to draw attention to interactive sections of the site inspiring exploration of those sections.
Career Category Landing
Design Insights
Design solutions were pushed further with each phase of the wireframing process.
The accordion career field section was reworked to include a short description. The focus target area was increased to make the it easier to select.
Along with grouping the fields into digestible chunks of information to lighten the cognitive load.
Career Profile Page
Design Insights
Design solutions were pushed further with each phase of the wireframing process.
Related areas of information combined to lighten visual load.
Unnecessary icons and redundant information removed to lighten visual load.
Information structured within a labeled table to help guide the user.
Usability Testing
Protyping Interactive Quiz
As part of the initial phase of the project we developed an interactive quiz to help guide students with career exploration choices.
Preliminary User Testing
Leveraging connections with our cross-department relationships we reached out to campus college high school administrators to recruit students for our task scenario test.
Two sets of tests were conducted one in a moderated computer lab setting and one remote test with a post task scenario survey.
Using Qualtrics (experience management software) allowed us to begin early testing. We used the data gathered from user observations and post test question answers to adjust the question logic and copywriting.
Testing Goals
Test quiz logic with target audience
Test completion rate
Reveal copywriting optimization opportunities
Testing Methodology
User Screener Questions
Task Scenario Test in moderated lab and unmoderated remote setting
Post Test Survey Questions
Testing the quiz logic and UX writing with a Qualtrics scored survey.
Usability Testing Results
Leveraging Team Content Experts
The content experts were key in the success of the test. Using their working knowledge of the target audience to set the reading level and tone of the quiz led to positive results.
Hi-Fidelity Prototype
A higher fidelity prototype was used to show stakeholders the quiz functionality and allow for comments and changes prior to final development.
The prototype was also used as part of the developer handoff to help dictate the interaction pattern and flow.
By testing early with a lower fidelity prototype we were able to adjust the quiz question logic and send to the JavaScript developer resulting in only minor revisions saving on build time and budget.
STEM Career Path quiz prototype with advanced interactions and the visual design applied.
Visual & Interaction Design
Logo, Color, Typography
LOGO DESIGN
The logo visually represents the sites main goal to connect students to STEM in North Texas. The connector line is abstracted from tech elements such as circuits, networks, and also the basic theme of connection.
Color Palette
Bright accent colors offset the darker main hue and bring focus to areas of interactivity within the site UI.
Accessibility contrast requirements
The original color scheme was revised for WCAG compliance after a usability contrast check revealed non passing parameters.
Typography
The typeface is approachable but also conveys professionalism to tie into the career aspect of the site. It is a combination of modern with subtle organic touches.
Illustrations
Hand drawn illustrations were used to add a unique and memorable aspect to the site. The illustrations were provided by a contracted illustrator.
User Interface & Micro Interactions
Micro interactions brought a fun and interactive component to the site.
The growing connector line interaction was used through out the site and was a fun way to incorporate the logo theme.
Home page prototype with interactions.
Key Takeaways
Stakeholder Collaboration
Actively including all stakeholders in the preliminary content planning phases was key to establishing trust and collaboration.
Leveraging Content Experts
The content experts were key in the success of the test. Using their working knowledge of the target audience to set the reading level and tone of the quiz led to positive results.
Include Dev in the Design Process
By having a representatives of the development team involved during the early design phases we were able to gain insight on the feasibility of maintaining an updated pathway for each career without the benefit of an automated backend database.