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.

Journey Map

I’ve been thinking about distance. I was planning to go forward with my idea about creating an app centered around long-distance relationships, but then I got a new inspiration. I called my parents in Boston a couple days ago, and discovered that my mom has been laid out with the flu and my dad had a bike accident and broke his shoulder and a rib. I’m in New York, busy with work and classes and thesis, and there’s not much I can do to help them out except send something or order something to be delivered to them.

I think that’s a more difficult experience than it needs to be, though. First, there’s the question of deciding what to get them (should I order flowers for morale? groceries for practical sustenance? a nice meal for delivery?). Then, there’s figuring out where to order from. Thankfully, I know the stores in my parents’ neighborhood, but what if I didn’t? How do I know who delivers and to where without checking each individual site?

For my new idea, I want to create an app that makes this process more seamless. I’ve started by mapping out the journey between a “loved one” (the person who is sick, has an injury, or has undergone some other difficult event), the “user” (the person who wants to send something), and the “vendor” (whichever store or service sends the gift). One charts, the steps, one designates pain points, and the other maps out emotions.

 

1.

Artboard 1@2x
Step-by-step journey map from Loved One’s injury to Loved One receiving gift

 

2.

Artboard 1 copy@2x
Journey map with pain points. The largest ones are: 1) not knowing what kind of gift to send, 2) finding a vendor among so many and knowing if they deliver and to where, 3) not always knowing what the status of the delivery is, and 4) the Loved One’s wait time

 

3.

Artboard 1 copy 2@2x
Journey map with emotions. Red and dark red are bad feelings, and yellow is positive.

Three People

Here are descriptions of three people I care about for the first step of brainstorming a final project for Designing Meaningful Interactions:

 

1. Michael 

IMG_6241This is Michael. He’s a 28 year old living in Somerville, Massachusetts. He likes tending to plants (like the fiddle leaf fig he found on a sidewalk three years ago and nursed back to health), perusing the internet for strange odds and ends, and drinking inordinate amounts of flavored seltzer. Michael has trouble getting out of bed in the morning.

This is a problem for many reasons. First of all, he’s second year law student, and that requires a lot of time and energy. He has a lot of reading and cares about doing it thoroughly, and he participates in a couple of extracurriculars. He has also recently has decided to commit himself to going to the gym almost every day, a task that requires him to find bits and pieces of time in his day and scrap them together into enough extra time to run on an elliptical or lift some weights. Michael has no time to spare pressing the snooze button every eight minutes for an hour.

This is also a problem for his girlfriend (me). Whenever Michael needs to wake up before I do, I, a light sleeper inevitably wake up too. We live in different cities, so I don’t factor in too much to this problem, but it would still be better for both of us if he could somehow find a way to get up quickly in the morning.

For Michael, I want to create something that makes it easier for him to get out of bed in the morning—possibly an alarm that forces him to leave bed or solve a puzzle to turn it off. I know many people have the same problem and could benefit from this tool.

 

2. Jessica

IMG_5551

This is Jessica. She’s a 31 year old who lives in Bedstuy with a hound mix named Florence Nightingale, enjoys discussing shitty reality tv with her younger sister (me), and has a Spotify playlist comprised of hundreds of songs that are all perfect for long drives. She can’t stop reading the news.

She is a producer at MNSBC, so it’s her job to stay informed, but the compulsion to check Twitter carries over into other areas of her life. Out at brunch together, I’ll often find her peaking over at her phone on the table. This obsession been particularly exhausting and emotionally draining in a year dense with (often terrible) news.

I want to create a tool that helps curb the desire to check the news all time—or prevents the checking altogether. Since the news is often been tied to negative feelings, I also would want this tool to include a therapeutic aspect, that helps relieve the stress that comes from following current events.

 

3. Sara

IMG_7408

This is (a drawing of) Sara. She turns 29 next month, works at a nonprofit that is often at the center of alt-right conspiracy theories, has run two marathons, and likes to cook meals that make the apartment that we’ve shared for 3.5 years smell great. Recently, Sara entered into a long distance relationship with a man who lives in Texas.

The relationship is relatively new, and so they have been experiencing the dating phase from afar. But they’ve managed to do so creatively. Together, Sara and her new gent spent a night creating sourdough starters over Facetime, then they baked bread with it when they were together. They have done yoga classes and watched movies together while on Facetime and have texted up a storm.

For Sara, I would want to create something that makes a long-distance date easier, whether by providing the ideas, easing communication, or helping to create more of a sense of physical presence. (Full disclosure: I’m also in a long-distance relation—see above—and stand to benefit from this tool, too).

Designing Meaningful Interactions: First Assignment

For our first assignment, we had to write about an everyday object we think has a good user experience, and one that is frustrating. Since the frustrating object came to mind immediately, I’ll write about that first:

 

Bad Design

I hate my coffee maker. In the three and a half years we’ve lived together, my roommate and I have begun the search to replace it at least 20 times, but our terrible little Mr. Coffee machine has somehow managed to survive.

Where to start with its flaws?

The coffee pot
Somehow, it is designed to spill every time you pour it. Instead of emerging from the lip of the pot in a neat stream, it leaks down the side of the pot onto the countertop.

The fix: Our solution has been to pour coffee over the sink. The better solution for the makers of this machine would be to test and iterate on the current design until they come across one that doesn’t spill. I’ve seen coffee pots that don’t spill; I know it’s possible.

The program interface

IMG_6821
It occurs to me now that this could probably use a cleaning…

With my coffee maker, you can brew the coffee immediately or set a delay time to brew it later. The problem is that the buttons for these two features look exactly the same, are stacked, and only distinguished by text that has rubbed off in the last few years. As a result, we have woken up several times to cold coffee.

The fix: To further distinguish these buttons, I would make them more distinct either in shape or location on the interface. If the Delay Brew button lived to the right of the Brew Now button instead of below it, for example, it might better signify a delay in time.

The water place (I’m not sure what this is actually called)
The compartment that the water goes in has a small opening, and the “window” on its side is foggy, making it hard for the user to detect how much water she has poured.

The fix: For the former, we have discovered that the extendable nozzle of our kitchen faucet can stretch to the coffee maker, making it easier to get water into the compartment. Another solution for kitchens that don’t enjoy this proximity could be a detachable water compartment. The user could take it out of the machine, pour water from the faucet in the sink, and replace it.

For the foggy window, the easiest solution is to use a better material that will allow the user to see the water through it. Another fix could be including an LED in the compartment that the user could switch on if she’s having trouble seeing the water level.

 

Good Design

conditioner

A few months ago, I switched over to a conditioner in a container with an push-down nozzle, resembling a giant soap dispenser. It was a great decision.

The design of this bottle saves me no more than five or ten seconds per shower, but that adds up after a daily (or sometimes every-other-day, I admit) shower. I don’t have to pick up a slippery bottle and risk dropping it on my toes, and with one press of a pump whose rounded top invites pressing, I have the perfect amount of conditioner in my hand. It’s such a simple interaction, but I appreciate it so much.