MHCID Capstone projecT

╲╱

Designing the ZOTT Parent experience

The MHCID Capstone was a 6 month project led by a team of 6 MHCID students collaborating with an industry sponsor. Together with ZOTT we designed a new parent experience within their children's streaming content platform.

Project Overview

The MHCID Capstone project was a 6-month team project required for the Master’s degree qualification. Our team of MHCID students collaborated with the charity GameChangers to create a brand-new parent-centered experience in ZOTT. GameChangers a charity that works with hospitals and children with life-threatening diseases. ZOTT is their existing hospital streaming content platform which is currently in pilot in a handful of hospitals and is designed to be used exclusively by hospitalized children. I was a member of a 6-person distributed design team that worked with VP of Product at ZOTT to achieve project goals.

I conducted interviews with hospital staff to evaluate existing product usage & challenges. Deployed questionnaires to parents to understand their habits, concerns & priorities surrounding technology and their children. Analyzed published research surrounding recommendations for screen-time & children. Synthesized observations and research data in order to design a new parent dashboard within ZOTT. Co-created a high-fidelity interactive prototype. Executed a remote usability study using UserTesting.com. Delivered periodic presentations and reports to stakeholders at GameChangers.

1. Problem

The ZOTT streaming content platform was already in pilot in only a handful of hospitals and our client realized there were multiple areas that could be improved. These included 1) the backend CMS, 2) parental controls, and 3) the event management system. ZOTT was open to our team choosing which problem to solve or discovering a new one to tackle. The backend CMS was designed to be used by hospital staff but it was not being used. Parental controls and accounts did not exist and parents used an 'over the shoulder' monitoring style when using it with their children. Lastly creating hospital children's events was difficult because of the communication challenges with a large and shifting staff.

2. Steps

The team divided our project time into major 2 phases: Research and Design.

During Research I led a Competitive Analysis where we looked at products with similar features. We compared the strengths and weaknesses of their parental controls and content management features. I also collaborated with 2 other members of the team to interview hospital workers where ZOTT was already in pilot. The goal of these interviews was to understand how the product was being used and what challenges the staff encountered. I led a literature review to understand the best practices surrounding children's screentime. Finally I led a parent survey and an analysis of their responses in order to understand what parental control features were most important to them. These research methods led us to insights that would be used to inform the design phase of our project, but more importantly they led us to the problem that we wanted to solve: creating a parent on-boarding experience in ZOTT along with parental controls.

During Design the team ran a design jam where each member, using the knowledge gathered from research, sketched out their interpretation of the parent experience. The lead designer used the best ideas from the sketches to create high fidelity screens of the parent experience prototype. I collaborated with her by taking the screens and made a clickable, interactive prototype then shared it on Sketch cloud. Finally I created and led remote a user testing study to evaluate the prototype against our target user - parents. I analyzed the test responses and presented the results to our stakeholder.

3. Result

The initial interviews with hospital staff revealed that there were some usability issues in the CMS, and that the product was not being used as much as ZOTT hoped. This was because the staff was too busy to use the CMS and they didn't have time to introduce ZOTT to each parent. But the biggest insight these interviews revealed was that when parents were involved with their children in using ZOTT, it was used more. We used this insight to guide the rest of the project and focus on the parent experience.

The prototype we created addressed 2 critical areas: a new parent onboarding experience and parental controls. The onboarding process was targeted to parents to helped them quickly understand the features and benefits of ZOTT. The parental controls were designed not only to block and monitor content, but brought the parent's attention to new interests the child may have acquired while using ZOTT.

The usability test revealed that parents were most concerned about hidden costs in ZOTT. This was due to the fact that ZOTT is a hospital only product and prices are not transparent in this context. ZOTT is in fact a free product. Test participants encountered few usability issues and gave our prototype experience a SUS (Software Usability Scale) score in the 90th percentile which means there were very few usability issues.

" Fantastic work, that was great information.Thank you everyone. You found really interesting insights that I hadn’t considered, particularly around needing to identify that the product is free. Honestly, it wouldn’t have even occurred to me. Mostly we just interact with the staff, so it just wouldn’t have come up. I’m wondering how much it would’ve taken me out in the wild, so I appreciate you bringing it up and the way you presented it. I can see you put a lot of thought not only in the design, but also on how you present it to parents and the privacy concerns. Great work, thank you everyone." - VP of Product @ ZOTT

Competitive analysis

My Role
Methods

