CONTEXT
HCDE undergraduates and prospective students are given a variety of resources to help with academics and connecting with and within the department. But the participation rates and department engagement fail to match the vast array of departmental resources provided. 
HCDE Widget was designed with undergraduates and prospective students in mind to create a one hub of resources to view and use. As well as personalize and highlight the resources most helpful and accessible.
This project was conducted as a part of an undergraduate course in the Human Centered Design & Engineering department during the Autumn of 2019.
PROBLEM STATEMENT
HCDE undergraduate and prospective student participation rates and department engagement fail to match the vast array of departmental resources provided. How might we provide more efficient access to departmental resources for HCDE undergraduate and prospective students?
RESEARCH FINDINGS
We each interviewed students in the Human Centered Design and Engineering program and got a range of first and second year students in the major. We conducted 9 semi-structured interviews and 1 contextual inquiry. Our questions focused on the engagement within and with the program as well as the resources they felt were helpful.
Some of our most insightful findings were:
        - Lack of motivation to stay connected with the department. 
        - Student’s felt bombarded with emails from the department. 
        - Information given didn’t feel personal which lead to not feeling belonged. 
        - Want staff and faculty to be more involved in promoting activities inside the classroom. 
Before each interview we made sure participants understood the intentions of this interview and that we were not connected with the department so they could answer truthfully. As well as reminded them they had the option to opt out of the interview or not answer the questions asked. This also helped us understand our own biases on this topic since we fall under the target users. We were able to validate that this was a problem facing the target users, not just us. 
USER PERSONAS
After research we were able to create two personas that best represented our user group to evoke empathy throughout our design process. We were able to draw information from our persona based on the information we got from user research to highlight the goals and pain points of our users.
USER JOURNEY MAP
To understand our user more we created a user journey map highlighting the users' week. We took information from our user research and personas to create a journey map that best represented a typical week that revealed pleasures and pain points. The journey map displayed the touch points, fluctuation of feelings, and actions that resulted from a busy week of an HCDE student. 
DESIGN REQUIREMENTS
From our research we were able to find 10 key design requirements. This step was important to understand and define before moving onto how the product looks, behaves, operates, and feels.
 1) Allow students to learn about HCDE extracurricular clubs for networking. 
 2) Allow students to easily access HCDE course descriptions online for future   planning. 
 3) Allow students to connect with HCDE faculty.
 4) Allow students to register for HCDE professional development events in   time.
 5) Encourage conversations between HCDE students.
 6) Allow students to be aware of and be updated about HCDE events.
 7) Collect and store HCDE-related information for students to glance through and look for.
 8) Minimize HCDE resources channels.
 9) Allow admin to quickly update information communicated to students 
10) Allow students to know who else is interested in specific HCDE events.
STORYBOARDS
PAPER PROTOTYPE
Task 1 Walkthrough: Open HCDE Plug-In
Goal: To check if the plug in is quick, simple, and easy to find.

1. The users will start on their desktop or a computer folder and click on the HCDE icon to open the application. 

2. After clicking on the HCDE icon, the application will pop onto a side of the screen displaying a circular disk which shows the main resource icons used by the users. The users can drag the main HCDE icon to different corners of the screen; they can also drag the border of the circular dash to enlarge or reduce its size. There are five default resource icons displayed on the circular dash; the users can further edit and rearrange what to be displayed. 

Task 2 Walkthrough: Choose an Icon to Open and Close
Goal: To fully understand and improve the process of using the widget

1. The users could choose the Gmail resource from the circular dash by clicking on it. A red dot will show at the top right of the resource icon, if there is an update of information from that resource.

2. Once the users click on the resource icon, the resource will be either displayed in a web browser or activated on its own application. In either case, only HCDE-related information will be shown as the default on the screen. For example, after choosing the Gmail resource, the inbox of Gmail will be pre-filtered for the users, showing only emails with the keyword “HCDE.

3. The users can close the window of the web browser or the application to complete the second part of Task 2. 

4. After exiting the Gmail resource, the users can continue to access other resources in the HCDE application. They can hide the HCDE icon from the screen by clicking the “minimize” CTA located on the top right of the icon itself; they can also deactivate the HCDE application by clicking the “close” CTA next to the “minimize” option.

Task 3 Walkthrough: Add "Canvas" to the Plug in
Goal: To understand and better develop the shortcut implementation process

1. To begin the process of adding an additional resource to the HCDE application, the users will have to click the plus button on the side of the circular dash. 

2. Once hitting the plus button, the users will enter the editing mode. A window will pop up below the button asking for a website url. At the same time, the circular dash will expand to a linear display, with all the resource icons jiggling on the spots. The five main resources will be highlighted with thicker borders. In this editing mode, users can add a resource by either 1) typing or pasting a website url if the resource is on a web page, or 2) dragging the application alias from the desktop or the direct location from a file folder if the resource is an application. 

3. Once the users finish typing a url in the pop-up window, they can click the “confirm” button to add the corresponding resource to the dash or the “cancel” button to close the pop-up window. If a new resource is added, it will be placed on the top of the five main icons. The users can reorder the resource icons from the dash by dragging them over each other; they can also delete a resource icon from the dash by dragging it out of the dash range. 

4. To confirm the changes and/or leave the editing mode, the users will have to click the check button besides the main HCDE icon. 

5. Now the users can see the new order of the main resources on the HCDE application. 

ANNOTATED WIREFRAMES
An annotated wireframe is a rough draft of what the designed system will look like. It is incredibly useful for developing an overall layout and functionality that the team is looking to create.
After receiving feedback from the paper prototypes, we were able to create our full system of what are design would look like. The main purpose is to see the functionality and general design.
HI-FIDELITY MOCK UP
Building a high fidelity mock-up is when the design team pivot the emphasis towards a complete visual and functional refinements of what the product will look like in real life. We use Figma to convert our wireframe into this final design representation. 
Taking our users’ visceral and behavioral goals into consideration, we created three mock-up screens to showcase our product, including the desktop view, the active view, and the edit view.
LINK TO FULL PORTFOLIO
CLICK HERE !!
Back to Top