UXCEL: Pre-Engineering Resource
UXCEL was a group project with three other Human Centered Design and Engineering students where we took a quarter-long (ten week) exploration through the entire design process from User Research all the way to High-Fidelity Prototyping.
Design Question
How can we make it easier and less stressful for pre-engineering students to get through the process of applying and being accepted to their engineering major of choice?
Tools Used
• Adobe Illustrator
• Balsamiq
• Figma
Skills Used
• User Research
• Persona Creation
• User Journey Mapping
• Storyboarding
• Information Architecture Creation
• Paper Prototyping
• Usability Testing
• Wireframing
• High-Fidelity Prototyping
How I Contributed
Throughout this project, I assisted my group on many steps such as persona creation, user journey mapping, and usability testing. However, I directly contributed in six main ways:
User Research
First, I researched other pre-engineering specific resources available for students at the University of Washington's Seattle campus and conducted an interview with a pre-engineering student. Combining my interview data with my teammates, we gained a few useful insights to consider during our design process. Specifically, we learned that pre-engineering students want real world experience through internships or jobs, help with improving their grades in their classes, and, of course, any information on what they could do to increase their chances of being accepted to their desired major.
Storyboarding
Second, I created two storyboards for two different scenarios which were used to help our team focus our design efforts. The first storyboard scenario was a student that was interested in CSE internships but isn't sure about qualifications or where to look for available positions. The second storyboard was a student that is in CSE 142 (UW CSE's introductory object-oriented programming class) and is doing well, but wants to know what they need to do to be more competitive for the major and stand out in the application pool.
First storyboard
Second storyboard
Information Architecture
Third, with our insights from storyboarding in mind, I used Adobe Illustrator to design the Information Architecture for our resource in order to show the user flow and navigation of our website. As we proceeded and made changes to our design, the IA went through two major changes. Ultimately, we decided to surface all of the content instead of nesting it within other pages. Having this IA to reference made it easier for our team to design and iterate on our prototypes in the following steps.
Final iteration of the IA
Paper Prototyping
Fourth, I created a paper prototype for the process of creating a study group. We would later use it in our usability testing. My teammates also made paper prototypes of two other processes – adding goals to a student's timeline in our timeline feature and live-chatting with an advisor. From our usability testing of these three processes, we learned that our users want personalized recommendations, clearer labels and navigation, and new features that add value to existing resources such as UW's MyPlan or DARS (degree auditing resource).
step 1
step 2
step 3
step 4
step 5
step 6
step 7
step 8
step 9
step 10
step 11
Wireframing
Fifth, I turned my paper prototype into a wireframe of each screen using BaIsamiq. In the same fashion, my teammates also turned their paper prototypes into wireframes. When combined, our wireframes allowed us to see the visual organization of our design. This made it possible for our team to ensure that our website was intuitive and flowed well.
Wireframed process of creating a study group
High-Fidelity Prototyping
Sixth, I created a high-fidelity version of my wireframe using Figma. Along with increasing the fidelity of the visual design, there were also some changes that we made to our overall design as a team. One of the biggest changes was our change to the home-page where we moved from a "bubble" layout to a more simplified list, along with changing the names of some of the sections which increased the intuitiveness of the website. Another change was to the study groups page where we added the ability to sort groups by any category (capacity, course, location, or name) and changed some of the language, which made it easier for the user to find what they are looking for.
Home page
Study Groups page
Create a Study Group page
If We Had More Time...
...we would do three main things differently. First, we would want to conduct more research with a broad range of users to ensure that we are designing inclusively for all pre-engineering students. Second, we would slightly modify our high-fidelity prototype to ensure that the background images don't distract from the content. Third, we would like to make our website more focused toward a specific user by including more personalized technical and design features in the hope of making the user feel like the website is designed specifically for them.
If you would like to see the team's entire design process, you can find it at uxcel.weebly.com