Lead Researcher
Lead Author

Heuristic Evaluation
Competitor Testing
Data Analysis

Purpose

To better understand how ZOTT can differentiate itself from it's competitors

Highlights

Competitors deliver insights automatically to parents about their child's activities on the platform. Through periodic report and customizable data dashboards parents quickly learn how the child is using a platform. Competitors also allow flexible controls to administer parental controls, which include going 'over the shoulder' on the child's device, or through a remote method on the parent's dedicated device.

Highlights - Competitive Analysis Report

User interview insights

My Role
Methods

Co Researcher
Co Author

Qualitative Content Analysis
Identity Model
Theme generation
Remote Interviews

Purpose

To understand how ZOTT's backend CMS is used on a day to day basis by hospital care staff. Also to gauge the level of interest of parents in having a greater presence on the platform.

Highlights

We learned that hospital care staff struggled to find time to adequately introduce the platform to parents due to the demands of their job. When children use the platform without the support of their parents involvement their interest in ZOTT was mixed. But parent who understood the value of ZOTT acted as advocates for the platform and made it a point to use it with their children.

Highlights - User Interview Insights Report & Data

PARent EXPERIENCE prototype

My Role

Co Creator
Added Interactivity

Methods & Tools

Brainstorming
Sketching
Rapid Paper Prototyping

Sketch

Purpose

To make our design ideas quickly tangible and validate the concept, without developing a fully functioning product. The prototype is a tool that will be used to solicit feedback from real users in order to iteratively improve the design.

Highlights

We needed to nail down the introduction that ZOTT makes to parents when first signing up. Being in a hospital with a child, parents may be short on time and attention. Signing up for an entertainment platform is not a high priority. The on-boarding process needed to quickly and clearly explain the benefits to them and their children. Our research showed that if parents were not on involved with ZOTT, then their children wouldn't be either. The team members involved in the brainstorming sessions converged on similar ways to have ZOTT introduce itself. This gave us confidence that we were on the right track.

Highlights - Paper Prototype
Highlights - Interactive Prototype (white labeled as NOXX)

usability study

My Role

Lead Test Implementor
Lead Author

Methods

Unmoderated Remote Testing
Think out loud Protocol
Qualitative Data Analysis
Software Usability Scale (SUS) Survey

Purpose

To validate the concepts presented in the high fidelity Parent Experience Prototype with real users. The study was designed to evaluate 3 areas in the prototype: The parent on-boarding process, parent analytics dashboard and ability to flag content. Based on the insights produced from the study, we put forth short and long term recommendations to ZOTT stakeholders that could be used to guide the actual implementation of parental features.

Highlights

Participants reported few usability issues, and shared mostly positive feedback about the navigation and ease of use of the prototype. A SUS survey was given at the end of each session as a way to quantitatively measure overall system usability with an industry recognized metric. The average SUS score was 94 , above 80 is considered good. Some concerns did arise surrounding the cost of the product and the level of privacy enforced in the platform. User comments revealed that these concerns were partially due to the nature of the product being used in a hospital and that it is meant to be used by children.

Highlights - Test Plan and Session
Highlights - Usability Report

Interfaith Center Field Research & Concierge app

╲╱╱╲

Designing for a public space through observation and inquiry

I visited The Fish Interfaith Center at Chapman University as a participant observer in order to understand the work and everyday activities that occur there. By participating in religious services, observation, and conducting interviews, I laid the research foundation to be able to design the 'Concierge App' concept.

Project Overview

This was a 2 part research & design project in the MHCID program that took place over two quarters.

Part 1 involved selecting a public site, within my assigned category - 'Place of Worship'. I selected The Fish Interfaith Center at Chapman University in Orange CA as the focus of my project. Over the course of 9 visits, I conducted observations sessions and interviews with leadership,  administrative staff, and students. I also attended various religious services. The goal of this research was to be able to understand an environment, organization, and the needs of its users from multiple perspectives. Most importantly it was preparation for Part 2 - designing for a specific context.

In Part 2 we were tasked with responding to the data by proposing a concept and designing a prototype that fills a need at the site. I proposed the Fish Interfaith Center Concierge App concept: a walk-up-and-use Ipad station located in the vestibule of the building that caters to new visitors. It informs guests about events happening at the moment and upcoming, helps connect the visitor with different groups in the center, and allows the guest to page one of the on-duty docents to meet them. The prototype also has a special feature that helps visitors identify spaces where they can be alone to detox from the demands of the busy campus. I developed the concept from an initial pitch, to wireframes, and to the final high fidelity interactive prototype. Each phase was supported by peer review to ensure clarity and quality of the final design.

