HCDE 318: Creating a resource for pre-engineering students

Context: Group Project for HCDE 318: Introduction to User-Centered Design (Autumn 2017), an upper division design course in Human Centered Design & Engineering


Designing a Resource for Pre-Engineering Students 

Group Members:

Aleenah Ansari (me) | www.linkedin.com/in/aleenah-ansari/

Leana Nakkour | www.linkedin.com/in/leana-n

Melody Xu | www.linkedin.com/in/ruotongmxu/

Colin Youngblood | www.linkedin.com/in/colinyb/

Skills and Tools:

  • User Research
  • User Testing
  • Personas
  • User Journey Map
  • Information Architecture
  • Wireframing
  • Low-Fidelity and High-Fidelity Prototyping  (Balsamiq and Figma)

THe Problem: Pre-Engineering students

Pre-engineering students at the University of Washington are typically first and second year students who have identified an engineering major of interest but haven’t applied yet. For example, to prepare for the application deadline, students take prerequisite classes in Chemistry, Math, and Biology and other engineering fundamental courses. Oftentimes, they struggle to find the right classes to take for applying to their majors before a deadline. Additionally, they might get involved in research, internships, and RSOs to learn more about their engineering major of interest and become a competitive applicant.

Ultimately, these pre-engineering students don't have one place where they can find admission requirements, jobs and internships, and coursework that helps them develop their skills. This occurs because pre-engineering resources are in a multitude of department websites and platforms like HuskyJobs, departmental websites, or RSO listservs, so students don't know where to start looking.

Admission to the  College of Engineering is based on a range of factors like GPA (particularly grade trends), experience, breadth and depth of their coursework, involvement in extracurricular activities, and effectiveness of their personal statement in articulating their long-term goal. If it is hard for them to find the right resources, prospective engineering students may struggle to identify their field of interest.

The Solution: A Pre-Engineering Website

Our goal is to create a website for pre-engineering students that contains organized resources across categories such as study resources, application information, and jobs & internships. Students receive customized recommendations based on their major of interest so they can focus on taking advantage of these opportunities and prepare for their upcoming application deadline.

User Research: Students want to feel supported in their academic and professional pursuits as they prepare for upcoming deadlines

We conducted interviews with pre-engineering students to understand what kind of support they wanted to receive and which of their needs are not met with existing resources. Our user demographic was pre-engineering students at the University of Washington and we ensured that they were not participating in Direct to College because those students are guaranteed admission into an engineering major.

Our participant's insights were a helpful starting point to understand the needs of pre-engineering students. We started by asking their intended engineering major(s) and current course schedule to get context. Then, we asked them what pre-engineering resources they currently used, and what tools would have been helpful. These questions helped us understand where the UXCEL website could fit into their current use of resources.

Being engineering students ourselves, we had to be intentional about not asking leading questions or making assumptions about their needs. We did this by asking clarifying questions about students’ experiences using phrases like “You mentioned X. Tell me more about that” or “Why does that matter to you?” While discussing grades is often an emotional topic, we used our own identity as engineering students as a point of connection with the participants. 

Ultimately, we found that students wanted:


Real-world experience in engineering: Students didn’t know what jobs they could get with their engineering degrees, and they wanted to get some real world experience in engineering through internships and jobs.

Screen Shot 2017-12-11 at 3.14.20 PM.png

Strong academic performance: Students wanted to get high grades in their engineering prerequisite courses.

Acceptance in their top choice engineering major: Ultimately, students want to get into their top choice engineering major.

Our user research later helped us develop our user personas.


To reflect our user research, we created two personas that would be representative of pre-engineering students at the University of Washington. Each personas includes characteristics, pain points, desires, and tech use based on all of interviews with the goal of making them as realistic as possible. In each persona, we tried to capture the emotional experience of being a pre-engineering student and their desire to get into their engineering major. 

We iterated on each draft based on feedback from our instructors and peers. These are the two personas we came up with:

Jessica Gonzales is a pre-engineering freshman hoping to study Computer Science and Engineering or Chemical Engineering. She is a first generation college student who loved math and science classes in high school. She uses a Mac laptop, iPhone, and Apple calendar to keep track of school assignments and events. She is concerned that she will get rejected from her top choice engineering major, and she doesn't know of any internship opportunities that would help her develop more skills in the major. Moreover, she's in her first Calculus class and finds that content really challenging.

Oscar Blaine is a pre-engineering freshman hoping to study Electrical Engineering (EE), and he's trying to adjust to college life and make friends at UW, which is especially challenging because he's an out-of-state student. He is focused on getting a high GPA in his engineering prerequisite courses while balancing work at Local Point, along with his social life. Moving forward, he hopes to find a research opportunity in an EE lab and work with engineering advisers to pick the right classes.

Jessica_final persona.png

User Journey Map

Based on our personas, we created a user journey map (Figure 1) that outlined an engineering student's typical school year. We outlined their journey from orientation and advising to the time of application. For each section, we highlighted the emotions associated with that part of the journey.

User Journey Map

Our user map included the following stages:

  • Anticipate: A student anticipates starting college at their Advising & Orientation session and registers for engineering prerequisite courses.
  • Enter: A student meets other students who live in the same residence hall.
  • Refine Focus: A student repeats this stage until they apply for the College of Engineering. The students use on-campus resources like pre-engineering advising, study centers, and classes. In this stage of the journey, students are focused on doing well in their engineering prerequisites, so our user journey reflects how students become increasingly confident and aware of study resources on campus over the course of an academic year.
  • Apply: A student has taken the prerequisites to apply to an engineering major. They work with department advisers and writing centers to revise their personal statement. At the end of the journey, a student feels relieved because they’ve worked so hard for this moment!

"Refine Focus" section of the journey




By highlighting a student’s entire journey, we saw how they adjust to college and become more familiar with engineering resources on campus. We decided to focus on the "Refine Focus" section of the journey (Figure 2) where a student takes engineering prerequisites and learns more about their major because this is where having resources can have the most impact.

Design Requirements

Based on our personas and user research, we created a list of requirements to prioritize in our pre-engineering website. The purpose was to define the abilities our personas (and therefore users) require in order to reach their goals. We wanted our features to organize existing resources at UW across broader categories of academics, community-building, and preparation for upcoming application cycles. 

Most importantly, we agreed that the resource should:

  • Provide pre-engineering resources all in one place
  • Offer customized recommendations based on a student’s  engineeringmajor of interest
  • Avoid reinventing the wheel but improve it by leveraging current tools like MyPlan, Husky Jobs, and department websites
  • Enable students to save or favorite items and reference them later

Ny allowing students to find engineering resources by category and provide recommendations based on their major of interest, we hope to help students find the right resources and follow-up so their focus can be on learning more about the major.


Next, we created storyboards that helped us decide what direction we wanted to take the project and evaluate the feasibility of our design ideas. For each storyboard, we chose representative scenarios that pre-engineering students would face such as looking for mentorship opportunities, making study groups, learning about an engineering major for the first time, and preparing for registration. Each team member created a storyboard for a scenario where our website could be used. Each storyboard has different perspectives, views of technology, and context where a student might use our website. By envisioning where students might use our website, we started to think about the content we wanted to prioritize in our paper prototype.


Information Architecture

The next step was creating a diagram that showed the flow and navigation in our system. Based on the information we identified in our storyboards, we chose the content sections and general structure of our website in order to show the hierarchical relationships between the different high-level sections of our system. Our content sections reflect different areas of support including academics (study resources, advising), community building (RSOs, events, and mentorship programs), major exploration (talk to alumni, majors), and application information.

Revised Information Architecture

In our final iteration of our Information Architecture (Figure 5), we revised our website organization to surface content to the top level instead of nesting content. For example, "Advising" is at the top level instead of being nested under Majors. We also agreed that the globally accessible quick links were unnecessary since we had simplified the webpage's navigation.

