Hollaback!, an awesome group fighting street and online harassment, had an idea for a Twitter bot. I helped research, test, design, and develop a functioning prototype (and a site refresh) in one four-week part-time sprint.
I was lucky to be part of a small and great team, volunteering as the first participants in Civic Hall Labs’ Delta.NYC program bridging the tech and nonprofit worlds. Matt Congdon was the project manager (and all-purpose developer), and Frank Rose was the backend developer.
Product Design
The bot’s inspiration was a number of Twitter users who’d responded to online harassment with countering donations to charity. Hollaback! wanted to see if the same tactic would work as a bot, but the specifics were TBD. I started with high-fidelity mockups of the interaction flow to make sure I understood the idea. The mockups also got the team on the same page, and raised important questions about what the targets of harassment would actually want. Matt handled all the input from the client, and Frank started building the most definite parts of the bot. 
User Research, UX Strategy, UX Design
Since it was a loosely defined product, and a sensitive subject, I made a Lean-Startup-style spreadsheet of the project’s assumptions, sorted by risk, and how we could test them. Some we could research, some would be answered by the coded prototype, and some needed input from target users.
Our user survey started with screening questions, to make sure the respondents had actually experienced the situation we were serving. Problem questions then tested the project’s assumptions that the problem existed. Finally, solution questions showed the product mockup, and got feedback on how the target audience liked our proposal. 
I also made a donor survey, with the same three sections, to confirm that Hollaback’s donors would be happy giving money to this effort.
We tweeted the surveys, and HeartMob emailed their contacts, and got 50+ responses. We learned a lot about our audiences’ preferences, and also got some initial usability feedback on the rough mockups. 
Based on the research results, we recommended that the bot operate with direct messaging rather than @mentions, and that a hashtag (#HeartMob) be used for public attention-getting. I made diagrams of these two options, listing the pros and cons of each, to present to Hollaback! for approval of the new product strategy. 
I also started working on a marketing page for the bot, explaining its benefits and showing how it worked in a simple 1-2-3. 
Below that, I presented the new hashtag concept, and drafted some basic Community Guidelines for Hollaback! to expand on with their wealth of expertise. 
Meanwhile, I also worked on the UX for the rest of the website. HeartMob wanted advice on increasing submissions to their support platform. I did an audit of the main “Tell Your Story” flow, saving screenshots and comments in a Google Presentation so that they’d have the ideas even if we didn’t have time to implement them.
Visual Design
The project’s focus was UX, but I thought we should fit in a few UI upgrades as well. The UX work was in Sketch, so I was already testing colors and typefaces in those mockups. Since our timeline was short, I focused on improving the hierarchy of the layouts, the readability of the typography, the feeling of the imagery, and the balance of the existing color palette. I also read the press about HeartMob, to better understand their value propositions, and revised their marketing text.
The new about page enlarged the video, expanded the background info, added quicklinks to the FAQs, and clarified the product overviews.
It was out of scope to rebuild the onboarding flow completely, but a progress bar made the process more clear. Rearrangements increased usability, and better imagery at each step provided a warmer, more welcoming feeling.
Front-End Development
Once the design drafts were approved, I prepped all the slices and switched over to CSS. Matt had already done a bunch of work building the home page (and ensuring it was still mobile-optimized), and we worked together to finish the front-end dev. I followed their existing architectural patterns but wrote new partials in BEM syntax for added clarity, and added some variables for font sizes and colors to make consistency easier in the future. We pushed all our work to staging in time for the final presentations!
“Erica and her team far surpassed our expectations in responding to our HeartMob program tech needs. As the point person on UX assistance for our HeartMob website, Erica took our vague requests and the problems we identified and came back with a stunningly beautiful platform redesign. Erica understood what lay at the heart of our work and helped it shine through with a more attractive, navigable, and user-oriented website. Thank you, Erica!” —Leah Entenmann, Hollaback!