Storytime

What gets you excited about reading? Perhaps it’s the idea of being transported to another time period. Maybe a friend recommended an interesting book, or you decided you’d like to go on an adventure.

I worked with a team of kids ages 7 to 11 to develop a prototype for Storytime, an interactive storybook app. My prototype serves as a testbed for a future digital collection of free children’s stories. I used Lewis Carroll’s Alice’s Adventures in Wonderland as my sample story, turning it into an immersive experience that allowed readers to engage with colorful animations, learn vocabulary words, develop a greater understanding of the characters and quiz their knowledge of the book. As a result of this project, I’ve created a set of recommendations that others can use when designing digital stories.

The goal

Why this project matters

More people than ever before have access to digital books, but the rate of children and teenagers who read for leisure has sharply declined in recent years. Nearly a quarter of 13-year-olds say they “never” or “hardly ever” read for fun, compared to 8 percent of 13-year-olds three decades ago, according to a report by children’s advocacy group Common Sense Media.

By studying kids’ reading habits and learning what interests them, I hoped to develop a strategy for making digital books for young readers more engaging. American kids are exposed to technology at such young ages, and many studies show they tend to have such positive attitudes toward their devices. I decided to find a way to harness this enthusiasm and find a way to engage kids in reading through digital means.

Roles

  • UX researcher
  • UI designer
  • Illustrator
  • Animator
  • Copywriter

Timeline

November 2016 — April 2017

Project partner

Kidsteam in UMD’s Human-Computer Interaction Lab

Recommendations for creating engaging stories

In my first meeting with Kidsteam, I wanted to give my design partners an opportunity to dream big and imagine the ideal digital reading experience without restrictions. The only requirement I gave them was that it had to be accessible from a mobile device or computer. From there, my design partners took oversized sheets of paper and began sketching. Over the course of several design and review sessions, I developed five key recommendations for creating an engaging digital story:

  1. Balance text with colorful animations
  2. Let interactive elements carry readers through the chapters.
  3. Choose a new favorite book with personalized picks.
  4. Provide additional content so readers can dive deeper into a story.
  5. Give readers platform freedom and flexibility.

Recommendation 1: Balance text with colorful animations.

From the start, every co-designer requested animations related to on-screen text throughout the story. For most members of the group, there was no such thing as too many animations. In our first session together, Kidsteam designers used Harry Potter and the Sorcerer’s Stone as inspiration. They drew images of characters that appeared when their names appeared on-screen, owls flying by and dementors popping out of the pages.

I took these ideas and spent my winter break trying to apply them to Alice’s Adventures in Wonderland. Nearly every page of my prototype had some kind of animation on it to go along with the text on the page.

This slideshow requires JavaScript.

When I brought the high-fidelity prototype to Kidsteam, my co-designers largely liked the look and feel of the illustrations. However, one designer brought up the point that such large animations could distract some readers. I went back to the drawing board to explore options for adding a pause/play button.

Ultimately, I settled on making “pause” more of a discovery feature — something readers would figure out by tapping on an animation to pause or restart an animation.

Recommendation 2: Let interactive elements carry readers through the chapters.

In our first session, each group of co-designers created ways to interact with visual elements. Co-designers requested quizzes, short video clips and game-like features. Using our Harry Potter example, one group created a Buzzfeed-style quiz that readers could take to find out which Hogwarts house the Sorting Hat would choose for them.

In the Alice high-fidelity prototype, I included in-chapter quizzes and a reading check quiz readers could access from the table of contents area. Two designers said the in-chapter quizzes made them want to continue to the next chapter and see if their answers were correct. After exploring the prototype, some co-designers asked for a more “gamified” experience, which could require an additional layer of thought when creating a digital story. In the case of Alice, one designer suggested turning the part where Alice fell down the rabbit hole into a game where readers had to catch items falling alongside her. While a game might not be suitable for every story, allowing readers to interact with the animations in some fashion — such as tapping Harry Potter’s wand to cast a spell or clicking a piece of cake for Alice to eat — makes stories all the more compelling.

Recommendation 3: Provide additional content so readers can dive deeper into a story.

Throughout our sessions, Kidsteam members created systems that enabled them to access additional information about the story for one of two purposes: assistance and additional context. For assistance, one co-designer suggested adding a feature that let readers tap a word to hear a pronunciation and see a definition. Children also wanted to see additional details about the storyline, such as character maps that appeared when the reader taps a character’s name, flashbacks to previous scenes as they’re referenced and extra information that might otherwise be found in a book’s appendix. In Harry Potter, for instance, there could be a list of spells and what they mean or a map of the Hogwarts grounds.

My high-fidelity prototype included character information boxes that popped up when readers tapped their names and examples of vocabulary word banks that included a definition, part of speech and pronunciation. The character information box included an overview of his or her personality, their goals or motivations, their friends and their foes. A “more about…” button would take readers to a separate page that provided a more in-depth analysis of the character. Readers could also access a character list from the table of contents button on the top left of the app.

My test users found the character information boxes particularly helpful. One user said she liked the inclusion of a large illustration of the character and links to related characters. She added that she’d like the illustration to be animated like the rest of the images in the story. Other designers recommended I change the information box from a popup window to a slide-out window that pushed story text to one side of the page instead of covering up the text. I also explored adding an icon next to characters’ names to remind readers that they could click the text for more information, but this idea didn’t sit well with my test users. They said readers of their age would likely discover this feature quickly on their own or that it might be beneficial to add a “how to use this app” feature for first-time readers. In-text icons, they said, would distract from the story.

Recommendation 4: Offer ways to adjust reading levels.

After reviewing the high-fidelity prototype in our final session together, some Kidsteam co-designers said they wanted to make sure the app would be accessible to children of various backgrounds and needs. They wanted the app to be platform agnostic so they could access a story across laptops, tablets and smartphones and keep their place if they switched to a different device. They also emphasized adjustable reading levels and reading options. One co-designer recommended making each story within the app available to young and experienced readers alike; clicking a button would adjust the difficulty of words, but the plot would stay the same. Other co-designers suggested adding features to turn on text highlighting and narration.

Initial concepts for adding a reading level feature.

Recommendation 5: Choose a new favorite book with personalized picks.