Contextual Inquiry Diagrams

My Role
Methods

Sole Creator with peer review/critique

Contextual Inquiry
Ethnographic Observation and Participation
Interviews
Qualitative Data Analysis & Interpretation

Purpose

Contextual Inquiry diagrams are used to transform data into insight. They are tools used to inform the design of products that fit into the structure of work and life for people and organizations. I created 3 types of diagrams after completing 5 interviews with staff and students, and 4 observational visits.
1. Cultural Model - reveals influences on people and groups.
2. Workflow Model - demonstrates the processes, roles and responsibilities that keeps the Interfaith center running.
3. Physical Model - shows the layout of the space and the footsteps of work activity.

Highlights

Conversations with staff and students revealed that the Fish Interfaith Center is a source of pride for them and also a showcase for Chapman University. Meticulous processes are in place to make sure the center is well maintained, and that the student docents are knowledgeable in its history, art, and artifacts. This care is demonstrated in the level of detail, effort and practice student docents put into learning how to give tours of the center. But this care is not always matched with the level of interest expressed by outside students. The interfaith center, of course, has a core and loyal audience, but some expressed they would like to see the center utilized more by outsiders. Conversations with students revealed that the center is sometimes a place they come not to congregate with others but to be alone. When the gathering spaces of the center are not in use it's perfectly acceptable for students to come sit and spend time. This insight inspired one of the core features of the Concierge App concept.

WIREFRAMES

My Role

Sole Creator with peer review/critique

Methods & Tools

Ideation
Wireframing

Sketch
Illustrator
InDesign

Purpose

Wireframes are tools used early in the design process to describe the general flow and layout of visual elements. It describes menus, pages, buttons, functions, and their relationships through annotations and call outs. Placeholder text and images are commonly used.

Highlights

At this stage of design, the main pages were identified, but peer critique helped me to identify many areas that could be improved. Legibility was very important for a system where people are supposed to walk up and use it, text needed to be enlarged, copy reduced, and alignment of elements needed to be improved. The number of taps to move between pages needed to be reduced to one since people would be spending little time at the station. Also the ability to page a docent was an important and global function which needed to be displayed more prominently.

COncierge App Prototype

My Role

Sole Creator with peer review/critique

Methods & Tools

High Fidelity Prototyping
Interaction Design

Sketch

Purpose

To demonstrate a cohesive and tangible user experience of the proposed Concierge App concept. A showcase of my ability with prototyping software, visual design and information architecture.

Highlights

The global banner was updated to include the docent paging function so that the user could request a docent from any page. The homepage took some design cues from dashboard design. In dashboards the most important information placed in the middle and at the top left. Correspondingly the most important function I wanted to promote in the app, the participate page, was to help new visitors to participate in events happening in the moment. The second highest priority, the Relax page, is to help those who want to enjoy a quiet space alone.

Highlights - Concierge App Wireframes

Video walkthrough

OC Libraries website UX Evaluation

╲╱╱╲

Looking at usability through multiple research methods

As some of the first institutions to embrace the internet, libraries have both struggled and excelled at making it easy for people to tap into vast amount of information. By examining a single library website through 4 different research methods I was able to produce different insights that could be used to improve the library's usability and services.

Project Overview

I selected the Orange County Libraries website as my target client for the 'User Experience Evaluation' course in the MHCID program. I chose this client because as regular patron of the library, I believe the website's design and UX had not kept up with modern standards and user expectations. Throughout the course I examined the website usability and competitiveness through 4 different research methods.

1. Heuristic Evaluation - A team based approach where expert reviewers examine a website against usability best practices. Nielsen's 10 Heuristics for User Interface Design were used as the review criteria.

2. Cognitive Walkthrough - A tasks analysis method where an expert reviewer evaluates whether the sequence of steps in a task matches with the way people cognitively processes them.

3. Competitive Analysis - A method that looks at the usability of competitors and draws insights that can be applied to the target product.

4. Usability Testing - An empirical method that puts the target product in front of real users and asks them to perform tasks designed to measure usability.

I presented the results for each in a style that could influence decision makers. By assessing usability through established methods, we can deliver insights and recommendations that are based on evidence, instead of opinions and personal preference.

