ewrapper project
ROLE: UX Designer; UX Researcher; Co-Creator
OVERVIEW
Problem statement: Leveraging built-in mobile functionalities and capabilities, mobile health (mHealth) apps can enable passive data collection, deliver timely and personalized interventions, and provide anytime/anywhere accessibility to self-monitoring and self-management tools. Despite these promising developments, the vast majority of users abandon mHealth apps quickly and after minimal use.
Engagement strategies can be effective in increasing and sustaining app use and behavior change; however, little is known about which engagement strategies work for whom, when, and under what conditions.
Goal: Design an adaptive system that “wraps” around existing/future mobile apps and operationalizes a collection of transdisciplinary engagement strategies.
TOOLS: Sketch; Illustrator; Invision; Final Cut Pro X
METHODS: Sketching; Personas; Storyboard; Wireframes; Rapid Prototyping; Interaction Design; User Interface Design; Usability Testing; Interviews; Qualitative Data Analysis
TEAM
Inbal Nahum-Shani (University of Michigan); Gregory Abowd (Georgia Institute of Technology); Elaine Liu (Georgia Institute of Technology); Susan Murphy (Harvard University); Sun Young Park (University of Michigan)
COLLABORATORS
Santosh Kumar (University of Memphis); Carolyn Yoon (University of Michigan); Steven Shaw (University of Michigan); Sylvie Naar (Florida State University); Bonnie Spring (Northwestern University)
DELIVERABLES
Self:
Literature review and write-up on engagement science and strategies to increase engagement
Competitive analysis
Persona development and write-up
Full interactive ewrapper story: integrating 13 engagement strategies (from 7 disciplines) into a working system of components which can be evaluated for the effectiveness of individual strategies and sequencing of strategies, all while maintaining a seamless and coherent narrative
Wireframes
Paper prototype
Full UX/UI design, artwork, and animation
High-fidelity prototype
Iterative rounds of usability testing and interviews: analyses and write-up
Master’s thesis manuscript
with Team:
Conceptual framework to help inform optimization of use of engagement strategies
Decision points + probabilities for the use/delivery of individual engagement strategies
Implementation of iterative feedback on design elements and how to effectively integrate ewrapper with weight loss mobile app
Publications in top HCI academic journals (see Publications section)
DESIGN PROCESS
Phase I. Literature Review & Conceptual Framework
I conducted an extensive literature review — across various disciplines (psych, HCI, marketing, etc.) — to identify engagement strategies that could be effectively employed in a mobile setting. Next, our research team organized the engagement strategies into a 2x2 conceptual framework (types of motivation vs. cognitive-affective processes; see Figure 1) to help inform optimal timepoints and conditions to operationalize the strategies.
Figure 1. Conceptual framework (Click image to enlarge)
Figure 2. Persona examples
Phase II. Persona Development
I developed a diverse set of personas- each with a unique outlook on life and equipped with distinctive self and interpersonal qualities. For example, Pokey Peggy would not bat an eye at the labor of counting calories, if it were as simple and fun as crushing candy in her mobile game. Each persona had varying levels of: 1) motivation to change a particular health behavior and motivation to use an application to change behavior; as well as, 2) experience with technology. Imagining a wide and diverse range of use cases helps foster empathy and forces the designer to step out of their mind (mental model) and experience their design decisions from unique vantage points.
Phase III. Ideation + Story Development
After identifying over a dozen engagement strategies that could be conducive to a mobile setting, I was tasked with the challenge of integrating the strategies into a coherent and cohesive narrative — a working system of measurable components that could be seamlessly stitched together with decision points within existing/future mobile app contexts. What resulted was an ambient display of a scantily clad ostrich that reinforces engagement by maturing, growing feathers, awarding coins, and laying mystery eggs containing various types of engaging (viral) content (memes, mini games, life hacks, etc.) (see Figure 3 & Figure 6)
Figure 3. ewrapper narrative in a nutshell
Figure 4. Decision points timeline (Click on image to enlarge)
Phase IV. “Wrapping” a Diet-tracking Mobile App
To test ewrapper, we “wrapped” it around a diet-tracking mobile app. Maintaining adherence to diet-tracking apps is a well-documented problem, largely due to the high effort costs associated with searching for and reporting portion sizes of consumed items. Furthermore, engagement can be easily evaluated in this context - did the user log their meal, yes or no? Our team identified decision points centered on daily mealtime windows for which the engagement strategies could be effectively integrated (see Figure 4). We came up with probabilities for the operationalization of each of the strategies to increase our assessment of the true effectiveness of the individual strategies.
Phase V. Paper Prototype + User Testing (Round 1)
I created a paper prototype of the core functionality and design components of ewrapper (see Figure 5 for example screens), which was integrated with a diet-tracking mobile app. The primary goal of Round 1 of user testing was to assess intuitiveness of interaction flow, proof of concept, and general receptivity of the integration of engagement strategies employed via ewrapper.
Figure 5. Paper prototype examples of ewrapper
Figure 6. High-fidelity prototype example screens of ewrapper (Click on image to enlarge)
Phase VI. High-Fidelity Prototype + User Testing (Round 2) & Interviews
I integrated feedback from Round 1 of user testing into the design of the high-fidelity prototype (see Figure 6 for example screens). Round 2 of user testing consisted of a “think-aloud” exercise, where users were given a task to complete and asked to verbalize their thoughts, decisions, impressions (likes/dislikes), uncertainties, etc., while completing the task. The user testing was followed by interviews to further assess perceived receptivity to individual engagement strategies. I then analyzed the qualitative data and incorporated the key feedback points into my final design.