Challenge:

Design a mobile app that tests the effectiveness of character growth interventions on teens
–but keep it fun enough so that they will want to use it.

The first challenge in this project was to make use of the rich body of positive psychology research evidence suggesting the value of certain actions and practices for emotional health. But often those interventions, while well researched and peer-reviewed, aren’t presented in ways that make them easy to use for the young people who most need them.

A deeper challenge that quickly emerged after engaging the research is that the process of building patience, self-control etc. require the spending of self-regulatory capacity —something we all have a finite amount of in a given day. The research suggests that you can grow your capacity for self-regulation but, just like building muscle, the only way to do so it through exercising it.

Given that the exercise of self-control is an inherently high friction experience, how might we design experiences that mitigate that friction and encourage users to keep coming back?

My Role(s)

I served as:

• user researcher

• lead designer of UX and UI

• product owner & project manager

I also contributed to branding and identity in designing both the logo and the app name to ensure easy search-ability on both web and app stores.

PROCESS

Literature Review + User Surveys

While reading through a literature review prepared by my collaborators, Dr. Sarah Schnitker and Dr. Benjamin Houltberg, I prepared a simple survey to be sent out to students in schools who had expressed interest in participating in the research study.  While immersing myself in the positive psychology research literature, looking for aspects of interventions we could translate into games, I wanted to start filling in some demographic data on our high school teen users.

Some kinds of interventions were already on the minds of our researchers so we went ahead and added them with a 1-5 scale from least to most interested to see if any experiences would show up as intriguing.

App Research

One of the critical pieces of data from the user survey was the list of apps they were already using on a daily basis.  We wanted the interface to immediately feel familiar and intuitive.  By starting with clear examples of apps they already live in, we avoided any unnecessary novelty that might impede easy use.

We borrowed the simple, bottom nav from Instagram and the bright, playful colors of Snapchat along with its whole-screen swiping gesture as a secondary navigation.

One aspect we did not borrow was the deliberate use of social reward to create addictive patterns in our users.

By now it has been widely reported that a small group of behavioral scientists at Stanford have had an outsized influence on the development of some of the most used most addictive apps.  By applying insights from neureo and social science they have mapped a kind of set of “best practices” for creating addictive experiences.  We resolved early not to follow these dark patterns in our design.  We were aiming to create experiences that were intrinsically valuable and rewarding without using manipulation to do it.

User Interviews

Armed with this preliminary work we had some clarifying ideas of which games and interactions we thought were promising.  We took that list and started visiting schools.  The research team had already cultivated positive relationships with some teachers at a variety of local public and private high schools so we started visiting technology classes and lunch hours –really anytime the teachers could invite kids to their class and give me the floor.

I began by asking them to open their phones and go the settings screens that showed what version of iOS or Android they were running.  I then walked around snapping photos to share with our developer.  Next, I described the app’s goals generally and started asking for a show of hands on which features seemed interesting.  As people responded I began to engage them one on one to talk more about why that feature or game sounded interesting.

The Importance of Language

One feature I was particularly interested in was one that came from the scrolling card view. I imagined a stack of conflict resolution strategies that any of these kids could pull out and use to help figure out better ways of resolving persistent conflicts.

“How many of you get into conflicts regularly?  Show of hands.”

*crickets*

“No one?  No one has conflict with their parents?  Teachers? Friends?

A few girls shyly put up their hands.

“I can’t believe this.  You guys must be some of the most peace-loving teenagers ever.”

“Do you mean, fights?” One young man asked.

“Yes fights.  How many of you get into fights?”

*smiles* *all hands go up*

“How many of you would be interested in an app that had a stack of cards, each with a new strategy to try to solve a conflict?”

The room erupted with interest and narratives about the persistent recurring conflicts they have with parents, teachers, friends and significant others, often stemming from misunderstanding.  This feature which had been an afterthought to the rest of the interventions was the aspect they were most interested in trying.

