— sarah makes a blog

Archive
Tag "user experience"

I’ve been completely floored by the overwhelmingly positive response User Experience of a Heartbreak has received. I had hoped it would resonate with people, and it seemed to do so when I showed friends and colleagues the early versions. But I didn’t expect to see so many people embrace the project after it was published. I did snoop twitter quite a bit (not incognito, either!) to see what people thought. Here are some of my favorite responses:

The process of creating ux3.us has been difficult, but so incredibly rewarding. When I first began making it, I didn’t realize I would end up feeling so wonderful about something that initially made me feel awful. I’m really fortunate to have been able to share that with people. Also worth mentioning– the project is ongoing! I still have bunches of content to add, and will continue to update it as interfaces change. In addition to the emotional connection, I hope it’ll be an interesting look at how the design of these sites and interactions change over time.

Thank you again to Jessica Leber and FastCo.Exist for getting the site out there, and to Design Taxi for sharing it. Was also great to see it up in Brainstorm9 and Yorokobu, and to know that the experience seems to be universal.

Screen Shot 2014-10-20 at 3.55.03 PM

Screen Shot 2014-10-20 at 4.42.31 PM

Read More

I’m very proud to be *officially* publishing my project User Experience of a Heartbreak.

UX3.us is a series of animations that describe what it feels like to use technology while going through breakup, and how evidence of you and your past partner seems to turn up almost everywhere. Not unlike the stabbing feeling you get in your gut when a song comes on that reminds you of your recently departed lover, technology holds evidence of your relationship that it can spring on you unannounced. These moments, though typically very mundane, can suddenly become irritating or even extremely amusing. Like somehow your phone and apps and computer and browser are all in the know about your personal life & emotions. (Which they kind of are.)

While going through a breakup last year, I decided to start taking screenshots to document these moments. I was surprised that it hurt to be “blocked.” I didn’t realize how many times I’d programmed his name to be the answer to my password security question “Who is your best friend?” And, to put it lightly, I did not appreciate his new partner being recommended as a “suggested friend.” In the smallest of ways, the internet seemed to have preserved our relationship (and its demise) in some sort of limbo–  with what had become these very superficial connections. It was the first time that my life online didn’t feel at all like my real life.

goog-fb1

In addition to documenting, I also did some searching. The first thing I googled about my breakup was “does blocking someone on facebook end relationship.” But before I had finished typing, Google’s suggested query results appeared, and I stumbled upon this remarkable phenomenon of incredibly heartbroken people online– and they were trying to help each other! I’m talking Yahoo Answers forums from 2008, everyone cloaked in an anonymous avatar, saying things like “my ex wrote me an email and i don’t know if i should write back what should i do?”  And then a series of answers like, “dude don’t do it, step away” or the more insightful “Even though you still care for the person, you should really take the time to think about how this affects you.”

Screen Shot 2014-10-16 at 9.24.39 PM

I was kind of awestruck. Here were all these people experiencing this insanely painful thing, and these moments in time where they had trusted the internet to help them solve their problems. And it’s all archived for what I can only imagine is a very, very long time. All of these snippets of time, where this person or that was feeling so extremely vulnerable, is saved in some server somewhere. Even if that person is no longer heartbroken, or has been healed and heartbroken 3 times over since that post, that snippet is still alive. Whoa.

(Here’s one of my personal favorite sites. Even at a glance you can see how many people have shared story, after story, after story.)

It’s kind of wonderful that people look to Google for answers on anything from 2+2 to something incredibly personal.  Like, Google’s goddamn amazing ‘Parisian Love’ ad from 2010 was not messing around. I wanted that experience to be the landing page for my site so anyone who visited could identify with this heartbroken character who was just trying to find answers and get better. All the queries used on my site are taken from real searches. The animations are all versions of moments I experienced or that I imagine someone else has. There are so many more to add! I illustrated everything by hand, but of course all design is credited to the corresponding sites and applications.