In addition to exploring ways of adding “magical moments” that enhanced a story, my co-designers also emphasized a need for interesting ways of selecting a book. I initially created a bookshelf-like view, where readers could swipe through book covers sorted by title or author. I also showed the Kidsteam designers a list-like view that they could scroll through, but they largely preferred being able to see a greater number of books at once with the bookshelf view.

When I started designing the high-fidelity prototype,  I stuck with the bookshelf view, since most Kidsteam designers preferred this view. To please the two designers who weren’t fully satisfied with this view, I added some additional search features based on ideas my co-designers suggested at various points of the design process. Most of them agreed that a Netflix-like feel would be valuable. They liked the idea of personalized recommendations based on past books they read and to be able to search by themes and collections instead of just by genre or author. Between our wireframe-testing session and the high-fidelity prototype review, I added a number of features to the bookshelf: a “rate it” section that would appear on the main library page after a reader finished a book; featured collections (“take an adventure” and “solve a mystery”); a “new to the library” section and a reviews tab on the book preview page. Readers could also use a search bar, instead of having to just swipe through the bookshelf until they found the book they were looking for.

Storytime bookshelf view

The Kidsteam designers were generally satisfied with these changes, at least for an initial release of the app. Down the road, a few said, they’d like to see the addition of a social features such as viewing friends’ reading lists and recommending books to each other.

Discussion and next steps

This project provides storytellers with a base set of recommendations for creating stories that engage young children in reading. While my research primarily focused on fiction reading, the concepts could be applicable to nonfiction books as well.

In future studies, it would be valuable to further explore social networking features and gamification of reading. My Kidsteam co-designers expressed interest in sharing book ideas with friends and reading for some sort of reward.

One area that my project did not explore was the curation of books. Should the app be free, but users have to pay to download books? Should it be a subscription service? Can you add books and curate lists, or is there just one collection of books? My capstone project focused on the “magical moments” of reading and some in-app features, but further research could involve parents, guardians or teachers. Questions would surround the download and purchasing aspects of the app.

For my next steps, I’m planning to develop a website version of Alice’s Adventures in Wonderland, which incorporates my animations in a responsive, interactive story format. It’s been a personal goal of mine to build a complete website from scratch. I’d also like to expand upon the animations I designed for this project and to turn the classic children’s book into an interactive experience anyone can access.

Want more Storytime?

 

RecipeMate

Homepage of RecipeMate app.

Homepage of RecipeMate app.

A recipe app designed with visually impaired users in mind. Created for my interactive design class.

Interact with the prototype online or keep scrolling to view the different phases of the project.

Problem definition

How do you improve the recipe reading experience for both sighted and blind or low-vision chefs?

Research findings

Before I started designing, I watched a video by The Tommy Edison Experience. Tommy Edison has been blind since birth and makes YouTube videos that show how he does everyday tasks. In the video, he shows how he cooks a hamburger and french fries. I also watched a video of a blind mother, Nicole Rasmussen, explaining how she navigated her kitchen. Given the time constraints of this assignment, I wasn’t able to go out and interview anyone personally about cooking, but these two videos gave me some insight to how visually impaired people cooked.

When it comes to exploring a recipe app, I realized both blind and sighted users would have some similar goals. For instance, since cooking requires you to use your hand, you’re likely going to want as hands-free of an experience as possible. It also should be easy to jump from step to step and to refer back to the ingredients list.

Userflow

User flow for recipe app

Information architecture

Information architecture for recipe app

Usability test plan

Usability test plan dashboard for recipe app.

Initial wireframes

Overview

Wireframes for recipe app.

Detailed view

Detailed view of wireframes for recipe app, steps 1-3.

Detailed view of wireframes for recipe app, steps 4-6.

Detailed view of wireframes for recipe app, steps 7-9.

Detailed view of wireframes for recipe app, step 10.

Interactive prototype

Interact with the prototype online.

School Showdown

Problem + Goal

Too many students are dropping out of college X (stakeholder). The dropout rate at College X is 62%. The drop out at College Y rate is 45% The VP of Enrollment wants to compare competitive data on a mobile device (a dashboard) on the go anytime. The experience needs to be at least 2 screens. 

Data

 College X College Y
 Avg GPA 2.97  3.07
 Avg Freshman Age 20.2  19.2
 Average Age in Dorm  21.2  20.2
 Avg Income (1 parent/2 parents) $75k/$105k  $65k/$90k
 Cost of University $28k  $15.9k

Wireframes — Round 1

img_5637

This is my first attempt at sketching an idea for the app. I only had about 15 minutes of class time to come up with these wireframes, which were then critiqued by my professor. I aimed to keep the design as simple as possible, by having the user enter an institution name, then look at a side-by-side view comparing his or her university to a second. Clicking on one of the topics would take the user to another screen that showed his or her institution compared to other institutions.

My professor said, “You’re making me think. Don’t make me think.”

Wireframes — Round 2

wireframe-version2.pngAfter the initial round of wireframing, I had a few days to mull over my design decisions and figure out how to further simplify the design. I changed the text entry on the homepage to a dropdown menu. On the second page, I removed the buttons at the bottom of the page and instead added “View details” buttons in every section. I added a back button at the top of the app that would enable users to navigate back to the home screen. I also added a dropdown so users could switch schools right in that screen instead of having to navigate back to the home screen. On the third screen, I made it possible for users to change which variable was displayed in the bar chart, and I removed the option to click two bars to compare new schools. I made the bar charts horizontal so I could add in the names of the other universities without sacrificing space.

Prototype

mockup-version2

For the final prototype, I made a few more minor tweaks to the wireframes I had previously designed to improve content accuracy. I changed the page titles on the second and third screens, and I edited the “view details” text to “compare to peer institutions.” I also added a “new comparison” button on the bottom of the bar chart screen. Finally, I decided the bar chart screen should only highlight the user’s institution.

Prototype

Education app

I created the second round of wireframes and mockup in Adobe Experience Design. The graphic used on the home screen is from freepik.com.

And for fun, here’s a second, alternate prototype I created — just to try something different:

mockup-2

Mailbox

There’s something so relaxing about smashing some old glass and remixing pieces into a mosaic. This is the result of what happened when my mom asked me to help overhaul our mailbox. This took about three days from start to finish.

