Prototyping

For my app, now called Send App, I thought about one of the lessons from the chocolate box exercise: invite your users to dive right in. I love words, and my future living will likely depends on their continued existence on the web, but I recognize that it’s a much better user experience when little or no preamble or explanation is necessary.

This feels particularly appropriate for the function of this app, which came out of my frustrations for the amount of googling required to send something (flowers, food, or a care package) to someone. I started by thinking about how I could prompt someone to begin the experience right away and get what they need.

In order to do so, the app would need only two pieces of information: what you want and where you want it. I found a couple of examples of sites or apps that do one or both of those things well, including Seamless, Instacart, and Uber (side note: I think Uber’s “Where to?” is a great little tidbit of UX Writing).

IMG_84B512C20B93-1 IMG_78FAAF860C33-1IMG_7D5FE11F3E52-1

 

For my app, I settled on the simple directive “Send _____ to _____,” and set about using a combination of verbal and visual cues for the user to fill in the blanks.

For the visual identity, I wanted the app to feel simple and with the slightest touch of playfulness, since my primary use case involves people whose loved ones have faced a difficult experience. Here’s the muted but inviting (I think) color palette I decided on:

Screen Shot 2018-02-28 at 10.38.20 PM

 

Finally, I mocked up the experience, from homepage to retailer landing page. Below, the items that I showed are in bold, with the rest of the pages and experience laid out after:

  1. Home [choose category, location]
    2. Results Landing [optional filtering, select retailer]
       3. Retailer Landing [browse items, click on items]
         4. Item Description pops up [add item to cart, continue to browse]
    5. Cart [check out]
    6. Confirmation & Message to Loved One

Without further ado, the mockups are below or in interactive form on InVision.

Artboard 1@2x

Artboard 1 copy@2xArtboard 1 copy 2@2x
Artboard 1 copy 3@2x Artboard 1 copy 4@2x

Also, thanks to the creators of the many Noun Project icons I used. Credits to come.

Leave a Reply

Your email address will not be published. Required fields are marked *