I’ve read quite a few interesting articles related to my project. Here’s a handful:
Tangled Web of Memories Lingers After a Breakup,
Chat History Remembering a Relationship, One Chat at a Time
,
Bubbles Carry a Lot of Weight, and
People Feeling Insecure About Their Relationships Post About Them More on Facebook

I was also so incredibly inspired by
What Love Looks Like,
Screenshots of Despair,
AutocompleteMe,
Google Poetics,
Coding in Love,
Sorry I Haven’t Posted,
Old Loves,
The Ex-Lover’s T-Shirt photo series,
Holy Cow Lisa, and
the writing of Sasha Fletcher & Marie-Helene Bertino

And am very grateful to Alvaro Trigo and whoever made this for sharing their code to help the rest of us build sites that look half decent.

And of course so so many thanks to these folks who helped way more than they realize.

XO

Read More

Had such an awesome time presenting my work at the Dumbo Arts Festival this past weekend that I forgot to document! I kept nervously looking over at my piece all night, seeing groups older folks who “got it,” friends and couples LOL (or argue!) and teens taking selfies in front of my work. I also saw people walk away with a very specific “UGH INTERNET ART” look on their faces, which was somehow equally as satisfying. Next time I’ll take more #picsoritdidnthappen.

It was such a great opportunity to test my site and to see how people reacted to the printed versions of my illustrations. More work to be done before I publish! SOON. I’m so grateful to have been a part of DAF 2014, the Front Street Galleries & the Office Hours group show with my fellow 2013 ITP Residents! What a killer way to end our time together.

2014-10-03 11.50.22

2014-10-02 18.24.20 2014-10-02 19.02.53 2014-09-26 18.55.44

A few awesome instagrams I found:

(comments worth reading on this one)

Read More

Some images of how my recipe iPad app is coming along. I’m thinking it might be nice to use the icons at the top as the menu, and eliminate the side menu. It took quite a bit of sketching to get it to this point, but I’m happy with the progress so far.

Read More

I built the first round of wireframes for my mobile app concept, scrat.ch, and had 2 users test it. As always, the user testing was extremely helpful. They got caught up in places I did and didn’t expect, and their confusion will definitely help guide my second round of designs. Working in Balsamiq was nice & quick, but I’m planning to transfer everything to OmniGraffle so my final presentation is more refined.

The idea behind the app is to create an easy way for people who cook from scratch to record & share their recipes. Here are some stills of the initial wireframes:

      

Read More

I didn’t get as far with the Great Buildings wireframes & design concept as I intended, but I reorganized the Flowchart and mocked up the index page. Here are the updates:

Read More

I decided to revisit the product creation assignment I completed for User Experience a few weeks ago. I wasn’t satisfied with how open-ended and unfinished my outcome felt, and I’ve had a new idea nagging me since I turned it in. I wanted to focus on food & diet; specifically avoiding the consumption of things that are harmful to your body due to allergies, intolerances or other reasons.

I attempted to simplify food testing for people with gluten intolerances, which is an incredibly involved process. Although I didn’t articulate it well, my basic idea was to have the gluten test built in to a mortar & pestle– taking the first step of traditional gluten testing and making it the last. I got caught up on the chemistry involved, though, and felt frustrated when I started to design an idea with a weak infrastructure.

My second idea was more whimsical– a portion control dish shaped like a stomach organ, meant to prevent overeating. The dish would come in customized sizes/shapes based on the person using it. I’d like to revisit the sketch of that idea and create a prototype in the near future, but it didn’t feel like and ideal interpretation of the assignment.

The idea that I kept brainstorming about me since then is a set of kitchenware that detects pesticides in produce. One mistake I made in my last design was testing food that had already been cooked. This is poor design because it’s not useful to the user. If their food is contaminated in some way, but they’ve already prepared a meal, will they be forced to throw it out? I realized this as I was posting the assignment, so I decided it smarter to focus on food preparation items instead of cookware.