IMG_5155

Here’s the work in progress, before my mom filled in the gaps with grout and we cleaned up the glue:

mailbox-in-progress

 

It makes me so happy to see whenever I visit home!

mailbox-2

July 2016

Bitcamp Post-Event Report

The Bitcamp team is dedicated to transparency. Part of my responsibility as a lead organizer for the 2016 hackathon was to create a post-event report that reflects on our experience. I noted the highlights of our event and areas where we could improve in the future. This document helps our incoming team know where we have room to grow and how we can continue building upon our successes. We also send it to our university partners to remind them of the benefits that Bitcamp brings to the University of Maryland year after year.

View the full report or scroll down to see some highlights from this year’s post-event report.

Bitcamp-front-cover

Bitcamp-interior

Bitcamp-front-back

ComicHub Usability Testing

Fantom Comics in Washington, D.C.

Comic book retailers tend to have limited access to online systems and inventory management tools, making it difficult for comic book subscribers to manage their subscriptions. Stu Colson, owner of New Zealand’s Heroes for Sale comic book store, decided to create his own system, ComicHub. ComicHub provides both a retailer point-of-sale (POS) system and a mobile app for customers to manage their subscriptions. Colson has been using ComicHub internally at his own store, and he has begun reaching out to other stores as early adopters and testers.

View the full report.
View the full report.

My teammates and I conducted an evaluation of the ComicHub iPhone app and presented our results to Colson. We tested the app with frequent customers at Fantom Comics, a comic book store in the Dupont Circle neighborhood of Washington, D.C. We aimed to identify usability and accessibility issues and to present recommendations for the app’s design.

Teammates: Aubrey Scarborough and Michael Brescia

Methods:

  • Heuristic Evaluation
  • Cognitive Walkthrough
  • Task Analysis
  • Open-ended Interviews and guided discussions
  • Pre- and post-test surveys

Software

  • Lookback usability testing tool
  • ComicHub App (iOS)

Read the full report, or continue scrolling to read some highlights.

Usability test participants

Participants

All participants were active members in the comic book community and were regular customers at Fantom Comics. The four participants took part in the test on Sunday, April 17, 2016. The results of the participants’ pre-questionnaire are as follows:

Pretest Questionnaire

 Question Participant 1 Participant 2 Participant 3 Participant 4
What is your age? 27 28 27 29
What is your sex? Female Male Female Female
Years subscribed to comics? 1.5 years 10 years 3 years 2.5 years
How many series do you subscribe to? ~8 ~50 ~15 ~20
How often do you subscribe to new comic series? 2-3 times per year Several times per month Once a month Once a month
How have you subscribed to comics in the past? Comixology Comixology Comixology, “the only way” Fantom’s webpage
Have you used an electronic subscription app in the past? Comixology Comixology, Marvel Unlimited Comixology app Comixology

Tasks

Test participants attempted to complete each of the below tasks. A detailed description of each task scenario can be found in the full report.

  1. Subscribe to a comic drawn by Phil Noto.
  2. Favorite a comic by Annie Wu.
  3. Purchase a variant cover by Fiona Staples.
  4. Check to see if you already own Steven Universe Vol. 2.
  5. Check to see if you’re still subscribed to Dark Horse Star Wars comics.
  6. Find some Marvel Star Wars comics and subscribe to them.
  7. See if any stores in Manhattan use ComicHub.
  8. Add your birthday to your profile.

To test participants, we used an iPhone connected to a laptop. We recorded each user’s screen activity, statements and facial movements.

Testing facility

Results

Summary of Completion, Errors, Time on Task

Task Task Completion Avg Time on Task Errors
Task 1 100% 133 4
Task 2 100% 108 2
Task 3 100% 98 2
Task 4 100% 82 4
Task 5 75% 38 1
Task 6 100% 122 2
Task 7 100% 117 3
Task 8 100% 33 0

Post-Test System Usability Scale (SUS) Questionnaire

 Statement P1 P2 P3 P4
1. I think that I would like to use this system frequently. 4 4 4 5
2. I found the system unnecessarily complex. 3 2 2 3
3. I thought the system was easy to use. 4 4 4 4
4. I think that I would need the support of a technical person to be able to use this system. 2 1 1 2
5. I found the various functions in this system were well integrated. 4 4 4 3
6. I thought there was too much inconsistency in this system. 1 1 2 3
7. I would imagine that most people would learn to use this system very quickly. 4 5 4 4
8. I found the system very cumbersome to use. 2 1 1 3
9. I felt very confident using the system. 3 4 4 3
10. I needed to learn a lot of things before I could get going with this system. 1 1 1 2
SUS Score 75 87.5 82.5 65

Liked Most

The following comments capture what the participants liked most:

  • “I like the history feature and the ability to see what’s been taken off of my list. Having an app, period, is great.”
  • “I liked filtering. It made the searches clear. Comixology is a lot more finicky with titles.”
  • “It’s intuitive. It’s a good user experience.”
  • “I like the scope of the artists included in the app. It’s not just the heavy hitters or big names.”

Liked Least

The following comments capture what the participants liked the least:

    • App navigation
      • “Scrolling. There’s so much scrolling” — noted after trying to find an artist whose name started with a P.
    • Filtering and Searching
      • “I liked that you could select multiple artists, until I realized that you couldn’t.”
      • “You need to be careful to deselect filters.”
      • “I really want a search function. Filters should clear after the search.”
      • “I was expecting to see something like Variant Cover A, B or C. It tells you that you’re looking at a variant cover but doesn’t specify which one.”
    • Other parts of app
      • “I was confused about some of the terminology. I wonder if they use different terminology in New Zealand (where the app was developed) and that’s why I didn’t understand some of the sections.
      • “There’s no locator button for the map. I’d like to see nearby stores.”

