top of page

UXCEL - Pre-engineering Resource


UX Designer/Researcher


10 weeks (Oct - Dec 2017)

  • User Research

  • User Tests

  • Personas

  • User Journey Map

  • Storyboards

  • Information Architecture

  • Wireframes

  • Low-Fidelity / High-Fidelity Prototypes


Aleenah Ansari

Leana Nakkour

Colin Youngblood

The Problem

Admission to the College of Engineering at the UW is very competitive, with majors that are all capacity restrained. Pre-engineering students at the University of Washington are typically first and second year students who have identified an intended engineering major of interest but haven’t applied yet. They may struggle to identify their field of interest and be unprepared when applying to their majors. Not being prepared not only would cause them the opportunity to get in to a major, but also add to the pre-major stress. Oftentimes, they are unable to find helpful information and don't know where to look for the right resources that can aid them in finding and getting into the right major.

Design Question: How can we support pre-engineering students in their journey to prepare for successful engineering applications?

The Solution: A Website for Pre-engineers

One of our goals is to create a website that contains organized resources across categories such as study resources, application information, and jobs & internships. Students would receive helpful information in all of these areas, and would additionally have customized recommendations based on their interests. Using this application, students get to explore different majors, learn about themselves better, track their progress, and discover which engineering major suits them the best. This website would give pre-engineering students an advantage to become prepared for their upcoming application deadlines.

User Research Findings

I 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 between the ages of 17 to 20 years old.

My participants' insights were a helpful starting point to understand the needs of pre-engineering students. I asked questions that helped to learn where the UXCEL website could fit into their current use of resources. 

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.

  • 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, my group and I created two personas that would be representative of pre-engineering students at the University of Washington. Each persona 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.

User Journey

Based on our personas, I helped brainstorm and create a user journey map that outlined an engineering student's typical school year. Together 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.


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!

Design Requirements

Based on our personas and user research, I came up with a list of possible requirements to prioritize in our pre-engineering website. The list was then refined as my group and I discussed the reasons for our method of prioritization. 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 all agreed that the resource should:

  • Provide resources all in one place

  • Offer customized recommendations based on a student’s engineering major 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

By 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 decide what direction we wanted to take the project and evaluate the feasibility of our design ideas. I created the two storyboards below. I chose representative scenarios that pre-engineering students would facesuch as making study groups and preparing for registration. 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.

Screen Shot 2018-10-23 at 8.41.46 PM.png

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

  • Live chat with an adviser

  • Create a study group for an engineering prerequisite course

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. 

We asked students to use "think aloud" protocol when navigating through our website, and we asked clarifying questions about their expectations and assumptions. 

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 UW's MyPlan.

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.