HCDE Widget

WELCOME TO HCDE WIDGET

0.0 | OVERVIEW

HCDE undergraduates and prospective students are given a variety of resources to help with academics and connecting with the department. However, participation rates and department engagement fail to match the departmental resources provided.

HCDE Widget is designed for undergraduates and prospective students to utilize a one hub view of resources as well as personalize and highlight the resources most helpful and accessible.

DURATION: 11 Weeks

TEAM

Timothy Joo
Britnie Chin
Kara Cox
Catherine Zeng

TOOLS

Figma
Adobe Photoshop

1.0 | 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?

2.0 | RESEARCH

PHASE ONE: User Interviews

SUMMARY

Students felt a 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 a feeling un-belonging.
Students want faculty to be more involved in promoting activities in the classroom.

PHASE TWO: Competitive Analysis

SUMMARY

Other programs, such as the iSchool, provide information more clearly to students.
Current HCDE website has a lack of clarity in the information given.

2.1 | FULL INTERVIEWS

2.2 | FULL COMPETITIVE ANALYSIS

ANALYSIS 1

ANALYSIS 2

ANALYSIS 3

3.0 | USER PERSONAS

After research, we created two personas that best represented our user demographic. We were able to draw our information based on the information from our research.

3.1

User Persona #1

3.2

User Persona #2

4.0 | 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.

5.0 | STORYBOARDS

5.1

Storyboard #1

5.2

Storyboard #2

6.0 | PAPER PROTOTYPE

Task 1 Walkthrough: Open HCDE Plug-In

6.1

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

6.2

After clicking on the HCDE icon, the application will pop onto a side of the screen displaying a circular disk that shows the main resource icons used by the users.

Task 2 Walkthrough: Choose an Icon to Open and Close

6.3

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.

6.4

Once the users click on the resource icon, the resource will be either displayed in a web browser or activated on its own application.

6.5

The users can close the window of the web browser or the application to complete the second part of the task

6.5

After exiting the Gmail resource, the users can continue to access other resources in the HCDE application.

Task 3 Walkthrough: Add "Canvas" to the Plug in

6.7

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.

6.8

Once hitting the plus button, the users will enter the editing mode.

6.9

Once the users finish typing a URL in the pop-up window, they can click the “confirm” button to add the resource to the dash or the “cancel” button to close the window.

6.10

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

7.0 | ANNOTATED WIREFRAMES

After receiving feedback from the paper prototypes, we were able to create our full system of what our potential design.

7.1

7.2

7.3

7.4

7.5

7.6

8.0 | HI-FIDELITY MOCK UP

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.

8.1

8.2

8.3

LINK TO FULL PORTFOLIO

CLICK HERE !!