Recommendations

  • Filtering: Several tasks (1, 2, 3 and 6) required participants to use the app’s filtering search system to find comic books by artist, publisher, brand and more.
    • Automatically reset filters after user completes a search.
    • Add OR/AND search options.
      Save searches as preferences.
  • Terminology: In Task 6, participants had to find Star Wars comics published by Marvel. 
    • Adjust and/or define terminology throughout the app for audiences in different geographical areas.
  • Locator Map: Task 7 asked users to search for ComicHub stores in Manhattan.
    • Add “store locations” to sidebar so that it’s not just hidden under preferences.
    • Add a search feature to the map.
    • Add a list of locations so users don’t have to rely on the map.
    • On map page open, locator point should be at user’s current location or their specified city.
  • Variant cover: Task 3 asked participants to find a variant cover by the comic book artist Fiona Staples.
    • Add description to variant covers so users can be confident that they know which cover they are purchasing.
  • Search bar: As noted earlier, four tasks (1, 2, 3 and 6) asked participants to use the filter to find comic books.
    • Add a search bar.
    • Add autocomplete to search.

ComicHub logo

Nomad

Nomad takes the stress out of planning group trips. This smartphone app enables travelers to collaborate on all aspects of a trip, from drafting an itinerary to documenting and sharing the adventures that happen along the way. The app recommends destinations, supports collaborative itinerary creation and organizes moments captured during the trip.

nomad-project-report
Click to view the full report.

My teammates and I prototyped and tested this app for our final project for INST 632: HCI Design Methods.

Interact with the prototype, view the full report or scroll down for the highlights.

Teammates

  • Rachael Marr
  • Xiaoyu Tai
  • Rohan Singh
  • Vanessa Oguamanam
Team Nomad
Team Nomad

Methods

  • App design
  • Iterative design
  • Mixed research methods
  • Surveying and interviewing
  • Sketching and high fidelity prototyping
  • Quantitative and Qualitative Evaluation

Software

  • Adobe Xd
  • Adobe InDesign
  • Adobe Illustrator

Video

The users

The app’s intended users are enthusiastic about using social media and sharing their travel experiences online. They prefer to travel off the beaten path in small groups, as opposed to large tour groups that often only catch glimpses of major tourist destinations. The users are organized and detail-oriented, and they form their plans based on their own interests, the wants of their travel partners and the recommendations of others.

Tasks

We evaluated the app by asking participants to complete the following tasks:

Scenario 1: Since your graduation four years ago, you have been working in San Francisco. It’s been a long time since you’ve met up with your friends, and all of you are planning to reunite in Paris. Use the app to:

  1. Create a new trip to Paris from May 1 to 6, 2016.
  2. Invite your friends Debbie, Katie and Matt to the trip.

Scenario 2: You and your three friends are enthusiastic about visiting museums and can spend the whole day discussing art and history. You all are excited to see the unveiling of a piece by Canson at the Louvre Museum. Use the app to:

  1. Add Louvre Museum to the itinerary on May 1 from 2 p.m. to 4 p.m.

Scenario 3: After six exciting days in Paris, you are back in San Francisco and cannot wait to share the memories of your trip with friends and family. Use the app to:

  1. Share some photos on Facebook.

Initial wireframes

nomad-firstwireframesMy teammates and I created three initial prototypes to show our ideas to our classmates. Above, you can see our thought process for one of the prototypes.

Group Poster

Nomad-poster

I designed this poster to showcase our initial design ideas. My teammates and I presented the poster to our class and professor to get feedback on our ideas. This session helped us rethink the app’s functionality and structure before we created the ultimate prototype that we tested with external participants.

Design process

IMG_4420
Rethinking the information architecture after showing our initial design prototypes with our classmates.

Our classmates were pleased with a few elements from each of the three prototypes we showed, but none of the prototypes met everyone’s needs. After several hours of brainstorming, our group revised our prototype:

low-fi-storyboardOnce we were set with our new wireframes, we mocked up an interactive prototype in Adobe XD:

nomad-mockup

Try out our prototype: Interact with the prototype

Bitcamp Sponsorship Info Packet

I wanted sponsors to feel warmly welcomed the minute they walked into the Armory for Bitcamp 2016. After all, they’re a major reason why we’re able to put on a weekend-long event for 1,000+ hackers.

This year, I created a personalized information packet that we distributed to every company that attended Bitcamp. The packet contained general information about the hackathon (a schedule, parking details, contact information for main organizers, etc.) as well as a guide to College Park (in case they wanted to escape the venue for a little bit). The adorable Bitcamp elements, such as the tents and buses, were created by Gira Patel, our design director.

Bitcamp sponsorship information packet
Cover of the information packet given to Bitcamp sponsors
Bitcamp-sponsorship-2
I customized the packet for each company.
Bitcamp-Sponsorship-4
Abbreviated schedule of events
Bitcamp-Sponsorship-3
First few pages of the guide to College Park

Nomad poster

Why must academic posters be so boring? I mean, look at them:

Academic posters

Ugh! I wanted to mix things up with my poster design for a course assignment. My team needed to showcase three ideas for a travel app we were designing (learn more about Nomad). I worked with Rachael from my team to design a poster that would entice people. Here’s the result:

Nomad-poster

>> Learn more about the design process for Nomad.

User interaction observation – Capital Bikeshare

I observed how people use and interact with technology at a Capital Bikeshare Station in the Washington Metropolitan area. I defined two broad tasks for my observation — check out a bike and return a bike.

GOALS

  • Understand how users perform a well-defined task using technology via in-site observation
  • Reflect on what makes a technology easy or hard to use

LOCATION

Silver Spring, Maryland — a city just north of Washington, D.C. The station observed was located just outside of downtown Silver Spring in a residential neighborhood, adjacent to an apartment complex. I observed the station on a Saturday morning in February at about 9 a.m.

IMG_3892

TASKS

Task 1: Check out a bike

  1. At the station kiosk, press “Rent a bike” on the touchscreen interface.
  2. Make a payment by swiping your credit card.
  3. Enter the phone number associated with your card, then enter your zip code.
  4. Accept the usage fees and select a membership, then continue following the directions on the screen to pick the number of bikes you would like to rent. Enter a gift certificate if you have one, review your rental information and confirm your age.
  5. Optional: print receipt and access code. Grab the receipts that print from the kiosk.
  6. Walk to one of the station docks with an available bike. Type in the access code on the interface appearing on the left side of the dock.
  7. When the green light turns on, grab the bike by the handles and pull it out of the dock.

