— sarah makes a blog

Archive
Tag "ux"

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

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

To user test with my initial sketches, I asked the users testing my app to record a recipe, enter a title, ingredients, additional notes, and go back to the home screen. Since Balsamiq doesn’t support the ability to enter text, I simply had the users click to interact.

my initial sketches in Balsamiq

      

I tested the app on 3 users, and recorded their feedback as follows:

user #1
-understood app concept
-liked the ability to browse by ingredients, but frustrated it wasn’t yet built
-confused by ingredients list, didn’t know how to select or why

user #2
-understood app concept
-no submit button for typing in ingredients
-can ingredients below be dragged and dropped or are they something separate?
-categories helped define

user #3
-understood app concept
-didn’t like humorous titles; wanted clear instructions
-hesitated with ingredients screen

I did a lot of work to reshape scratch based on the user testing feedback and some additional mapping & planning. I still have a decent amount of work ahead of me, but I’ve made a lot of progress thus far.

I created a user flow map to decide on the main functions.

 

I created a simple, efficient home screen.

 I expanded on the functionality for the user to enter recipes.


Created a way to mark & view your favorite recipes, as well as view your recipe book.


And a way to browse new recipes from other users (in progress).


A view of an individual recipe page.
 

Started exploring the brand.

 

I then tested the app with a new set of users and my OmniGraffle wireframes. Based on their comments, I need to find a way to integrate tags into the recipe creation process more efficient. One user suggested I not call them recipes, since a recipe suggests a thoroughly documented assemblance of ingredients, measurements and instructions. My app is not for cooking novices: it’s for people who cook from scratch to mark down ingredients used to create a dish. So perhaps I need to coin a new term.

Another aspect of the app that needs to be refined is the “browse” section. My users thought the screen where you can search by ingredients was confusing & overkill. They were also confused about why searching by tags and ingredients were separate screens, which further proves my need to integrate tags more effectively.

Looking forward to finalizing the wireframes and starting on the visual design concept!

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

Create a new product that rethinks user experience.
A pretty demanding assignment, but something exciting to explore. I tried to pull inspiration from my daily life by listing some basic tasks I encounter. As soon as food came up, things got interesting. Story of my life. I may as well start admitting I’m a huge foodie in an attempt to avoid labeling myself an addict.

my brainstorm


expanding on some of the ideas above…
 

portion control dish
The ceramic dish is formed to the [estimated] shape & size of the user’s stomach. The concept presents a creative and matter-of-fact way to avoid overeating by only consuming the amount your stomach can hold. (I also found some fantastically creative ceramic dishes while researching this idea.)

ingredient-savvy cooking device
A cooking device that detect levels of unnatural & chemical-based ingredients in food. The example below is I used Fooducate as a resource for nasty chemicals people may want to test their food for. Chemical Cuisine is also a fantastic reference. But if the person is already cooking, then finds out there are chemicals in the food, what can they do with the information? Do they throw out the food?

a smarter gluten test
I read a lot about gluten testing this week. A company called GlutenTox sells kits to test foods for gluten in the home, and  a (strangely soundless?) video describing how to use it.

The steps to test food for gluten are as follows:
1. Chop the food with a knife (knife/cutting surface not provided)
2. Grind the food with a mortar & pestle (not provided)
3. Scoop out the powdered food with a provided spoon
4. Pour the powder into the first testing container (provided)
5. Shake rigorously for 2 minutes
6. Let it sit for 5 minutes
7. Draw out 2-8 drops of the liquid with a provided pipette
8. Drop contents into second testing container (provided)
9. Shake gently for 15 seconds
10. Add 5-6 drops from a second pipette onto the test strip (provided)
11. Wait 10 minutes to receive results (may not be accurate after 10 mins)

There’s got to be a way to eliminate or refine some of these steps. One idea I had was to create a testing bottle with the pipette already attached to the lid. It seems like a small victory in simplifying the process but at least it’s combining a few steps. I’m wondering if there’s a way to save our landfills and avoid tossing all the instruments without endangering someone with a gluten allergy. This is definitely a user experience that could use some creative input.

 

 

Read More