Heuristic Evaluation

My Role
Methods

Partnered with 2 usability professionals to perform the evaluation. I judged the findings, formulated recommendations, and authored the final report.

Expert Review
User Interface inspection

Purpose

To detect usability problems in a user interface with respect to best practices. Jakob Nielsen's 10 Heuristics for User Interface Design were chosen as the review criteria.

Highlights

The most common problems found in the OC libraries website were related to visibility of system status, & minimalism. These violations reflect a website that has not adapted to modern standards where users expect clear interactions and confirmation of their actions.

Highlights - Heuristic Evaluation

COmpetitive evaluation

My Role

Sole Author

Methods & Tools

Competitor Testing
Data Analysis

Purpose

To compare the usability and features of similar libraries.

Highlights

The OC public libraries can learn from the ways other libraries connect useful resources to their patrons. For example a pattern seen in other libraries is how they have sections on the home page that call out to specific groups of people, for example job-seekers, Veterans, new Americans, school teachers. Each of these sections contains information pertinent to that group.

Highlights - Competitive Evaluation

Usability testing presentation

My Role

Designed and executed a large scale usability test

Methods & Tools

Unmoderated Remote Usability Testing
Qualitative & Quantitative data analysis

Purpose

A usability test puts the target system in front of real users and gathers empirical evidence about what parts of the user interface could be improved. In order to evaluate the OC Public Libraries website, I executed two types of tests

1) A Quantitative test with 77 people using an automated testing platform where I measured time on task and task success.

2) A Qualitative test with 3 users where I observed on-screen actions and behaviors as the participants spoke aloud.

Highlights

The home page has 2 navigation bars: a horizontal one at the top, and a vertical one along the left margin. Surprisingly, with it's big & bold buttons, the left vertical bar was a blind spot for some users. Participants had difficulty finding critical pages that were located here.

Participants were consistently overwhelmed by the library's events calendar system. The website is the hub for managing events across the 33 library branches. As a result of the scale of events, the calendar UI was difficult for users to find events of a particular type or at a specific branch.

URBAN FIELd RESEARCH & INTERVENTION

╲╱╱╲

exploring Downtown Santa ana reveals Opportunities for Design

Human-Computer Interaction has applications beyond the screens in our pockets and on our desktops. The computer is still a tangible thing, but increasingly it is becoming invisible, or embedded in an environment. As part of the Design and Prototyping course in the MHCID program, I visited the Downtown area of Santa Ana, CA to map out observations. The culmination of this exercise was a response in the form of the 'Memory Board' concept, a site-specific memory repository designed to preserve cultural and environmental memory.

Project Overview

As part of the MHCID program course 'Design & Prototyping', I selected Downtown Santa Ana as the focus for a multi-phase project that demonstrated research and design skills.

During Research I explored a half a square mile area of the city by foot. I created maps that noted patterns, phenomenon, and human behaviors. From that data, I developed a Persona of an individual that could be living in that space, 'Gloria - The longtime resident of Santa Ana'. The Persona was not delivered in the traditional persona format but instead expressed as a story-driven paper prototype pop-up book.

The culmination of the project was a Design Intervention, a proposal that improves the target space - Downtown Santa Ana. At the same time, it was a response to specific observations I collected. I proposed the 'Memory Board' concept, a site-specific memory repository designed to preserve the character of a place over long periods of time.

Persona Paper prototyping

My Role

Sole Creator

Methods & Tools

Map Making
Storytelling
‍Paper Prototyping

Purpose

The Persona pop-up book paper prototype served a two goals:

1) It was a response to the observational data I collected from exploring downtown Santa Ana by foot. I generalized the observations to imagine a human profile of someone who could live in that space.

2) The pop-up book was a demonstration paper prototyping techniques. Paper prototyping is traditionally used to demonstrate user interface interactions without spending a lot of time or money.

Highlights

My persona pop-up book demonstrated important qualities of the Downtown Santa Ana community that influence how people live and move within the space. The Downtown is situated in a historic and walkable community that allows for frequent social interaction. Small niche shops catering to different groups show how the population is bi-cultural, bi-lingual, and multi-generational.

Highlights - Persona Pop-up Book

Design Intervention - Memory Boards

My Role

Sole creator

Methods & Tools

Map Making
Visual Storytelling

Purpose

To design a compelling, in-person experience that responds to specific observations I collected through exploration. Propose a way that improves the target space. To define an experience in a structured way - through the 3 phases of Attraction, Engagement, and Extension.