Task 2: Return a bike

  1. Walk your bike up to any of the open station docks.
  2. Push the front wheel firmly into the dock and wait for the green light to turn on.
  3. Pull on the bike to ensure it’s locked into the dock.

Observations

In 30 minutes, I observed two women in their early 20s and one man in his 30s. The man had a Bikeshare key, so he skipped through all of the interface screen interactions I’d hoped to see. But the two women had to use their credit cards to purchase their membership.

A bench just a few feet from the station was perfectly located for observing user interactions without interference. The three users checked out their bikes and left, and after waiting around for another few minutes, I decided to try the process myself. I was also curious to know how easy it was to return the bike — did it lock in as easily as it looked?

The kiosk was organized so that information about the cost was at the top. Information about taking a trip for the first time and returning the bike surrounded a touch screen interface. The kiosk also labeled parts of the interface with numbers so users could work their way down the box as they selected their membership type, inserted their credit card and received a receipt and access code. Yellow text and highlighting helped guide a user’s eyes down the kiosk, and notes such as “No Place to Park?” anticipated potential user questions. Such organization and consideration for the user helps to achieve task goals.

kiosk

However, in both cases where users had to purchase a membership, it often took several attempts for the user to correctly push the buttons on screen to advance the system. They tended to push a button once, wait a second to receive a response from the screen, then press it again. When I tried it, I noticed that the screen was slow to respond to touch. It took me 49 seconds to enter my phone number because the screen kept failing to register my click. Sometimes, it registered the click twice. The numbers also felt too close together, and as a result, I pushed an incorrect number several times. I ranked this barrier as a medium- to high-level of severity. This was just one of nearly a dozen screens, and I felt slowed down by the poor touch screen reactions. Frankly, it was frustrating. This issue could be resolved by using tactile buttons (Aside: this does, of course, present other concerns — the benefit of using a completely touch screen interface is that one could update the software at a later date and change the look of the interface. A tactile interface is more limited, and fixing that layout would be more costly). 

A second barrier of medium severity was the receipt. I hit print and received a membership receipt. I spent at least a minute scanning the paper for an access code. It wasn’t there. I looked at the kiosk again to see if the screen listed the access code, but it had already cleared out my information. Finally, I noticed a second receipt in the kiosk. That one had the code. When I was writing up my field notes later at the bench, I noticed another user run into the same issue. While the double receipt didn’t prevent me from entirely checking out a bike, it was rather inconvenient. This issue could be resolved by adding a note on the screen that states the machine is printing two receipts or by printing everything on one receipt.

code

No users seemed to run into any issues with inputting the access code and pulling out a bike. For returning the bike, the directions were simple — push the bike into the dock and wait for it to click. The actual the action took longer than expected. I rolled the front wheel into an open dock, then looked for a green light to turn on. Nothing happened. After wiggling the front wheel around inside the dock and pulling the bike back, I tried again and pushed harder. The green light went on. To double-check that the task had been completed, I pulled the bike backward, and it stayed secure in the dock. While returning the bike took longer than anticipated, I don’t believe this task would prevent anyone from using the service again. It just takes more of a forceful push than a gentle roll to lock the bike into the dock.

Three colored lights explained the system interactions of the dock. One blinked yellow when the user typed in his or her code, and then it lit up green when the bike was ready to be checked out or firmly secure in its dock. The system also considered the needs of color blind people who might not be able to tell apart the colors because it had icons above the lights: a “no” symbol above the red light, a clock above the yellow light and a check mark above the green light.

station-dock

Outside of the two main tasks, I found a minor issue with station layout: The station had a large map, which would have been useful if a bike dock didn’t block the bottom half of the poster. When a bike was docked in that spot, it was impossible to view the map up close. I rated this issue as low, since it was more of a nuisance than an error that would totally prevent users from checking out bikes. Still, it’s an issue that could be addressed by moving the sign just a foot or two farther away from the dock.

Recommendations

Use tactile buttons with audio and visual feedback instead of a touch screen. Tactile buttons give users a quicker sense of whether or not the button was correctly pushed, and an audio signal like a beep would enhance further enhance that. The downside, as I mentioned earlier, is that interface updates are more limited if you’re constrained by the number, location and functionality of such buttons. 

Alternatively, Capital Bikeshare could retain some aspects of the touch screen interface for larger buttons like the initial “Rent a bike” screen and add a row of tactile buttons so the user could more quickly enter information like a phone number and zip code. 

The first idea above shows a traditional number pad similar to one you would find on a telephone, and the second option shows the numbers listed in a row in increasing order. Other tactile buttons would include “ok” and “cancel” buttons, as well as left/right arrows to advance or return to a previous page. These buttons would prevent errors caused by a touch screen incorrectly reading a user’s finger placement. In both of these interfaces,the “ok” button would need to be quickly distinguishable from the “cancel” button to prevent errors — an issue that could be solved by making the button shapes, sizes or colors different. The “ok” button could be green and include a checkmark icon, while the “cancel” button could be red and have a no symbol (the circle-backslash symbol) on it. These icons would match the look of the icons above the dock lights and would benefit users with color blindness.

Kiosk redesign ideas

Conclusion

While observing the Silver Spring station, I didn’t see any users start the rental process and walk away without taking a bike. Clearly, the interface issues I noticed weren’t too major because no one was unsuccessful. But inconveniences such as a poorly responsive touch screen interface significantly slow down the time it takes to click “rent a bike” and receive a code to access the bike. Further studies could help determine if physical buttons next to the screen would improve the speed of this process.


Proton Pack + Neutrino Wand

From sketches to sheet metal and military-grade weapon parts, a look at the redesign process of the Ghostbusters’ proton pack and neutrino wand

IMG_3359
Gowtham, with the final product.

To think outside the box, sometimes you might have to put yourself in an imaginary world. That’s what my teammates Alicia Geller, Gowtham Ashok and I did when we decided to build a modernized proton pack and neutrino wand for the Ghostbusters.

I learned and built on so many skills while working on this semester-long project, including:

  • Hardware (soldering, using a circular saw, building a simple circuit)
  • Iterative product design
  • Usability testing and user analysis
  • Quantitative and qualitative evaluation
  • Silent observation

