DISCOVER THE LABYRINTH: ​UW HUSKY START
Design Specifications Edward Roberts, Megan Wilson, Conor Kelly, Shelley Xia
HCDE 518A: User Centered Design December 2016
2
Table of Contents
Design Problem
3
Design Question
3
Usability Research Findings
3
Design Decisions
4
Summary of Solution
5
Our Users
5
Audience for this Document
6
Interaction Flow
6
Success Metrics
7
Project Scope
7
UI Explanation
8
Annotated Screens
9
3
Design Problem New incoming students at the University of Washington must figure out the complex bureaucracy of the university when trying to complete the required paperwork in order to enroll and start their life at UW. Some of this paperwork includes financial aid, housing, registration, etc. Trying to figure out this bureaucratic paperwork causes students to miss important deadlines, causing them to be confused and frustrated. Students wish there was a clearer way to address all their required paperwork and understand which services will help them with their problems, but often feel helpless with the current university system.
Design Question How can we provide a clearer communication channel between new students and service departments at the University of Washington, so that students are able to get their needs met more clearly and efficiently?
Usability Research Findings The following are design recommendations based on usability testing with three participants. We had the participants complete the following tasks: logging in and checking their financial aid status, applying to housing on-campus and indicating they did so on the website, and making an appointment with a physical therapist. Design Recommendations: ●
Provide more clarity on what exactly needs to be done (next steps) after navigating away from the prototype or finishing a step in the process
●
Provide confirmation once completing a section (i.e. “Congratulations” after checking off an item on the list)
●
Allow a better way for participants to interact with the list - they should not be able to check off items on the list unless they complete them
●
Provide a simple onboarding tutorial to use the application
4
Design Decisions 1. Why this concept in particular? a. This concept was chosen in lieu of other concepts mainly because of how feasible it was - it could be easily prototyped and made for a wide audience. The concept was also desirable - it satisfied our primary and secondary personas’ needs by providing information quickly and in one place. Finally, it was also viable - the solution was relatively low cost compared to the other concepts on offer, which envisioned much more physical solutions. 2. Why mobile and desktop? a. We wanted to provide a mobile solution along with a desktop one so that people could check off tasks when they completed them. They could potentially complete a task while in the financial aid office, so we wanted to provide that option to the users. 3. Why those sections specifically? a. The sections outlined in the prototype were the ones that participants from the semi-structured interviews stated were departments they had interacted with during their time at the university. By providing information on how the participants would most likely interact with these departments, people could easily understand why they needed to do immediately. 4. Why interactive checklists? a. We wanted to provide feedback to the users, so interactive checklists are a way to clearly indicate that hey had completed a task in the interface. 5. Why link to university pages? a. We did not want to repeat information already available on different university websites, so we decided to just link to the already existing webpages. Some of the linked webpages have additional functionality that we did not want to duplicate either.
5
Summary of Solution Husky Start is a responsive website which works on both mobile and desktop devices and enables users to access most of the necessary documents and information they need to start as a new student at the University of Washington, access outside resources about required documents, and keep track of the status of required documents all in one place. The design in this report is targeting the interactive checklist feature of this app. This application enables users to keep track of and check-off sections related to student enrollment, such as checking off the requirements for financial aid.
Our Users Our primary users are new incoming students who are confused with the current university onboarding system and wish to have an easy way to discover the various services to learn more about what the services/departments can offer. Our secondary users are the administrators of the service departments who will use the application to better understand what students need and contribute to the website content to improve communication.
6
Audience for this Document iPhone, Android, and Web developers for the University of Washington
Interaction Flow This interaction/user flow demonstrates how a user would enter and navigate through our design solution. An ideal task flow for users would be like the following: 1) Login with their UW credentials 2) Identify which service they would like to know more about 3) Learn what steps they need to take for each service 4) Check off steps as they complete them 5) Review their progress
7
Success Metrics Quantitative ●
Usage of application by number of sessions
●
Time spent on application
●
Increase in number of users
●
Usage of checklists
Qualitative ●
Application is talked about positively by users
●
Interviews with users
Project Scope In Scope The scope of this project was to design the Husky Start application and the process by which a user could keep track of the services they need to enroll at The University of Washington. There are other student services anticipated for this app, but we have focused on designing the most important services for a new incoming student at The University of Washington. For the Husky Start Application, we have constrained the design to include: ●
UW Login (authenticated login from university)
●
Home Page, where users will land to discover available services to review
●
Category Pages, which features interactive checklists for each service department/area
●
Checklists, which are linked to the appropriate resources and are able to be checked off by the user when completed
Out of Scope The following are not in the scope of the project, due to time and technical constraints: ●
In our website, the system would also include administrators of departments and services, who will create and revise content for the students, which is not mentioned in this design specification. In the future, we will build a system and interface specifically for these administrators, as they are important secondary users
8
â—?
A communication system between administrators and students (i.e., chat or email system) is out of scope for this project
â—?
Having the website reviewed by content strategists and also available in other languages for students who do not speak/read English as their native language
UI Explanation We were inspired to build a cleaner interface by our personal experiences with the overly cluttered interfaces that the University of Washington typically builds. We wanted everyone who used the interface to understand immediately what information they needed to interact with. Using a clean visual style with plentiful white space, we create an inviting experience. As for technical aspects, we used a combination of HTML, CSS, and JavaScript to build the prototype. We hosted the website on Github and Herokuapp to make it publicly available so other people could interact with the prototype. For more details on how the user would interact with the prototype, refer to the interaction flow and annotated visuals.
9
Annotated Screens 1.0 Home Page (Desktop)
Annotation
Description
1a
Logo - links to home page
1b
Welcome Title
1c
Display Username
1d
Sign Out - user will sign out
1e
Navigation Bar - includes the logo and username / sign out option
1f
Hero - Includes title (1b) and description (1l); color / image background applicable
1g
Category Title - this will indicate what department is in that category
1h
Alignment - These sections will be horizontally aligned
1i
Incomplete task Unlit - Empty circle indicates progress left to be done
1j
Progress indication - A green fill will indicate that a user has completed a step(s)
1k
Category Tile - Clicking this will bring the user to the category page
1l
Description - Message to welcome user and explain what this website is about
10
2.0 Category Page (Desktop) - Housing
Note: These annotations apply specifically for the housing page, but can be applicable to the rest of the category pages, which share a very similar functionality.
Annotation
Description
2a
Title - Indicates the section that the user is currently in
2b
Section Description - Short description of the page
2c
Conditional Options - Gives users options for their status
2d
Selected Conditional Option - Button appears dark when selected
2e
Checklist - Details all the steps the student needs to or should take
2f
Link - Appears blue to indicate a link to external website
2g
Checkbox - Blank box to indicate that that the item can be checked off
11
3.0 Checklists (Desktop)
Annotation
Description
3a
Conditionals effect which lists appear
3b
Checked Item will appear green and be marked as “complete”; unchecking the item will revert to normal checklist items
3c
“Completed” Section contains checked items only
12
4.0 Category Page (Desktop) - Side Panel Section (Health Services)
Annotation
Description
4a
Panel Title - Indicates the category type
4b
Panel Section Title - Details the title of the entity to be contacted
4c
Panel Section Details - Lists the contact details
4d
Content Type Icon - Indicates the contact method
4e
Vertical Rule - Separates the checklist from panel section
13
5.0 Category Page (Mobile)
Annotation
Description
5a
Centered Logo at 425 pixel width breakpoint
5b
Horizontal Rule appears on mobile, vertical rule hides
5c
Sign Out moves to the footer