This is an excellent example of the power of user-interviews and the importance of paying attention to hints and clues in the responses of real people who are users or represent their interests.

Pencil and Paper

I like to begin the mock-up process with pencil and paper at 1:1 scale.  I prefer detailed and accurate text in mock-ups as the process of thinking through text and labels often reveals issues and problems in information architecture.

 Meet, Discuss, Approve

The pen and paper mock-ups allow the key stakeholders to have something visual and narrative to respond to.  It helps to build the mental model of the app in the minds of the team and surface assumptions *before* a pixel or line of code have been committed.  This level of detail is also what enabled my developer partner to begin laying the groundwork for the app.

High Fidelity Mock-Ups

I prefer the vector drawing tool, Sketch, for high fidelity mock-ups.  Once I had completed each screen and some keyframes for animations I could then share the sketch file with my developer sharing actual colors, typography, CSS and layouts down to the pixel.

Programming Begins

The pencil and paper mock ups enabled development to begin simultaneously to the high fidelity mock-ups.  We kept in regular contact as questions emerged and shared visuals back and forth which enabled me to confirm that the details and atmosphere of my design vision were coming through in the finished product.  Because of our use of a hybrid native and web architecture, I was able to load views of the app in the browser during development, long before we were able to compile the app into iOS or Android.

A Word on Naming

Up until this point we had used the working title “Thrive App.” But as we prepared to deploy to the app stores we needed a title with a cleaner search and some brand identity distinct from the organization overseeing its development.  Before presenting the question to our stakeholders I did some quick and dirty user research by listing our top five name choices in a direct message on instagram to a small group of teens in our target audience.

The response was near-unanimous: CharacterMe was their favorite.  It also happened to have the least overlap with any search on google search, iOS and Android app stores.

I’m a big believer in some research being better than none.  And the research you can execute in the time-frame you need to help validate a decision with the target audience is more valuable than a more rigorous or higher sample size that comes after you need it.  Jake Knapp in his book outlining Google Ventures’ user testing process agrees and underlines the diminishing returns on insights once you go beyond five user testers.

User Testing, Pilot Study

We knew that the iOS app store had a reputation for rejecting apps with little notice and feedback, we targeted the iOS app for deployment first.  To our great surprise our app was approved on the first attempt after one week.

Next we deployed to the Google Play store.  Once the two apps were available for download we went ahead with a pilot study with one school as a beta test to discover any remaining bugs and to work out the onboarding process.

Research Phase

Study Groups + User Interviews

Over the course of two years the research team conducted study groups at a wide variety of schools in southern California representing a mix of public, private and socio-economic status.  Each study consisted of two weeks of daily use prompted by the app.

After each study concluded I met with as many of the students in person, as a group, on-site at their schools to interview them about their experience.

In general, they found the app intuitive and helpful.  70% of students polled said they would continue using it after the study concluded and that they would recommend it to friends.  They listed the prompt to consider and record their emotional states and the conflict resolution strategies to be the most valuable activities in the app.  The timer based activities were among the least favored.

Future of the Project

Presentations & Publications

My collaborators, Drs. Sarah Schnitker and Benjamin Houltberg continue to analyze the data captured in the research phase.  We hope to publish the findings of the research study, as co-authors, later next year.

Further Development

Since beginning the project we have been invited by two separate funding bodies to write proposals for further development of CharacterMe for a public audience.  Since the future of the app is less about research and more about the technology development and design, I took the role of primary on one of the grant proposals, wrote the project plan, budget and full narrative of the proposal.

The Thrive Center is currently hearing proposals for funding partnerships.

This project at the intersection of social science research and building technology that aims to help us be more human is exactly where my professional interests lie.

Building with the tools of technology enable us to deliver and test all kinds of new interventions that might prove beneficial to all sorts of people.  The tools of social science add scientific rigor to test and assess whether what we’ve built is actually doing what we hope or having another outcome.  The power of this iterative process toward building new knowledge and new experiences has only just begun to remake our world.  With a bit more rigor and attention, we can steer that remaking in ways that support and reinforce our best human impulses.