Here’s a look at our redesign process, a project for our Introduction to Human-Computer Interaction class (INST 631, taught by Dr. Jen Golbeck):

The proton pack and neutrino wand are essential to the Ghostbusters’ success. Without it, the team members wouldn’t be able to trap the ghosts that terrorize people in their homes and offices. While the existing device is effective, the design leaves room for improvement. With our redesign of the proton pack and neutrino wand, we aimed to improve the device’s usability and efficiency.

Project Description

design-goals

The Ghostbusters must be prepared to head out on ghost-trapping missions at any given moment. Their success heavily relies on the quality of their equipment, so we aimed to focus on creating a device that was lightweight, durable, flexible and user friendly.

Keeping these points in mind, we also wanted to make sure the new prototype felt familiar to Ghostbusters who have used the original pack but improved their interactions with the device.

User Analysis

ghostbusters-persona-01

Through interviews with our early user testers, we determined the most important feature to focus on was creating a lightweight device that enabled users to find a ghost and shoot it without getting fatigued.

Device Features

Neutrino Wand

  • Instead of continuing with the handheld grip design, we opted to create a forearm attachment with a finger grip that connects to a trigger
  • Added a riflescope, live-view display and laser sight — all removable
  • Sturdy, adjustable cloth base allowing for flexibility to give users complete control over their actions
Proton Pack 

  • Eliminated gimmicky look of the original pack
  • Simplified the interface, enclosing elements such as wires and ribbons in the polished metal exterior

Design Process

Several rounds of user testing helped refine our prototype, which started as a paper-and-pen sketch. 

Proton pack and neutrino wand sketch

Round 1

After developing a low-fidelity prototype, we recruited three participants for usability testing. Two of the users had previously shot several types of guns. The third user had never before picked up a gun. The prototype — made of a backpack, cardboard, styrofoam and plastic bags held together with packing tape — allowed test subjects to focus on the interface and not the aesthetics.

What we did

  • Analyzed users’ actions to see if they would see the correct controls, understand the functionality of the controls and identify system feedback.
  • Asked users to put on the pack and wand, climb a flight of stairs and aim at a picture of a ghost-like target.
  • Asked each user to use one of three methods: silent observer, talk-aloud and constructive interaction.

Findings

  • In a rush or without guidance, some users put on the neutrino wand incorrectly.
  • Two users were unsure how to aim at and shoot the target. One user noticed a “target acquired” message on the screen, but he said he did not know if that meant the ghost had been trapped or just spotted.
  • Tasks were minimally affected by memory load. None of the users had difficulty recalling the proper order of completing tasks, and all eventually managed to spot the target and trap the ghost.
  • All users said they felt comfortable with the prototype’s size, but all three requested that the next iteration of the prototype more closely emulate a gun. They found that a cardboard forearm base and grip inhibited mobility of both the wrist and elbow joints.

Round 2

We revised the wand’s grip and added buttons and switches to the interface. The resulting equipment strongly resembled a gun. While our test users preferred this design, we determined we needed to make the final design look less gun-like for safety reasons.

IMG_2922
Alicia, testing out our revised prototype. We told our professor we worried it might look too much like a real gun, and sure enough, she told us we had to change it — despite our test users’ wishes for a traditional hand grip.

We tested six users — five men and one woman — between the ages of 20 and 23. 

Pretest Questionnaire Findings

  • Five of the six users had experience with using guns, and the same five have played video games that involve shooting.
  • None of the test users had ever served in the military, an important consideration because the wand utilizes military weapon parts.
  • All rated their hand-eye coordination as a 3 or 4 on a scale of 1 to 5, with 5 being perfect hand-eye coordination.
  • Four of the six users had seen Ghostbusters at least once, and all users were at least somewhat familiar with the concept of using a proton pack to target ghosts.

Usability Test Observations

  • No user struggled to pick up the proton pack, but four users carried it with one arm, leading us to determine that the pack’s weight was too unrealistic.
  • The hose stayed firmly in the proton pack but slipped out the end of the neutrino wand during two tests. One user got tangled up in the hose but recovered without assistance.
  • Some users used the riflescope; others used the live view display. Some tried both tools, and one used neither feature.
  • The participants all found the target without hesitation, but they all struggled to find the trigger located on the left side of the wand above the hand grip.
IMG_2927
One of our test users, on the lookout for “ghosts” that might be lurking in his house.

Post-Test Discussion 

Post-test interviews and questionnaires with the six users led us to make the following adjustments or add these features in the final prototype:

  • Location of trigger: placed more prominently upon the hand grip
  • Switch and light bulb shows when proton pack is on
  • Working laser light
  • Ghostbusters branding on proton pack
  • Sheet metal and wooden frame to solidify the proton pack’s exterior
  • Flexible forearm base and detachable hand grip to replace gun-like hand grip
Ghostbuster testing
One of our classmates during the in-class testing day. We even had real Ghostbusters outfits so our users could look the part!

Quantitative Evaluation

We conducted usability tests on the final prototype with seven new users. The tests focused on speed and efficiency, learnability and memorability. The test consisted of the same steps described in the second round of usability tests.

Recommendations and Observations 

  • Users have varying preferences for how they interact with the trigger. Some prefer that the button rests on top of the hand grip, while others want it to be more on the side.
  • The laser (which we did not allow users to use for safety reasons) would have helped provide visual feedback for when users pressed the trigger.
Ghostbusters proton pack and neutrino wand project presentation.
Final project presentation — QVC style!

Further Applications

Ghostbusters might be fictional, but the proton pack and neutrino wand design could serve legitimate real-world purposes. We imagined the design concepts could be applicable in creating weapons for specialized military units and SWAT teams, or even space tools for astronauts. No matter the group goal, critical needs such as comfort, mobility, modularity, adjustability and sturdiness would hold consistent. Any of these users would need to be able to carry the equipment for an undetermined length of time and hold it with relative ease.

The neutrino wand’s design involves modularity and can easily be broken down into smaller parts for storage. It utilizes two visual acuity methods: a riflescope and a live view display. Both function similarly and serve as a backup in case the other option fails — perhaps the phone’s battery dies or the riflescope goes out of focus. They also help users to stay on target no matter the brightness of the environment.

