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.

High Fidelity Prototypes

In this final step, we created a high fidelity prototype to convey how the final product would look and operate. Our final version of the mock-up was modified based on our findings from paper prototyping, wireframes, and in-class critiques from our peers. As you can see, we completely redesigned the homepage from bubbles to a list of content headers on the front page. This change was in response to feedback from pre-engineering students that our original content sections like “Community Building” and “Application” didn’t intuitively suggest the content of “Mentorship Programs” and “Admission Requirements,” respectively. Our high fidelity mock-up surfaces the content sections at the top level (e.g. Advising is now its own content header instead of under the “Majors” heading) and uses more intuitive names like “Road to Application” that were developed based through conversations with pre-engineering students during our prototype testing. 

We focused on connecting our current resources at the University of Washington like MyPlan and Husky Jobs, as well as department websites, and we wanted to provide personalized academic recommendations and preferences at the top of each content page. For example, the major summaries page pulls up "Computer Science & Engineering" as the top result. We also added a section of the page that highlights prerequisite courses rather than courses of interest for a major, and we also provided a separate section with related majors so the focus is on their top choice engineering major.

Additionally, we created a high fidelity prototype of our Timeline feature. Based on feedback from usability testing, we added the ability to set a specific completion date (rather than a general time period like by the end of the quarter), a space to add notes, and the option to add notifications.

We redesigned the study groups and used more familiar language (e.g. using the word "size" vs. "capacity"). Based on suggestions from usability testing, we added the feature to filter the list of study groups by location in addition to group name, course, and size.

We we redesigned our Courses page as well to incorporate personalized features. The website recommends classes based on the user's intended major and classes taken. With this feature, we hope that pre-engineering students would reduce the time spent looking for classes and help them stay on track for completing major prerequisites for their intended major(s).


Working on this project in our HCDE 318 class was a valuable opportunity to iterate on our concept in response to feedback. Ultimately, we created a product that responded to demonstrated student needs. The biggest challenge was keeping our own assumptions and projections out of our design, and ensuring that we designed specifically for our user’s verbalized wants, needs, and goals. We challenged ourselves to cite insights or conversations with pre-engineering students whenever we were iterating on our design. We wanted to focus on how we could best support pre-engineering students in their academic journey up to their intended application date(s), focusing on developing a holistic experience.

While we sometimes struggled to come to a consensus on design decisions, we focused on explaining our design rationale and choosing features that would satisfy the needs of our target users. Additionally, working in a randomly assigned group is good for practicing working in industry because people rarely get to choose who to work with. By the end, we created a more refined product that responds to pre-engineering students’ needs, motivations, and pain points. Explaining our design rationale in class critiques, written assignments, and the final presentation was an opportunity for us to practice selling the value and intention of our work while being receptive to opportunities for improvement.

Ultimately, this was an opportunity to use the entire user-centered process to identify and solve a problem. We enjoyed discovering and utilizing new design tools and becoming more familiar with elements of strong design through peer critiques.

Next Steps/What Would We Do Differently

If we had more time, there would have been a number of things we would do differently. Working with a small sample size of pre-engineering students provided a limited amount of data - because of this, we knew that we weren’t creating a product that was as representative as possible. To address this, we could increase the amount of user research we completed initially to get a better understanding of our users comprehensive needs. We would also conduct more interviews with students across a wider range of engineering majors.

Another thing we would like to do is to perform prototype testing with an interactive version of our revised high-fidelity prototype. Doing this testing could help us gauge the effectiveness of our final prototype, and whether or not we needed to re-think some of our design choices that were implemented after testing the paper prototypes.

Based on feedback from presenting our solution in class, we would also focus on the visual design of our high fidelity prototype to ensure that the background photos don’t distract from the content. It was also mentioned that the black fade overlay behind the text on some pages made the content difficult to read, particularly for users with visual impairments.  To resolve this, we would test our design in black and white to ensure that it is accessible and inclusive.

Lastly, we would have liked to include more personalized elements and features to show that the website is centered toward a specific user. We started to do this by populating recommended major summaries at the top of our "Major Summaries" page, but we could design more screens that highlight personalized course, job & internship recommendations, events, and RSOs. If we had more time, we would focus on implementing these aspects to better fulfill the user's needs.