An Online Community across the globe connecting students to the institution and to one another. One place for student groups, events announcements, institutional communication, classified ads and alumni mentoring and more.

MY ROLES

• user researcher

• designer of UX, UI, logo, branding

• web developer: PHP, javascript, HTML, CSS

• project manager & product owner

Challenges

When the largest seminary in the world began to see its online degree programs grow, the faculty and staff began to ask some important questions about the nature of community online.

What important, formative experiences will students miss if they only study online?

What aspects of campus life are valuable to students to students who don’t visit campus?

How can we make this online community both expressive of and formative of the sort of culture we hope will grow there?

Connecting Students to One Another and to the Institution

We started by hosting a few conversations with a small number of key leaders among the faculty, staff and students asking questions a lot like those above. The consensus was there there was no one community of Fuller so that whatever we made would succeed if it helped connect students to the people, programs and departments who were engaged in work and study that they cared about.

“You’ll spend all your time policing the conversations.”

One concern that emerged repeatedly was that if you created a means for students to post messages that it would swiftly devolve into trolling and nastiness. I was skeptical of this but it was an important concern that we noted to address in the design phase.

User Research With Students

Next I began having one-on-one conversations with a representative sample of the main campus students, as well as traveling to our regional campuses and meeting with students via video chat. The goal here was to share a few possible ideas about what this website might be and do. It quickly became clear that main campus students already had organic ways of finding other students who shared their interests and could simply walk to the offices of faculty, staff and research centers they were interested in engaging.

“We should do Live streaming video. That way they can join in on the life of the campus.” We heard this again and again from faculty and staff based at the main campus. There was so much going on that they wanted to be able to capture and share it with remote students. And yet remote student life looked very different from main campus student life.

Remote or “distributed” students were often studying part-time while working. Main campus students were studying full-time. Distributed students were interested in time-shifted media, or podcasts they could listen to on their own time, but if they had the time and space to be physically present, they would already be doing that. In an age of on-demand video, live-streaming felt like a step backward.

Core Problems to Solve

After conversations with students we settled on a design that would address the following student articulated needs:

• A central location for listing all events, whether organized by the school or by students
• A central location for listing all student interest groups and student government
• A Place to post classified ads: find roommates, buy and sell books, cars, etc.
• A place where students, could find other students who care about or are actively involved in the kind of ministry, research or work they want to explore. This would require student profiles with interests.
• A place to discuss the personal, often deconstructive process of theological education exclusive to people engaged in the school community: students, faculty, staff and alumni only.

Building

We needed a place-holder up and quick to make a good-faith effort to our accreditors so we created a course shell in Moodle, our learning management system, with a forum for student discussion. That bought us a few months to actually build something. We quickly settled on wordpress for its open-source credentials, strong community, plugin architecture and relative match to our problem set.

To Forum or Not to Forum?