In a military-like case or police situation, safety is vital, and the design of both the wand and the pack considers this need. The live view display provides a way to view an environment from a safe distance. The pack can serve as energy storage for a taser wand (instead of neutrino wand) used to subdue criminals. The pack would also provide extra energy and power, allowing users to stay in the field for longer durations of time.

The design could serve other types of users as well, especially if the wand concept is seen solely as a tool and not a weapon. Astronauts could use a revamped wand as a portable power tool strapped to their forearm as they’re fixing the International Space Station, a telescope or other spacecraft. The tool would be powered by the attached proton pack, which provides power, and controlled by the trigger-like button affixed to the hand grip. The joystick moves in all directions and could help prevent injuries caused by repetitive motions.

Currently, space tools like hand drills have a pistol-like grip and a large screen that displays information. It’s designed with an astronaut’s gloves in mind. The tool is also modular so engineers can add modifications later on. Engineers aren’t too quick to change the design since it’s worked pretty well since 1997, but the tools aren’t without their faults. Astronauts face severely limited mobility and often suffer from hand fatigue. Even with special grips and handles, using the tools can get exhausting quickly. Freeing astronauts from having to tightly grip a gun-like grip — and instead strap the tool on their forearm — could have enormous impacts on the lengthy spacewalks. As NASA begins its early preparations for sending humans to Mars or Russia starts prepping for a moon base, this could be a prime time to rethink the design of existing space tools.

The parts of the proton pack could also be separated and reworked for biomedical purposes. A February 2015 article by IEEE’s Evan Ackerman discusses how the Defense Advanced Research Projects Agency and Open Source Robotics Foundation have developed prosthetic limbs that simulate an actual working limb. It works via a brain-wired interface, similar to an innovative design created at Johns Hopkins University’s Applied Physics Lab, which they announced in 2013. Our design could use the concept of energy storage by minimizing the size of the storage pack and using a smaller hose similar to the existing DARPA and OSRF design shown here. In this case, our aim wouldn’t be to reinvent the wheel so much as it would be to integrate our pack and wand concept with existing bionic designs. Many firms are working in conjunction with federal government agencies to find ingenious methods to alleviate the trauma of losing limbs in battle. The research and development findings would also assist the general civilian population, in cases where individuals have lost limbs due to illness, injuries or genetic makeup.

In all three cases, slightly reworked versions of the existing proton pack and neutrino wand show that the design is transferable across fields. Certain environmental factors — maybe the frigid temperatures of space or a hot desert climate — would affect specific design aspects, but the general shape of the equipment could still be used.

Ladies of Technica

Photos taken during Technica, a 24-hour all-ladies hackathon held at the University of Maryland in November 2015. I took these photos for Technica’s Facebook page and interviewed the participants to learn about their career aspirations and tech interests.

12184135_1631305537130781_5216057392254402319_o
“I heard about Technica through the Association for Women in Computing, and it sounded really excited. I wanted to apply my programming skills somewhere other than in the classroom. This is my first hackathon. I might built an Android app.” Moira Dewey, University of Maryland junior computer science and art history major
12185305_1631310453796956_6456523145930730367_o
“I switched my major from international studies to computer science because I found that you can solve problems in other ways than politics. This is my first hackathon, and I love that it’s all-women because I often feel out of place in my CS department. After college, I want to get into data science or work as a developer at a company with a good work culture.” Yemariam Mamo, junior computer science major at American University
12191215_1631337290460939_7804424229846259696_o
Perri Carroll (right), a University of Maryland Baltimore master’s of public health student: “I’ve never done coding. My little sister does Mindcraft. We said, ‘Let’s go do some workshops.'” Payton Carroll, an eighth grader at Elkridge Landing Middle School in Howard County: “There are tons of new jobs popping up with coding, now that we’re in the digital age. I play Mindcraft and look up commands and codes to change things. I might sign up for a [video game] modding summer camp.”
12182585_1631368563791145_3721521828276631510_o
University of Maryland students Devi Srinivasan (junior bioengineering major), Emily Chen (senior cell biology and molecular genetics major) and Megan Dan (junior bioengineering major) practice picking locks. “I’m new to coding, and this is a nice environment to get introduced to it,” Srinivasan said. “It’s a good experience to see all that people can do with coding.”
12188182_1631429307118404_6565939457820918731_o
Saffana Humaira, a senior economics and computer science major at Duke University, is spending the semester in Washington, D.C. She’s started an all-women mentorship program in Bangladesh, primarily focusing on STEM but looking to expand to other industry. “I want to empower women to take ownership of whatever they want to be,” she said.
12182523_1631537033774298_4165236220015701181_o
“I attended the first Technica because of the opportunity that coding offers civil engineers. This Technica hackathon is awesome because anyone who is eager to code can do so in the company of mentors who can help them. Don’t let anyone hold you back. Just go for it.” Lucy Menon, civil engineer in Washington, D.C.
12184148_1631572277104107_688993501662291692_o
“We made a mobile-friendly website that provides financial information to farmers who want to send their children to college. We went to every design workshop and learned about best practices. We’re here to learn something new.” Left to right: Anna Kutsulenko, Anna Jimenez and Maryia Nikitsina from Baruch College
12189431_1631572273770774_4417050859170339299_o
“Women deserve equal opportunities and representation in the tech world.” These are probably the first words for “Alpha,” daughter of software and business attorney Juliana Neelbauer. Technica was her second hackathon. She spent the weekend working with a Makey Makey.

Technica

I painted a photo booth backdrop for Technica, an all-ladies hackathon held in November at the University of Maryland. I used a roll of black photo backdrop and white, pink and blue acrylic paint to create the designs. The resulting backdrop was a little over 8.5 x 8.5 feet.

IMG_2865
My roommate Margaret (whom I’ve known since the first week of college), helped me paint the backdrop when I was sick and low on energy.
12183979_10154259207620639_3968926892016551148_o
The Technica team, hanging out on top of the backdrop after the end of the long weekend.
12186737_10205415639610660_5538363996714819305_o
My Bitcamp friend Gira and me.
12188186_10205411909317405_6244153662962411058_o
Kelsey, my sophomore year roommate and friend since the first day of college, and me.

