Hello I’m Douglas, a product designer (UX/UI), listener, and connector of people and ideas. I ask smart questions, transforming mysteries into solvable puzzles that simplify and improve a “visitors” experience.
Punch Line is a mobile game that transforms telling jokes into a competitive sport. Get strangers laughing and they are no longer strangers. Boxers earn points and collect jokes simply by playing. Write a good joke and others will share it, while you earn points.
Case Study: PUNCH LINE
Get strangers laughing and they are no longer strangers
Punch Line is a mobile game that connects people with humor. Hear the laughter of a nearby stranger that you just threw a punch line at. Tell jokes at a party without taking the stage and have a collection of all the jokes you ever heard and never could remember.
I was traveling on a train when another commuter suddenly bursts out laughing. Several people looked up with a grin at the laughing commuter and then went back to their screens. From my observation most commuters were using their smartphones doing one of three things: texting, gaming or reading/scrolling content. I wondered how a mobile chat game could connect all those commuters with laughter.
From this I derived a simple game of humor tag. A player sends a joke to a stranger or friend without the punch line. If the receiver wants to know the punch line they must send a joke back to reveal the complete joke. All jokes received would go into a player's database so that they could be retold again. Players can write jokes and share them. Users can set filters on the type of humor they want. This simple idea became the impulse for building Punch Line.
Who is a gamer? What games do we play? Why do we play mobile games? To answer these questions I created a survey and posted it on Reddit and interviewed five gamers. Here is what I learned:
Guided by my user objectives, I compiled a giant list of tasks in my user story. Then, I chunked the tasks into a screen inventory to form a fundamental user flow.
1. Onboarding -> 2. Inbox/Home -> 3. Joke Database -> 4. Joke Writing -> 5. User Settings -> 6. User Match -> 7. Joke Market
Then, I returned to my user story and highlighted five MVP functions found on each screen to establish the app UI.
MVP FUNCTIONS PRIORITIZED
1. Search | 2. Edit Screen | 3. Setting | 4. Find Player | 5. Joke Writing
With my MVP outlined, I drew up a sitemap and detailed user flow to futher crystalize my findings.
The language of comedy has a violent vocabulary. You throw punch lines; you kill the audience, you bombed, slap stick, etc. The simple act of telling jokes is both exhilarating and brutal if met with dramatic silence. For these reasons, the game’s look and feel is based on the display iconography of boxing posters linking laughter with the excitement of the big fight.
The basic color scheme of black red and yellow blatantly mimics the easily recognizable propaganda style found in the boxing posters. The logo font of Fjalla with its lean and mean stature and tall and sharp san serif corners says authority. While the solid and strong Future Condensed font states it purpose clearly in headings. Last by not least Avenir easy and crisply communicates any text content.
The logo was discovered when searching for icons while building an early prototype. I noticed how the each boxing glove icon contained a whimsical smile all I had to do was give that smile two black eyes.
Beginning with the onboarding flow, I created a wireframe in Basamiq. Then using brand colors and a 3-step tutorial outlining game play, I designed a prototype in Sketch and tested it with three users with Invision.
From my initial user tests of the onboarding flow, I discovered that easy game play was key. I adopted a swiping gesture to mimic throwing a punches and content drawers to accommodate for small screens in my first prototype.
Testing my first prototype I learned volumes and this translated into a dramatic reworking of the UI to focus on a boxing arena experience. In addition, I found that first time players needed a complimentary joke to facilitate engagement and learn the point system.
High Fidelity Prototype
From my user testing, I learned that thumbs are the masters of the game universe. So I accommodated those thumb wars and turned the screen horizontal. The split screen was way to confusing for users. So I adopted the standard UI patterns from Imessage and gameified the UI with a prominent score and leaderboard, time limited matches and incentivized starting and finishing fights with points.
Punch Line is a humorous thumb war. Turning the screen to accommodate the users thumbs made all the difference in creating a intuitive and fun gaming experience. Learning about gamification and the gamer psychology was fascinating. I also really enjoyed the passion of the "gamers" I interviewed and who tested my prototype.
Translating the idea of the game into a clear user interface was challenging. Done in solitude it felt like untangling a web. But with patience and applying the design thinking process (Empathize – Define – Ideate – Prototype - Test – Implement) I soon got a clear picture of the UI, and once I could see it, I could make it. Because my first profession was graphic design, my largest lesson was staying low fidelity for as long as possible. Design is a waste of time at the wire frame and lo fidelity level. Now I know!
User testing involves one of my favorite things, asking questions. And the insights from user testing were no less than revolutionary in clarifying user patterns and orienting the game. Throughout this project, I have been amazed at the amount of enthusiasm Punch Line has inspired in others. After posting this project on Slack, I received lots of positive feedback and recently have been working with developers on building a working actionable game! I am very excited and look forward to sharing this once it is finished.
Heartwood Educational Collaborative an independent study and home school program needed a dramatic remake of their website under an impossible deadline.
Case Study: HEARTWOOD
A Waldorf Inspired Educational Collaborative
Heartwood Educational Collaborative is an independent study and homeschool program guided by Waldorf teaching methods, situated in a natural environment where a robust nature enriched curriculum helps students find their own learning rhythm.
Heartwood Educational Collaborative provides several inspired, Waldorf Education tailored programs and resources to meet the developmental needs of students who are homeschooled or campus attendees. Under new leadership the school needed a remake of their website within a month. The majority of the research was captured over two meeting with the stakeholders and summarized in a project brief. Though this was not optimal for collecting a broad picture of the school’s clients it quickly became apparent that the highly specialized niche that Waldorf home schools occupy in the San Francisco Bay Area bought a ready audience and simplified the goals of the site. The client provided a mood board, a sitemap and a Dropbox full of images.
From an impromptu questionnaire of current school parents and analyzing the reoccurring circumstances of those families revealed four major drivers for enrollment.
Review of the websites tasks with Google analytics and feedback from the office staff about callers who had visited the website showed the importance of free quality resource and blog articles driving conversion. It also revealed that the current admission process was not clear. Further discussion about the mission and history of the school assisted the rebranding of the school and revealed a competitive advantage created by impacted enrollment at other local charter schools.
It became obvious after out initial meeting that the client’s vision of the project scope was too large for the current deadline and budget.
Using the data from the project brief we narrowed the functionality of the website into a list of “must haves” and aligned current functionality into a minimum viable product. The new project scope incorporated consolidating the calendar, linking to existing online donation methods and simplifying the online application form.
The current site map did not provide consistent site hierarchy as characterized by the goals outlined in the project brief. In addition, the site page outline had vital information buried, and a lack of clear information architecture.
Working with the school administrator, we edited the site map and consolidated content to meet the end goals of different users. By identifying the end goals of the users, a vital missing part of the initial persona sketches, the content structure and site navigation changed entirely. The site was divided up into three distinct content driven sections.
From the onset of this project the stakeholders had a clear vision of their brand story and mission. "Nature based" and "Waldorf" were clear describers in almost every conversation I had with them. They were so invested in their vision of the school that they insisted on designing the logo and renaming the school. Because the color scheme and font was foundational to the website navigation system, I was tasked in creating a color palettes and font usage that reflected the schools brand. The challenge was doing this before the logo or name of the school was established.
From my conversations with the new administrator, I knew that the Germanic, wood block type fonts used in many “Waldorf” schools was something to avoid. The intention was to bring something natural, modern and open to the homeschooling movement. I immediately began looking to san serif fonts to reflect this modern educational ethos. Early in my research the Open Sans font became the obvious choice for the school. It was open and easy to read font that seemed to reflect the lyrical praise every stakeholder had for the school.
I began with a mood board to compile the examples and key word images that had been discussed by the client. Ultimately, I came up with three-color palates examples that had the proper contrast and readability for the navigation and met with the client’s approval.
With a concise site map, I went to work on building three low-fi wireframes. Before diving in, I researched common UI pattern and noted the nomenclature and navigation hierarchy on private school websites. I noted the kind and relative priorities of the information and functionality displayed. I also compiled a list of rules for displaying this information and the effect of different scenarios on this display.
The wire frames were present to the client and the site navigation was established. With this information in hand I created a high fidelity wireframe sample to clarify some of the visual hierarchies and content placement discuss in our meeting.
When things are under a tight deadline so often the research phase of a project is often where clients will push to cut corners. I believe this tendency is born out of a client’s laser like focus on brand story and content, which eclipses the marketing and user experience context of their product. This project bears testament to this tendency and is reflected in the challenges of defining project scope and a clear site map. It is precisely this translation of idea into outline that a UX designer is hired.
Merry Go is a mobile app that finds today's kid friendly event and venues. Allows the user to filter, search share events and connect with others attending the event through users posts and comments.
Case Study: Merry Go
Overtired and isolated parents need to find a recommended kid friendly event. TODAY!
Merry Go is a mobile app that connect parents in their search for today's kid friendly event and venues. It allows users to filter, search, and share events while participating in a live forum about the event.
Being a parent to young children is an exhausting and isolating endeavor. Finding a fun child focused activity is only a web search away. But how do you find recommended local kid friendly event and venues? The challenge is more than finding a destination it’s about answering parenting questions.
I created a survey asking caregivers about the methods and resources they use to find local kid friendly events. I posted a link to the survey on a mother club online discussion forum and received 19 respondents. I also interviewed five survey respondents to clarify their answers and outlined their pain points when looking for kid friendly events.
I conducted five impromptu interviews of caregivers at two local park playgrounds. I asked them about what resources they used to find local kid friendly events. I was shocked to discover that these caregivers relied on the bulletin board at a nearby cafés and the fellow playground caregivers for finding recommended local events. In addition, I also closely reviewed the survey respondent data, followed the Southern Marin Mothers list serve for a week and generally explored online parenting blogs. From this research, I created four user personas.
The resources available for finding kid friendly event and activities are vast. From my survey data, interviews with parents and resource landscape examination, I created a basic SWOT analysis. My take away from my research was that people want context and personal connections from their content, especially recommendations and real-time feedback.
Next, I compiled a user story and prioritized the essential functionality for a minimum viable product. It was during this process that I made a fatal flaw and overlooked my user research. The social interactions like sharing, linking, posting & comments were precisely the functions most wanted by most users. This fact would be revealed during user testing.
To design the dashboard, I did some UI pattern research and mapped out the sign-up and search flows using my user story as a guide. Then, I built the site map to help clarify the navigation structure and content hierarchy.
First I made a list of words that described the app and then circled the top three. They were kids, fun, and movement. Then I searched for imagery around places where kids activities typically happen like playgrounds, circus tents, etc. This was good start but when creating a brand I often work a Socratic method to clarify the foundational elements behind the brand story.
Q & A SESSION
Q: What is this apps primary function?
A: Discovery of new, entertaining events to take my children too. From this answer I derived the tagline: “Let’s find some fun!”
Q: What is fun for both kids and parents?
Q: Where do most children find play?
A: At a playground.
Q: What is foundational for discovering new places?
Q: What playground activity is iconic for movement?
A:The Merry- Go - Round and Swings
So the Merry–Go–Round became the name and brand icon because it signified both movement and play. Then, I shorted name to Merry-Go to further emphasize fun and movement.
Searching key color indicators like fun, kids, vibrant, and feminine I found mostly cliché pinks, baby blues and lemon yellows that were either too pastel or over the top neon. I was looking for a more nuanced storyline for the Merry- Go color palate. Then I found these retro circus colors that contained the energetic fire engine reds that said “this is fun” to both adult and child.
Appealing or a modern female demographic, I looked for a energetic and charming font that said fun. I found these qualities in the font Bree Serif for the logo. For heading and the body copy I looked for something open, easily readable and san serif. I arrived at the tall and thin Poppins Light for headings and the ubiquitous Roboto for the body copy.
Using my user story and content search UI patterns, I pasted up a basic paper prototype used this to conduct user tests with neighbors. I also brought it to a local dinner party where it was a big hit and helped me gather five user tests. These tests showed the great need for such a app and that context and opinion of other users was paramount to its success.
After an initial round of testing, I transformed the app into a clickable prototype and applied the brand design. I began testing by employing user testing.com to get feedback from my primary demographic. The feedback was positive, so I continued iterating the prototype building out features like recommendations, rating and user comments within the venue information.
Then I sent the the prototype link to survey respondents and gathered feedback in person and over the phone while they clicked through the prototype. I received lots of data about the UI and what worked or not. Yet, it was the conversations I had after the testing the prototype that brought me to a telling question that shifted the whole focus of the project; "Where are the users?
My user testing revealed that finding a kid friendly event didn’t resolve a caregiver’s feeling of isolation. What parents wanted most was an opportunity to socialize, connect and share with a community in similar circumstances. They wanted a place to ask and answer questions, to get feedback and reconnect to the outside world. They wanted a local listserv. for mining the collective intelligence of the group. My teachable moment came when a prototype user asked,
"Where are the users?
Yes, I lost sight of the users needs and now the process loops back to a new iteration focused on connecting users who want to find kid friendly events. This project was a powerful lesson and a testament on how the UX process works for building better products!
INvelope provides users the ability to gather, organize and share their data (images, notes and links) and seamlessly collaborate, edit, and annotates files.
Case Study: InVelope
Save, share and collaborate.
Introducing INvelope, a Software-as-a-Service web application providing effortless content management with seamless collaboration. Organization is no longer a chore with INvelope's predetermined item categories built into the upload process. Whether it's capturing thoughts during an office meeting or sharing photos of a recent trip with friends, INvelope makes it easy to add anything in seconds, keep things organized and share with others quickly and efficiently.
I created a user survey to get to know my perspective users' preferences and habits. Results were gathered from 10 respondents across social media within the United States.
My questionnaire focused on:
I summarized the data and identified common user motivations, frustrations, and considerations, including:
From these results, I was beginning to see that users wanted a productivity tool that could streamline the organizational decision-making process and facilitate collaboration.
I interviewed survey respondents to clarify their survey responses. The user's I interviewed established strong preferences for being able to store content in one location, organized within a clear hierarchy that could be easily searched and above all share easily with both friends, family and work colleagues.From these my research, I identified three user group personas.
Given the number of existing productivity services, I needed to take a closer look at potential competitors to identify how our product could provide the most value to our users. Instead of evaluating other note-taking apps, I focused my analysis on cloud storage heavyweights like Dropbox and Google Drive to perform a basic SWOT analysis. Since users' strongest desires were for collaboration and better organization, examining the successes and faults of services built to house and handle vast quantities of data revealed insights and opportunities beyond just how to build a better interface for typing and storing notes.
From my market research I compiled a lengthy list of tasks that users would want to accomplish with my product, I prioritized those essential for a minimum viable product (creating and upgrading accounts, adding and viewing content) from the nice-to-haves (sharing and favoriting content, adding and managing collaborators).
Using my users stories I made task flows to visualize how the user would accomplish those stories within INvelope. Then I combined these task flows into a dashboard and mapped out the smoothest paths for adding content, searching for specific items, and managing accounts. Lastly, I solidify the navigation structure and content hierarchy by drawing up a sitemap before diving into the design of the actual product.
I began my brainstorm with a word-association exercise around the idea of how people share and store information. I asked, what object is used for both sharing ideas and storing them? I arrived at the envelope! I noted how envelopes hold both personal and profession documents. With this association, I explored the archetypical landscape of a work desk and noted the IN and OUT boxes and adapted this in the capital IN of the logo. Lastly, I wanted to suggest movement in the logo so I italicized the font slightly.
INvelope also needed a color palette to encourage feelings of activity and efficiency. Researching postal and business color schemes it became clear that blue was foundational in the color scheme. I chose two blues a dark gray and navy blue to anchor my array. I chose a complementary color scheme composed of teal to reflect dependability and security, sky blue to represent friendliness and a contrasting yellow orange to depict vibrate energy and echo the color of the universal yellow envelopes found in offices everywhere.
I paired Varela Rounded Regular with Lato Light to reflect professionalism with personality. Varela's rounded corners and rounded stance held a softer, trustworthy, and modern look while Lato Light with it's thin sharp edges gave a easily readable and crisp typeface to the brand.
To be able to share my mockups with a remote design partner more efficiently, I used Balsamiq to sketch initial concepts. I created several variations for the landing page and layouts for additional content pages, focused on iterating quickly and communicating ideas. Once the partner was on board with selected mockups, I moved into the next phase of concept development. Using my sitemap and a list of project requirements as reference points, I fleshed out my wireframes in Adobe Illustrator and then High Fidelity Sketch for the MVP.
Using my sitemap and a list of project requirements as reference points, I fleshed out my wireframes in Adobe Illustrator for the MVP. I then tested if the landing page design adequately conveyed the value proposition, along with how users would accomplish the primary tasks identified in the user flows. I set up 5-minute tests with random participants through UserTesting.com and recruited survey respondents for in-person usability tests. In-person participants were guided through an InVision prototype using a test script.
Feedback generated from the tests of my interactive wireframes informed my top action items, including:
After initial testing, I designed a higher resolution color mockup with Sketch. This version focused on fixing previous user pain points and remedied improper button placement as well as incorporating error messages. An Invison prototype was quickly tested with the previous users to validate the changes. Much of the user testing findings from this second round was not incorporated due to an aggressive timeline for development.
Here are some of the highlights from the user testing.
I enjoyed building and user testing this web application. This project revealed how critical in-person usability testing is for examining a product’s viability while leaving room for unexpected insights.
With more time, I would build out additional screens to test our search and share functionalities and collaborative features in order to develop INvelope's capabilities for social networking and more advanced corporate needs.
MEET THE DESIGNER
I’m passionate about shaping meaningful experiences by focusing on the big picture. My background is in photojournalism, graphic design and branding. Yet my experience outside of the visual arts as a successful, student-centered Waldorf teacher has truly honed my skills as translator, process thinker and leader.
My north star is helping people solve problems by bringing clarity and purpose. How? My design process is simple: listen closely, build quickly, test often, spin and repeat. Facilitating Design Sprints, conducting user tests and teaching students has shown me how data frames a problem, but empathy bridges crucial decision points to validate ideas and build better products.
I switched from education to design because I’m a creative at my core. Making beautiful things, asking smart questions, discovering patterns and connecting with people in meaningful ways are what motivate and give me purpose. Discovering UX design has connected the dots between who I am and what I can do. So let’s collaborate, strategize, story tell and solve puzzles together to create inspired and seamless user experiences.