As ubiquitous as forums are among online communities on the web, I was skeptical about whether students who were already spending a significant portion of their online study conversing asychronously would want to join another forum. We built out prototype sites using Jeff Atwood’s (Discourse) [https://www.discourse.org/], Automatic’s P2 wordpress theme, and more vanilla options like bbpress.

As we tested those with a small group of students, staff and faculty, it was clear that the more complex the interface, even of a familiar UI convention like forums, the more confusion resulted. We landed on BBpress, a forum plugin for WordPress with user profiles and were swiftly building it out for a private alpha.

Private Alpha Pushes us To Change Platforms

We invited our user group into the private alpha built on bbpress and they were moderately engaged. Most of the posts were playing with features and getting familiar. Overall they found the forums acceptable but the user profiles were fairly limited and most importantly it was very difficult to directly message other users. Further there was limited ability to create groups.

It was around this time that we discovered the City University of New York (CUNY)’s Academic Commons. Built on top of Buddypress, a plugin we had rejected earlier due to its overkill of features and complexity, as customized by CUNY, it seemed to resolve a lot of the user issues that emerged from the alpha.

Using a new instance of WordPress we installed our own “Commons in a Box” customization of Buddypress and began refining the visual identity and user flow to work with our single-sign-on.

First Year in Beta: Lessons Learned

After the project was named “The Quad” by the senior leadership of the school, we launched in the Fall of 2013 alongside a redesign of the main fuller.edu website, and the launch of rebranded Single Sign-On. It was a lot of change all at once.

Planting the Culture You Hope Will Grow

We learned from the experiences of other online communities in our roll-out by identifying leading voices within the community who we knew would reflect and embody the ethos of civil discourse, graciousness and respect on the platform and gave them early access to begin writing, posting and engaging so that when the rest of the students arrived they would accommodate themselves to it.

Sign Your Name

Since we had limited the Quad to people who had a formal relationship with the institution, we were also able to tie their actual names to their accounts and postings. This was a conscious choice designed to encourage respectful discourse and accountability for postings. And it has worked remarkably well. We intervened precisely once in a conversation that was taking a turn towards personal attack. And our approach was not to ban the user but to remind them of the community standards to which they were already committed. The user took a break to cool off for the rest of the day then came back with an apology. This is not surprising given the amount students, faculty and staff have invested in their relationship to the school. The most effective means of encouraging good behavior is to make signing one’s name mandatory. The prospect of being seen behaving badly by ones peers and teachers goes a long way towards encouraging self-policing.

Faculty Draw Students But End Conversations

Everyone was excited about faculty engagement on the Quad. The faculty draw the students to the school in the first place, and their posts and even comment threads did garner more egagement. However we noticed that once faculty joined lively conversation threads and often wrote longer, definitive answers to questions they effectively ended those conversations. The authority had spoken. Who would dare challenge them?

User Sign-Up Flow is Key

New students did not find their way to the Quad in the Fall. The new student orientation failed to include it and there was nothing in the claiming of new student accounts that pushed them toward it. We worked to solve that with the department responsible to move that orientation content to the Quad and to invite users to login to the Quad and share their interests prior to classes.

Sharing the Paradigm with Staff Was Key

Since the staff of the school had only ever used email to interact with the student community they struggled to make the leap to using the Quad to talk to students. It wasn’t until we deployed the Employee Intranet a year later and pushed all internal employee communication to posts there aggregated in a weekly digest email, that staff began to understand the power of communicating with posts rather than emails. We saw a marked embrace by staff and schools seeking to communicate with students after they had seen the power of that shift to transform internal communication.

Who Gets to be Central?

One common and persistent complaint is that despite the higher engagement on the Quad from online students, much of the content and posting remains main-campus-centric. While this is certainly an accurate perception, the solution remains illusive. Just as distributed work-forces only achieve true employee parity when everyone joins meetings via video-conference, perhaps this is a problem we can’t fully resolve until the school itself becomes de-centered. Until then the bias of writing, posting and creating as though main-campus is the “real” Fuller while all others are “far flung,” “around the globe” or otherwise made to feel at a distance.

Outcome

The Quad has continued to grow and develop into a place where new students find their way to student groups and organizations hosting conversations they care about. It is still used more by online and distributed students than by main campus students. Online students simply need it more. Which was the initial hunch that drove the project in the first place.

As the balance of student enrollment has shifted further away from full-time, main campus life to globally distributed part-time study, the Quad remains the starting place for online students in engaging the rest of the richness of the institution.

Japanese gardens often feature miniatures of nature. Bonsai trees attempt to create a miniature tree, carefully composed to appear like a tree in a natural pose and setting. Japanese rock gardens similarly create a miniature of mountains, islands, and water. Zen gardens take this even further, reducing the composition to its simplest elements and carefully arranging them to evoke both natural landscapes but also a sense of stillness, unity, and calm. You may have seen zen gardens featuring raked gravel or sand. This is one element used to suggest waves on water.

This one corner of the Zen garden stopped me in my tracks. It was a simple basin cut into the rock embedded in the ground with river stones arranged around it like people around a fire. But something about this small scene drew me in. It felt like a timeless bubble of absolute calm in the middle of a busy park filled with people in a city filled with people. I wanted to somehow go inside this stillness in the center of this little composition.

I stayed for a while behind the simple rope barrier before retreating to a bench to paint the larger garden scene. I thought about painting this still circle of stones but I knew I wouldn’t be able to capture what it had made me feel. I left after a peaceful hour thinking about the power of this kind of simple composition to create the potential for such powerful feelings.

The more I learned about Japanese and Zen gardens the more I came to appreciate the way that many people weave them into spaces that aren’t much use for anything else. But when composed in this way can provide a portal to nature and calm particularly in short supply in city life.

My Zen Garden

This immediately brought to mind a space that has been bothering me for years. I live in a townhouse in Pasadena, California. The exterior porch is ours but the planter around it is HOA-owned space. Our house is in a corner that gets almost no natural sun or rain. And consequently over the last decade has turned into a dirt patch covered in dryer lint. The kids have taken turns building fairy gardens and playing in it. But lately, it’s just been an eyesore that bothered me every time see it.

I started imagining how this space could be transformed into something like a zen garden.

Materials

• Granite and volcanic stones claimed from the roadside of Angeles Crest Highway from eroding cliff-sides that had spilled onto the road
• Additional fill soil from the Hahamonga watershed
• Moss from nearby soil and the San Jacinto mountains
• River-tumbled granite gravel from Sunburst Decorative Rock
• California redwood border

Process

The Island

I started by adding some soil and fill to build up the miniature island. Later I added the redwood border. It creates a boundary around the composition. With just an oil finish it will weather and darken alongside the rocks in the elements.

I’m particularly impressed at the way that much woodwork in Japanese gardens are still planed to a very smooth finish even though they will be worn by being left outdoors. I spent a lot of time trying to make a very lovely old-growth piece of redwood I already had work for this border but ultimately found some 8″ wide, clear redwood with nice grain at Anawalt Lumber in La Crescenta. You can see I used one of the old growth pieces in the left side as it didn’t need to be as high to cover the seam with the porch.

The Mountain

Then I organized several of the granite pieces into a little mountain range running along the spine of the island. I’ve experimented with several locally growing species of mosses but am still trying to get them to take hold and start spreading.

I’ve experimented with several locally growing species of mosses but am still trying to get them to take hold and start spreading.

I added a second, vertical black volcanic stone and a small fence of river-stones to keep gravel in with one river stone in the center flat like a kind of open gate in and out of the space. In the future, if I can solve how to drill out a hemisphere from it I may make a more direct echo of the pool that first stopped me.

The Ocean

It took some time to find a gravel that worked. I wanted to keep with the granite theme and even have a fine enough size that it could be raked to resemble ripples or waves on water. I bought two different sample bags and made a small model in a redwood box and landed on this “Del Rio” 3/8″ stream-tumbled granite.

One 50lb bag only went this far. I had to wait a week to get some more.

Complete; for now

 I’ve yet to have another experience like I described above. But every time I walk past this space, which happens every time I come and go from home, I feel a sense of stillness and calm that I can pause and inhabit in for a while.

Impact on future work

I’ve long collected beautiful stones alongside beautiful wood and have even made a few compositions of exceptional stones with wooden bases. But this exploration encourages me think even more broadly about how natural materials can fit together into a temporary composition that both echo nature but are still carefully composed by a human mind.

When I felt what I felt at the Zen garden in Golden Gate Park, I also felt gratitude towards and connection with the person who designed the space. Increasingly, in my own creative work, I’m coming to see the value of of creative work being intrinsically linked to human attention, made concrete through embodiment in artifacts, spaces and flows.