I also created this inspiration wall, which hackers eventually filled with colorful post-it notes:

IMG_2917
Awkward picture, but you get the idea.

 

Zipcar.com usability study

Photo courtesy of Molostock / Freepik Selected by freepik
Photo courtesy of Molostock / Freepik. Selected by freepik.

As one of the world’s largest car-sharing services, Zipcar gives its network of 900,000 users access to about 10,000 cars and trucks at hourly and daily rates. I conducted a usability study to evaluate the interface of Zipcar’s website, zipcar.com. The following report details my process of conducting the study, observations made during the tests and recommendations for redesigning the site.

Methods:

  • Questionnaires and surveys
  • User interviews
  • Interface testing
  • Testing conditions: silent observer, think-aloud, constructive interaction

Scenario

Since 1999, Zipcar has provided a transportation service to people who need access to a car but do not want to deal with all of the logistics that go into owning a car, such as paying for parking or handling auto insurance. Zipcar.com provides visitors with information about how and where members can reserve cars. New members can register directly on the website and read about Zipcar’s benefits and rates.

This particular study targets millennials, one of the largest subgroups of the Zipcar member community. Zipcar, which defines millennials as people between 18 and 34 years old, conducts an annual survey on this population and most recently found the majority of surveyed millennials find car ownership difficult, care strongly about the environment and are more attached to their phones and computers than their cars. Thus, this population subset is a prime group to the Zipcar team to analyze. Ideally, the usability test will provide insight to millennials’ opinions and preferences so that Zipcar can attract more users in this age bracket.

The usability test focuses on areas of the website that are accessible to the general public. To attract new members, Zipcar must ensure its web interface is easy to navigate so first-time site visitors can quickly find all of the information they need to make an informed decision about registering for the service.

Report

View the full report.

Zipcar.com usability study report cover.

Farm Fresh

farm-fresh

Farm Fresh is a smartphone app that lets users purchase fruit, vegetables and herbs from local farms. I designed this app for my Introduction to Human-Computer Interaction class assignment that asked us to prototype a grocery app.

While designing the app, I considered the types of people who would probably be using this app. I envisioned an on-the-go millennial who seeks the freshness of organic farmers market produce but who doesn’t necessarily have the time or ability to actually get to the market. Keeping Nielsen’s 10 heuristics for user interface design in mind, I aimed for speed and simplicity so users could quickly add the items they wanted to purchase and avoid making errors.

Customer Focus

Julie persona

Above, persona for the app. Personas are a way to build empathy for the end-user. As a storyteller, I enjoy creating and imagining characters who might use my product. In real research, you would base personas on observations of real people; for this class project, I based it on the characteristics of people I personally know who are in their mid-20s and living in a big city.

The UX community often debates the effectiveness of personas. I don’t think they’re necessary in every design situation, but I do feel this technique was useful in creating this particular app. As I played around with design options in Illustrator, I imagined myself as the busy young professional, trying to compile her grocery list on the way to a workout class so she’d have fresh produce to cook when she got home.

Visual Design

grocery app screens

Prototype

This is the first working prototype I’ve developed using prototyping software. You can play with the interactive prototype on Invision. Steps/working elements include:

  1. Click “let’s shop” on the home screen.
  2. Click “username.” A keyboard will appear.
  3. Click anywhere on the keyboard, and a username and password will automatically show up.
  4. Click “login” to start shopping.
  5. Click “view all fruits.”
  6. Click on the picture of grapes.
  7. Click the “+” sign, then click “add to cart.”
  8. Click “check out.”
  9. From the cart, add another apple. Click the “+” sign next to the apples and click “update” to update the cart. The price at the top of the page increases after you update the cart to include the extra piece of fruit.
  10. Click “check out.”
  11. Click “confirm.”

Software

  • Adobe Illustrator
  • Adobe Photoshop
  • Invision

Fonts

  • True North Regular
  • True North Monoline Script

I purchased these fonts back in July as part of an awesome, huge bundle pack from Creative Market. The bundle also included some vector illustrations — one of which I also used for my app’s logo. I love Creative Market’s specials. Every week, they offer six products for free, so now I look forward to Mondays!

farm-fresh

The featured photo uses a mockup courtesy of Mockuuups.

Uber and the surge

Capital News Service reporter Christine Rice and I analyzed Uber pricing data to see how often the ride-hailing service’s surge multiplier spikes in five Washington, D.C. neighborhoods. Click the image below to explore our interactive project.

uber-mac-mockup

We scraped Uber’s API and analyzed more than 2 million rows of data using MySQL. We created the graphs in Highcharts, a JavaScript charting library and built our webpage using Bootstrap. Read more about the project on our methodology page.

I presented this project at the Journalism Interactive conference in May 2015 at the University of Missouri:

Maryland pride

Some canvases I painted for my dorm room. They’ve moved with me to every dorm or apartment I’ve lived in since freshman year. They make me happy.


IMG_3856

IMG_3857 

 

B1G PRESS CONFERENCE

Washington, D.C. || May 6, 2014

I stopped by a Big Ten Conference at the Verizon Center featuring University of Maryland Athletic Director Kevin Anderson and Terrapins men’s basketball Coach Mark Turgeon. My friend Kaz was covering it for The DBK, and he asked if I could shoot some photos for online and print.

Shot with a Nikon D5100 and Nikkor 50mm lens.

Mark Turgeon

Leonardtown basketball

College Park, Maryland || April 14, 2014

Fast shutter speed practice for my photojournalism class. Kaz and Dapps were playing basketball, so it was the perfect opportunity (and a good low-stress environment) for practicing.

I shot these photos on my Nikon D5100 and used an 80-200mm lens. Perks of working for a college newspaper and being friends with the photo editors — you get to borrow some fun equipment sometimes!

For the record, Kaz won, 21-4, before an announced two.

DSC_1737

DSC_1735

 

PYSANKY

Bel Air, Md. || March 21, 2014

I decorated some Ukrainian eggs with my sister, Becky, over spring break.

Shot with a Nikon D5100 and Nikkor 50mm lens.

Melting wax is the final step of the Ukrainian egg dyeing process.

 

DSC_1987

DSC_1984

DSC_1963

DSC_1960

DSC_1944