Highlights

The Memory Board is a large scale interactive touch screen. It attracts visitors by acting like a mirror that reflects the environment. Visitors who engage with the Memory Board are given the chance to create personal profiles that document memories of their time in the space through pictures & video. Memories are tied to the site and not externally accessible. This was a design choice to encourage appreciation and physical presence inside a space.

Highlights - Design Intervention, Memory Boards
Highlights - Design Intervention, Memory Boards

Game Interaction Design

╲╱╱╲

Creating an Interactive Experience By enhancing a classic Game

I used my web development and visual design skills to create a fully functional Reversi game experience. Using Javascript, Bootstrap, Node.js and jQuery I programmed a backend server  and front end client that worked together to manage game logic, network connections and chat messaging functionality. I intentionally applied visual design elements in typography, color, and animation to create a high energy experience.

Project Overview

My final project for the Interactive Technology Studio course in the MHCID program was a web-based implementation of the game Reversi. Not only was it a demonstration of technical skills but the project was also an interpretation of the game that tries to speed up the gameplay through visual enhancements.

This implementation of Reversi has chat functionality that lets players talk to each other before and during a match. During a player's turn, the game logic ensures plays can only make legal moves. Changes to the board are dynamically reflected on each of the player's boards. Also, the score of each player is updated after each move.

Reversi is a tactical board game that emphasizes thinking ahead to capture the most pieces of your opponent's color. As a result, the pace of the game is slow, especially for new players. My version of Reversi keeps the rules of the game intact but enhances the experience by giving the player extra information during their turn that could be used to gain more points. This extra information does not reveal the move that guarantees the most points but instead is designed to speed up the decision-making process for experienced players and help new players quickly learn the game.

Video PITCH - Hi Energy Reversi

My Role

Sole Creator

Methods & Tools

Bootstrap
Node.js
jQuery
HTML / CSS / Javascript

Purpose

To demonstrate the technical ability to create a real-time, interactive, multi-user web application.

Highlights

I wanted to change the nature of Reversi from a slow, tactical game to a fast paced, intense playing style while keeping the gameplay rules intact. I did this by

1) Animating the scores with color and size changes to emphasize when the player is in the lead, increases or decreases score.

2) Briefly highlighting potential legal moves at the start of a turn

3) Briefly displaying the number of line directions that a potential move will flip.

Highlights - Hi Energy Reversi
Playable Demo
(Please open link in 2 browsers to play)

Designing for machine learning

╱╲

Incorporating machine learning ideas into an existing app

Project Overview

The industry is still learning how to best incorporate machine learning features into customer-facing systems. The ways different stakeholders, including Product Managers, Developers, Designers, and Data Scientists, communicate about this technology is in its infancy. I think it's important to think about the impact of machine learning on the user experience early on and vice-versa. This prototype will demonstrate how principles of human-computer interaction can help ensure user buy-in into the underlying machine learning technology.

This interactive prototype incorporates machine learning concepts into an existing app. Taking the Wells Fargo Mobile App experience, I designed a feature that automatically delivers balance notifications to the user at strategic times. By analyzing a user's app usage behavior and mobile sensor data, a machine learning model could predict the moment before a user opens the app to check their balances. By delivering specific balance information via mobile notifications, the user saves the time of opening the app and signing in.

This prototype demonstrates the importance of paying attention to the human principles of consent, transparency, trust and user agency in this type of experience. Machine learning models require users to give up information in return for their benefits. By prioritizing these human principles needs we can ensure a machine learning model performs at it's best.

Predictive balance notifications - Prototype

My Role

Sole Creator

Methods & Tools

Sketch

Purpose

To demonstrate an understanding of how underlying machine learning models impact the user experience. To demonstrate how prioritizing user agency, trust, and transparency in a machine learning based user experience could help the underlying technology improve prediction accuracy.

Highlights

The prototype guides the user through a tutorial that gives them insight into how the predictive balance feature works. It informs them that the feature is driven by their data and behavior. It builds trust between the technology and the user by displaying the information being collected for the data model and also gives the user control over how that data is used - including ceasing collection.

Machine learning predictions can be inaccurate. The feature gives the user insight into how predictions were reached. Additionally, the user is given some agency to rate the accuracy of these predictions. By having the user participate in the machine learning tuning process, better predictions can be made in the future.

Overview - Predictive Notifications