The illustration below features a colander that detects the level of pesticides contaminating the food that’s being washed. The level is indicated by a color-changing rim on the top of the device. The sensor (which does not exist–yet!) is located near the base of the colander, where the water gathers as it flows out. The concept includes the idea that users can see how clean their food is in real time until it’s safe to cook & eat.

I also thought of expanding the line to include cutting boards & knives, but ultimately the user would need to re-wash the produce. So the colander is the most useful tool in this concept.

The Environmental Working Group (EWG) was a useful resource while researching this idea.

Read More

Our most recent assignment in our User Experience class is to rework the atrocious site greatbuildings.com. The site has such a wealth of information and so much potential, and rebuilding it is an incredible challenge. I had a lot of trouble with the flowchart and jumped right into sketching wireframes. It’s so hard to start from the ground up when I immediately have an inspiring vision of the UI in the back of my mind.

The process of sketching wireframes/flowcharts, then bringing them into OmniGraffle and refining, refining, refining has been an excellent learning experience for me. For this assignment, I’d like to focus on the “submit” and “search” functions because they seem to be the most important aspects of the existing site & RFP. Here’s round 1 and 2 of the flowchart and wireframes.

initial flowchart

flowchart in OmniGraffle
 

initial home page + submit functionality sketch

submit function in OmniGraffle
 

second run of home page

home page in OmniGraffle
 

search results sketch

Read More

StreetRep is a mobile application concept for a form of local currency, where your reputation is processed into points that can be spent at local businesses. The community member earns points (on the honor system!) by checking into a location and choosing from a list of pre-determined good deeds available at that location.

The system of cashing in points (not illustrated below) has a similar usability– all available deeds and rewards are defined in advanced by the businesses that participate. In addition to rewards, the community members may also earn medals & badges; as well as be included in a community-wide ranking system so see how their reputation matches up with other local members.

I created the wireframes/design below using the fantastic Konigi wireframing stencils for OmniGraffle. The icons & logo were designed by D.I. Shin. This project was completed in collaboration with D.I. Shin and Doug Kanter.

final design

 

original sketches

I put the original sketches together without much content so we could relay our concept to the class. We hadn’t agreed on the final usability of the app, so these visuals weren’t a successful representation of what we were developing.

second run

For initial concepts, I find sketching by hand a lot more rewarding than sketching in OmniGraffle. It’s a faster way to explore possibilities without getting caught up in the vectorized glam of OG. Additionally, we focused our concept to a place where I was able to convert our ideas into a logical user experience & visual design. The hand-drawn sketches (though messy) were a much greater reference than the originals as I continued to refine the app.

evolution
launch page
 


home page

take action process (to earn/spend points)
    
 

 
user profile
  

 

Developing the app from initial ideas to a refined sketch of the concept was a lengthy but extremely rewarding process. I purposefully saved as many iterations as I could (without going too overboard) so I could track my progress. May not have been so lengthy if I wasn’t such a n00b in OmniGraffle, and so anal about details. May not have been so rewarding if it wasn’t so lengthy. Win-win!

Read More

I’m getting a good dose of wireframing experience working on our StreetRep project for Be Here Now.  Initially, I worked in Balsamiq (which I had previously dismissed, but am now warming up to) to create a web-based application. I got stuck on information architecture, especially since we were still working out the basic mechanics of our concept. It was a really great learning experience, albeit slightly frustrating. I really enjoyed the interactive elements in Balsamiq, but I still can’t get over the cutesy vibe. Gross!

screencast of web wireframes

After meeting last night, we decided a mobile platform was more important to focus on since it’d be used more often than the web-based app. Our project, StreetRep, is a currency based on your local reputation. A member earns points by being active in their community– reporting broken windows, cleaning up the park, etc.– and spends points at any  local businesses. I put these mobile wireframes together last night in OmniGraffle to give a taste of what we’d like to include in the app. they’re far from complete, but a good first draft.

I’m having a great deal of difficulty turning off my designer brain and using my UX brain, so what has resulted is some kind of half-usable, half-pretty monster. I can’t wait to continue developing this project through next week. Huzzah!

StreetRep mobile wireframes

Read More