Paper Prototype

The paper prototype was a low fidelity version of our website that we could test with pre-engineering students at the University of Washington to get a better idea of how well our visual representation in our layout and the features we offered met the needs of our users.

We used this paper prototype to test the following three tasks for a website:

  • Add goals to a student’s timeline : We choose this task because we wanted our website to encourage pre-engineering students to do well in their engineering coursework, get involved in RSOs, and set other milestones on their journey to applying. The goal of this task was to help students keep track of these academic and professional goals and show their classes if desired.
Paper Prototype: Timeline

Paper Prototype: Timeline

  • Live chat with an adviser: We chose this task because pre-engineering appointments fill up very quickly, especially around the time of registration. This feature allows pre-engineering students to ask questions remotely through an online chat system.

Paper Prototype: Live Chat with an Adviser

  • Create a study group for an engineering prerequisite course: The goal of this task was to create a new study group and add group members who are in the same class. We came up with this feature because we knew that pre-engineering students like using study groups, but there weren’t channels to facilitate communication in these groups. Additionally, students weren’t familiar with resources to easily make study groups and communicate with group members. By making a widget for creating a group and adding members who are in the same class, we hoped to help students communicate.

Paper Prototype: Make a Study Group

We thought that these three tasks would be representative of our website’s functionality and our additional features. We tested our paper prototype with pre-engineering students at the University of Washington and iterated on our design based on their feedback with the goal of making the product more valuable to our users.

Experience Evaluation Findings

In order to test whether our design met the expectations and needs of our users, we conducted user testing with our paper prototype to gain insights about how they feel about the design so far. This helped us identify the strengths of our current system and ways in which we could make it more intuitive. We also wanted to know if students would actually use our resource since we leverage existing pre-engineering resources like MyPlan and the College of Engineering pages. 

Our user demographics were first and second year pre-engineering students at the University of Washington who were between 17 and 20 years of age. We started by asking them how they currently find information about engineering events and jobs. Then, we presented them with the paper prototype on our computer and asked how they would navigate through each of our scenarios. We asked the students to use "think aloud" protocol when navigating through our website, and we asked clarifying questions about their expectations and assumptions. For example, before they selected a content heading from the front page, we asked, "what would you expect to find in this section?" If the heading name was not intuitive, we asked for alternate suggestions. We took detailed notes on their feedback and discussed students' insights as a group so it would inform future iterations.

Based on testing with pre-engineering students, we found that they wanted:

  • Personalized recommendations: Our users voiced that they often struggled to find the resources they needed and would give up, so they liked the idea of being presented with the resources they need based on their major of interest
  • Clearer labels and navigation: Our users did not know what content would  be found under "Community Building" or "Majors" based on these names
  • Features that add value to existing resources: Our users frequently asked how our resource was similar or different to existing resources like MyPlan

It was really valuable to hear from pre-engineering students since they are the potential end users of our website. To address their needs and expectations, we focused on wording the headings to be more descriptive. For example, one participant suggested that we change “Major Application” to “The Road to Application” so it would encompass all the required steps to prepare for an upcoming application deadline. We also focused on eliminating redundant features and pathways. For example, students noted that the “Courses” page’s functionality was similar to MyPlan, which allowed the user to see current classes and planned classes. In our revisions, we used course descriptions from MyPlan to provide a list of recommended courses based on a student's intended major and the skills they wanted to develop like "Python programming" or "circuit design."

Annotated Wireframes

After compiling the insights from our paper prototype testing, we created screens for wireframes of our website using Balsamiq. A wireframe illustrates the visual organization, or framework, of a design, and it uses placeholders for functionalities and features that are not explicitly included. The purpose here was to ensure that the visual layout of our design flowed and was intuitive to use, and that the layout of the pages was accomplishing what we intended. For each screen of our wireframe, we added annotations to explain the purpose of elements on the screens that might not have a clear function (Figure 9).