Refining the MVP

Since our team was living the problem day-to-day, we decided to build the product for ourselves. I spent the next two months during the shutdown developing the IA, wireframes, user tests, high-fidelity UI and provided the art-direction for our illustrator. My friend developed the front-end and back-end infrastructure for the PWA and pushed it live to his Github. To kick-off the project, we aligned on the core problems we were trying to solve and used our self-interviews to direct our focus during the rapid build process.

Core Problems:
  • Out of date information on food/necessity availability
  • Limited information on food/necessity availability
  • Price gouging on items in limited supply
Existing Solutions:
  • Using texting chains to ask friends/acquaintances about availability of items
  • Going to the store anyway (and exposing yourself to virus risk) and coming out empty handed
  • Checking store websites (often unreliable)
MVP Requirements:
  • Map view with locations of stores
  • Ability to search for particular essential items (e.g., toilet paper, chicken, beef, veggies, disinfectant, etc.)
  • Ability to post availability and quantity of essential items at user’s actual location with price, date/time labels and accompanying images for verification

Designing the Primary User Journeys

While the team had a good sense of what features we would need to solve our own problem, we needed a clear user journey map before we could begin making design decisions across the full experience. Our goal was to launch a v1 of the MVP ASAP, however, I needed to make sure we accounted for future-state user journeys as well so that I could lay the groundwork for a robust design system.

Testing the Wireframes

After the wireframes were completed, we put together an Adobe XD prototype to begin rapid usability testing. We sent it to our network at work and at home to start evaluating whether or not we were accomplishing our goals and creating an easy to use digital tool.

You can visit the live wireframe prototype we used for testing here:
https://xd.adobe.com/view/5fc74a76-c837-4345-556d-c09233da8e89-29f6/

We ran a mix of unmoderated and moderated tests over Zoom. To our surprise, we didn't find any usability issues or major concerns. With testing done, we turned our attention to refining the user interface, color palette and branding as our back-end developer constructed the architecture and set up the necessary database for collecting user account details and inputs.
‍

Crafting the Brand Platform

Beginning with the brand platform, I defined a set of personality traits that embodied the nature of our tool. The messaging across the app needed to be supportive given the level of urgency most of our users would be feeling while using the tool. The UI should be bright and loud to align with the grassroots qualities of a crowdsourced approach. Lastly, our illustrations showed evidence of humanity by exposing texture and the handcrafted brush strokes that made them.

Designing the User Interface

You can find the high fidelity prototype at the following link: https://xd.adobe.com/view/5999d146-2e37-42ca-b6e6-a0968fe80009-0cca/?fullscreen
Once the app was well under way and my initial designs were looking promising, I began documenting a component library that could be repurposed into a design system for our developers.

Special Note on the Art Direction

With our brand attributes defined, I ventured out to find an illustrator that could take our web app to the next level. I provided her with direction on the number of illustrations needed, style direction and a few initial illustrations I made. Susan Lee brought our vision to life with her organic and textural illustrations.

Outcome & Lessons Learned

By the end of our four-sprint jam session, we had a functional prototype that users could interact with, report nearby supplies and find pins on a map when local stores had an essential item in stock. However, with zero marketing budget and our commitment to our full time jobs, the app exists as a proof of concept for a future emergency support tool that could have a compelling use case during natural disasters and times of chaos. We had a lot of fun building the app and learned about the many different open-source mapping solutions in the market.

One of the primary lessons we learned during this project was that one of the first questions we need to be asking ourselves before starting any future projects is "where are we going to be getting the data from that makes this tool work?"

Live hosted web app (view on smartphone or in a mobile view using the dev tools of your preferred browser): derms-66f5b.web.app
‍On Github here: https://github.com/allen-n/derms-pwa