Everyone For Veterans - Mobile App Design Volunteer Project (WIP)


About This Project

Project Rationale

The non-profit Everyone For Veterans  started a grassroots effort to provide free dental care to low-income war veterans. They are now expanding that effort to include other free services or goods for veterans, and I've been designing an  app that will allow community members to donate those goods or services to local veterans. It's a project I'm proud to be a part of, and excited to share with the community. This is a work in progress, and I will be updating the work shown here as I complete new deliverables.

Design Features

As mobile use is so prevalent in many age groups, and because low-barrier use can be facilitated by contextual, location-based mobile notifications, a mobile-first approach was chosen. I focused on making sure buttons and pickers were mobile-friendly, with concise descriptions and only one or two CTAs per screen.

Design Constraints

Most of the constraints are development-centered. I chose to do a web app versus a native app, as my coding skills are strongest in that area, I am the sole designer and developer on the app, and we wanted to release it as soon as possible.

The other noteworthy design constraint is related to security. The number of veterans a user can interact with, as well as the veteran’s contact information, is limited.

My Contribution

Team and Timeline

I worked on this project as time allowed, in a volunteer capacity. I was the sole designer and developer on the front end, but consulted other developers, and collaborated with database engineers.

Design Process Overview

  • Gathered feature requirements from stakeholders
  • White board sketch of screens
  • Screen flow – 3 rounds
  • Wireframes:
    • Round one – general features
    • Round two – Android-specific
    • Round three – Bootstrap specific
  • Database ERD
  • Pattern library
  • Redlines
  • Development – HTML/CSS in Bootstrap, with Ruby on Rails and MySQL

Design Process Details and Deliverables (excerpt)

Screen Flow

As I worked on the screen flow, Iteration 1 was more of an outline of screens. As I moved on to the second iteration, I was able to drill down into the flow details, For instance, the Forgot Password flow was expanded to include a waiting screen while the link is being sent, the screen that allows the user to actually change their password, and a confirmation screen.

From Iteration 2 to Iteration 3, I refined the process of accepting and completing a mission with a focus on making sure that veterans will actually get the help they need. For instance, I added notification screens that would remind the user to both contact the veteran and complete the mission. If the veteran isn't contacted within a two-week timespan, that mission will be moved from a user's Incomplete Missions back to the New Mission dataset. If a user fails to complete 3 missions, their account will be locked.


Wireframe Excerpt


Pattern Library Excerpt


Redline Excerpt