I am a visual designer based in Washington, DC specializing in UI/UX design for interactive web products. I kicked off my creative career doing sound design at XM Satellite Radio before shifting to visual mediums. These days I seem to focus on websites and apps. (It's amazing that I can trace the early beginnings of my career to Geocities circa 1997 when I first taught myself HTML.)
I consider modern web design a balance of both my love of art and creativity with logic and organization. Finding creative solutions to maximize a user's experience is thrilling (I know I'm a nerd). And I enjoy creating little animations to prototype different kinds of microinteractions. The added bonus of working for many government clients gives me the additional challenge of creating beautiful design and being Section 508 compliant. Some current and past clients include AIDS.gov, National Cancer Institute, EPA, and U.S. Army.
I have a cat named Loki and we live in the Petworth-neighborhood of DC with my husband. In my spare time, I enjoy fitness-related activities, reading about fashion, and taking naps. I also enjoy painting and making stained glass windows (Yay, art!). If you want to know more about what I'm thinking on a daily basis, follow me on twitter.
Designers do more than make stuff pretty. Designers are analytical thinkers and problem solvers. Gone are the days where a designer's main job was to splash on some branding and call it a day. With seemingly limitless opportunities for animation and interaction, we can open up a web experience to new possibilities.
Design should be thoughtful and intentional.
The interface must be intuitive, not forced.
Innovation is more likely to occur with collaboration.
Prototypes need to be created to test the design.
Design is not over when the product is delivered, it should continue to evolve.
Nominated for a 2016 Webby Award as one of 5 best sites in the world for Government and Civil Innovation, Positive Spin is a microsite created for AIDS.gov to highlight the HIV Care of Continuum. Also called the HIV Treatment Cascade, it outlines the steps one takes from being diagnosed with HIV to living a healthy life with the virus being virtually undetectable. Unfortunately, while only 86% of people with HIV are diagnosed, only about 30% reach viral supression.
The five stages of the HIV Care Continuum.
Black gay and bisexual men are disproportionately affected by HIV in the United States. Aside from educating the public about the HIV Continuum of Care, we wanted to feature personal stories of five HIV-positve black men who have successfully navigated through the Continuum and reached viral suppression with short video segments.
Tackling this project was, at first, very challenging. There were a number of objectives the team had to consider. Our target audience was extremely mobile. Usually, with sensitive subjects such as HIV and AIDS, searches for information are conducted on small personal devices. Therefore, our content had to be mobile-friendly and easy to consume. At first, we weren't sure how to direct the user—give them the information first, or show them the video stories? Which was more important to the user?
Other challenges the team faced were how to make the site visually engaging and contemporary, but keeping accessibility in mind. Colors had to provide enough contrast and media players had to have keyboard controls. And while this site was supposed to be uplifting, what was the tone we wanted to set? Surely not laughing faces, but certainly not somber either. Each individual story was filled with emotional moments, but all our featured men were happy with their lives.
Visual notes after an interview with one of the featured men, Guy Anthony.
We went through a few rounds of user testing and focus groups during the process to make sure we were on track with how we wanted the site to look and function. In the end, we were able to experiment with alternate forms of navigation. One in which the user would be able to access either content on each individual stage of the Continuum, or follow one of the personal stories of the men. Both of which would be persistent.
At the landing page, users can choose a stage of the Continuum or pick a story at the tab on the bottom of the page. As the user scrolled through content, the tab collapses and side menu would appear (shown open).
Content was grouped with colorful graphics and broken up into different panels to help the user consume the information. Each section was short and to the point, with different headers to give the reader plenty of visual breaks and make the content seem less daunting and dense. If the user chose to follow one of the personal stories, they can load one of the pages and watch all the videos sequentially.
Content and video page views give each person their own personal space on the site.
The site launched with an accompanying social media campaign. Within one month, there were 7,500 page views and 2,600 video views, and 259 retweets on twitter. Many people reached out to the guys personally to thank them for sharing their story.
When the team first kicked off this project, we had a lot of ideas on how an app could be an effective tool to help people quit smoking. We wanted the app to be health-focused, positive and tailored to the user. More importantly, keep the user engaged through gamefication, stay entertained with fresh content and keep logging their progress. The team had some idea that we wanted to take the card-style approach, but weren't quite sure how to manage and deliver the different types of content.
At first, it was a mess. Some of our ideas were complex and a little lofty. But if we couldn't make the functionality and flow of the app intuitive for the user, then we had to scrap the idea. And if we couldn't make the app easy to use for someone who is probably on edge to begin with, then it wasn't worth forcing. In fact, it might drive the user to do the exact opposite of what we wanted.
We did eventually manage to simplify and edit our ideas from the whiteboard and start putting together a more cohesive flow. Whiteboard notes were eventually turned into a graphical outline and once we were satisfied with the overall idea, we drilled down into wireframes.
A much cleaned-up version of our initial ideas to share with the client.
There was some complication with the two main functions of the app. One was to deliver immediate content by allowing the user to let the app know if they were having a craving, if they slipped, needed a distraction or wanted to journal. The other function was to set the user up with personalized toolbox of actions and tips the user could take depending on when they were more likely to smoke, what their typical triggers were, or what their core motivation was. For a first-time user, should we send them to their toolbox or should we allow them to choose their actions? What should be the "home" screen? There were two schools of thought with this, as our subject matter experts said that the toolbox and creating a personalized quit plan was essential to success. However, that didn't provide the user to access fresh content right away. We definitely did not want the user to have to go through a tutorial before they could start accessing the app.
The adopted solution was to show the first-time user, in the form of one overlay where the toolbox was, a sample of their personalized content and allow them to check it out right then, or to dismiss it and come back to it later after they had time to explored the app. It ended up being a super simple way to make both parties happy without the least amount of burden to the user.
Image of the Toolbox overlay. A solution to satisfy all.
We wanted to deliver the tips, motivation, challenges and "FYIs" in the form of shareable cards. We used a variety of colorful backgrounds and textures because we thought it was fun and would appeal to a younger audience. The user could also add these cards to their toolbox, which included an arsenal of favorited cards. This would allow them to quickly get their hands on a tip or motivation was particularly helpful for them. Users can also create and share their own cards.
Samples of motivation, tip, and FYI cards in quitSTART.
Other features the app includes are badges for different milestones the user might earn, such as using the app frequently, saving money by avoiding cigarettes or just maintaining their effort to stay smokefree. There is also the ability create a journal and upload pictures about their progress. Another feature is a dynamic infographic about their stats called the "brag" screen that the user could share out to their friends via social media.
The "brag" screen. Users can save their image to their phone or immediately export it to their social media venue of their choice.
The team also had a great time designing the games featured in the app under the "Distract Me" option. All of the games had a different look and feel to allow for some variety within the app. We pulled other designers, not directly on the project, and gave them the opportunity to put their own style to some of the game graphics. Coming up with different concepts and names for the games were a fun departure from figuring out the other logistics of the app.
Float or Flop is remarkably similar to this game, but we created our own graphics (shown with initial sketch).
While some games are clearly modeled after other well-known games, we did come up with our own absurd ideas. Such as a hamsters that shot basketballs out of its mouth at you.
quitSTART is currently available to download via the App Store and Google Play.
TimeTek: A Timesheet App Prototype
I created this prototype of a timesheet app due to my frustrations with the current software my company uses *ahem ahem sounds awfully similar to timetek*. I used Photoshop to mock everything up and I animated it in AfterEffects. If this were really going to a developer, I would typically use Sketch and Flinto.
An overall look of TimeTek
For my timesheet app protoype, I actually drew inspiration from food-logging apps, such as MyFitnessPal. Typically, you enter your time in at the end of the day, so I figured the default view should be on a daily basis. Also, because you're probably working on the same codes from the day before, I thought it would be nice to have a quick swipe to add yesterday's codes. In addition to that, I wanted to feature Recent codes and favorites to add to the convenience of adding frequently used codes.
I played around with different animations and delays. In general, whenever you can add in an animation with little to no performance cost, I believe it adds to delightfulness of using an app. And, even though they seem merely cosmetic, the codes coming in from the sides hint to the user that the codes are swipeable.
However, to make it perfectly clear, at the inital screen, the first code could do a bounce reveal to signal to the user they could add the code. I always think, whenever possible, if you can do a subtle animated gesture, it is better than a sequence of onboarding screens telling the user how the app works.
Check out the video for a higher-def look at the prototype:
The National Foster Care and Adoption Directory App
The National Foster Care and Adoption Directory is a tool that was created for the Child Welfare Information Gateway program under the Children's Bureau within the U.S. Department of Health and Human Services. It aims to connect childcare case workers and prospective adoptive parents with adoption agencies and support groups. Our goal when designing the app was to allow users to quickly search by different categories and by location.
The splash screen and home screen of the National Foster Care and Adoption Directory.
When we first started working on the app, we took a look at how the directory was used online. It was clunky, visually unappealing, and pretty confusing. Listings for different agencies were grouped oddly, with the ability to sort by categories without any logical reasoning (why would anyone sort alphabetically by city? Why not within a radius of where the user was?). We thought we could do better and create an easier to understand experience.
This is a screenshot of the Child Information Gateway website.
We started by creating categories for different types of organizations - Agencies, Support Groups, State Resources, and State officials. This way the user could quickly drill down to where they wanted to go. We also wanted to steer clear of using the ever-polarizing hamburger menu, so we used a swipeable navigation style, so everything was more apparent and accessible.
Demonstrating the swipeable nav in map view.
The app offered two different views for each listing. If they didn't want to search via map view, they could also check out the organizations in a card-style listings. When they touched a card, it would take them to a detailed view. There was also a filter function in case the user was looking for specific services.
Organization detail view and filter menu.
We also added a few fun things to the app. Because the database was really slow (something we had no control over), I created a short loading animation, incoporating the logo.
The loading animation.
We also added a pull-to-refresh animation to the app. Although there probably aren't going to be a lot of changes to listings while a person uses the app, but we figured this would be a delightful easter egg. Originally, we thought it'd be nice to do a flying stork bringing home a baby:
This is animated stork pull-to-refresh concept that was rejected!
But the client said they wanted to concentrate less on babies, and more on the idea of paths being brought together. They sent this for inspiration.
This is what they said they wanted...
While I thought those were fantastic ideas, I reinterpreted their concepts and created this animation instead. Something along the lines of coming together to bring love into a home.
I created this instead using AfterEffects.
In the end, the client was extremely pleased, not just with the animation and bits of flourishes, but with the ease at which they could use the app and navigate though the listings.
511NY RideShare: An App for Commuters
I was recently put on a project to design an app for the 511NY Rideshare program. I came to the project late in the game and much had already been decided concerning the main function and flow of the app. However, the original designer didn't have as much app experience so the aesthetics were looking a little outdated. I quickly started bringing the app up to speed as there was an extremely tight turn around for product delivery.
Before vs. After. Giving the design a "native app" feel.
Fortunately, our app was actually pretty shallow in terms of functionality. We had a really simple idea, which was to ask the user to track their Rideshare commutes and in turn, they could see the benefits of their actions. They could share and/or challenge other users to match their stats.
User gets immediate feedback when they log their commute or they can access their cumulative stats in the Progress screen.
The team did have a lot of excellent ideas of how to expand the app, but with such a short timeframe, we focused on producing one thing as best as we could. This was a good thing. Delivering the MVP, or minimum viable product, could at least convince the client that this was an app to continue to invest in. In fact, with such a streamlined app, we now have the benefit of user testing—in real life!—and we could use that information to evolve the app.
Delivering in short sprints really allows us to determine frustration points and idenitfy areas which the user could see added benefit. For instance, the next phase could include expanding the database to connect users with others close by for carpool options. It could also in a completely different direction, where highlight the gamefication aspect and users could earn real-life rewards for participating in the Rideshare program. Not quite sure yet, but looking forward to the next phases.
Print Round Up: A collection of a random print and non-web materials
A Monkey See, Monkey do movie poster concept. It was just something I did for fun. I was experimenting with layering and textures and fun fonts.
Hey, we need a copywriter for ICF.
For this recruiting flyer, the writer and I wanted to do something a little bit more creative than just a bulleted list of key responsibilities and requirements for a copywriter positing at ICF. We decided that it would be fun to do short punchy paragraphs with lots of typography treatments and silly graphics. And I set the background of wadded up paper balls, because, you know, that's part of the creative process for writers. At least, the writers I know.
Wedding bells for Rebecca and Craig! Totebag, poster, and waterbottle.
Made these giveaway items for a friend's wedding. They're getting married in West Virginia and wanted to use the quote "I love you and I like you" from their favorite show Parks and Recreation ...so I married the two ideas (get it?!) to create these pieces for her.
Navy Child Development Homes Brochure
Another recruiting flyer I created for the Navy Child and Youth Programs. This actually is an editable PDF document that a recuriter could use to fill various positions and print out for job fairs. The goal was to attract young college students for part-time positions as childcare providers.
Navy Child Development Homes Brochure
This brochure was part of a package to help recruit potential child care providers for Navy families. We created a brochure, a postcard, and a pocket folder. The client requested that we somehow incorporated a "purple swoosh" that was featured in older, outdated collateral (that was created in a Word Document!!). In the end, we modified the swoosh so it was more of an abstract element, and gave the materials a modern feel.
5 Mobile Content Design Tips: An infographic
Since the time has come to do a little refresh AIDS.gov, it is just as important to consider a redesign of the content, as it is the look and functionality of the site. I was put to the task of creating this friendly infographic to remind the team about content best-practices for a mobile audience.
This is a short animated PSA I created for the National Eye Health Education Program, a program under the National Institute of health. This was a fun little project because I don't get to work in AfterEffects very often. It's pretty simple, and I had a lot of guidance for the look and feel already, but I loved adding in some flourishes and transitions and really making the video come alive.