“Grafik: A Social Drawing + Storymaking App” - Wireframe
Product Design, Interaction Design
Apr - May 2013
Grafik (tentative name) is an app idea I had based on work for my final thesis project in design, VIZKIDZ, which I’m working on with Sofiane Berlat.
The idea came from the fact that there are fun social drawing apps like Draw Something, but no one (as of yet) has integrated the idea of using the back and forth drawing to tell a story collaboratively.
Being able to share the stories afterward seemed like an essential part of the process of making a story - what do people love more than sharing their stories?
Wireframes created in OmniGraffle, screenmap created in Adobe Illustrator.
The final project for my “Advanced Needfinding” class was a 4 week project for a corporate client, FitBit.Our assignment was to explore the pet/owner relationship in a specific user group of our choosing, use ethnography, observation, and interviews to come to a deep understanding of the user group and present our findings to FitBit to help guide their future design choices.
Our final deliverable was a presentation (selected slides pictured, full Keynote here) delivered to a group from FitBit along with a written report.
My group - Tania Anaissie, Nick Chen, and me - chose to explore therapy cat owners’ relationship with their pets.
LOOP is the result of a group project in ME115: Human Factors in Design, a needfinding-driven class in Stanford’s product design program. For this project, our initial prompt was to re-design an aspect of the travel experience, excluding parts that take place inside the airport or on the plane.
We threw around a number of initial user group ideas and decided to do some quick interviews with people from extreme user groups. Some insights:
Fencers have a huge amount of equipment to carry for competitions that can happen in different countries weekly, but they aren’t allowed to carry their swords in the cabin even though they’re really afraid of having them lost on the way to a competition.
Pets usually need to be sedated along with travelling in the cargo hold at times, which makes owners understandably worried about the welfare of their pet during the flight, and they don’t like being not being able to check on them
People moving to another city freak out about not bringing everything they need with them because many cut it really close, only going to their final destination a couple of days before their job starts and expect they won’t have time to go out and buy replacements for everything they forgot
However, we settled on people in long-distance relationships as the most interesting travelers, particularly because we were excited about designing around an emotional experience.
Our main findings and the POV we created are shown in the illustrations to the left - the biggest issue for the long-distancers we talked to was missing the lack of small physical gestures with their significant other.
Before we began prototyping ideas, we had to come up with some. Each person in the group spent some time before our work session coming up with a few ideas for solutions, jotted them down on post-it’s, and brought them in to show everyone else. Starting to come up with ideas separately worked pretty well for us because we all had different interpretations of our POV statement and came up with a diverse set of ideas.
For the first 20 minutes, we restricted our sharing to things that started with ‘yes, and…’, or ‘we could add [this feature]…’ which fleshed out some of the ideas. For example, Michael came up with the idea of a countdown until the next visit, and I suggested that it use units like seconds instead of days or weeks because with seconds, the counter would be decreasing while the user watched.
Next, we sat down (we found that standing up made us more active during the brainstorm) to decide on which 3 ideas to prototype. Since we had come up with some solutions that were very different from each other – some dealt with the journey to see the boy/girlfriend, some dealt with the sad trip back, some addressed emotional needs, some addressed practical needs – we decided to select our 3 favourite ideas that were also the least similar. We settled on:
Prototype 1: A wristband (like a Livestrong band) that each partner gets. It pulses with their heartbeat, so when it speeds up you’ll know they’re scared, and then they can reassure them by squeezing the band which will make their partner’s squeeze.
Prototype 2: A gift-box that would be given to the visting partner on the drive to the airport at the end of their trip, containing a present. It would only open when its GPS-sensor recognises that the visiting partner is back home, so they have something to look forward to on their plane journey back (rather than being sad and nostalgic for the trip they just took).
Prototype 3: a countdown clock, showing the number of seconds until the user sees their partner again. We went for a physical time display because we thought it might seem more personal, but wanted to test to see if user’s responded to this.
Then it was time for user testing! The feedback from prototypes was most positive for our first prototype, the band that a pair of people wear.
A few interesting things came up in the testing:
One user asked on first seeing the prototype if “it was meant to be something that shows you’re in a relationship” – something to potentially think about is whether we want the band to be discreet or very visible. It seemed to vary among the users we talked to, so we thought about making multiple versions as a product line if we took the project beyond the class.
The initial idea of the band pulsing with the heartbeat of the other person was resounding described as “creepy” and “like having the Telltale Heart on your wrist.”
Finally, most people suggested that they liked the idea a lot, but felt like it would benefit from having some feedback so they know their message is being sent.
People also liked the GPS box, but there was a general feeling that although the GPS box was cute, it seemed like more of a one-time gift that wouldn’t be reused.
Based on this feedback, we decided to iterate on the wristband idea, but this time with a prototype that would reflect some of the changes suggested – we took away the pulsing of the heartbeat, and added a prototype of a light that would demonstrate that the other person had received the squeeze.
The final image is the revised prototype, which got a more positive response when we demonstrated it.
The scope of the class project didn’t include another iteration, but we got some feedback that we’d work on if we took the idea further in our own time:
Expanding the range of relationships covered by the bracelet - we settled on the wrist squeeze at first because I suggested it to the group as a gesture with multiple meanings - my mum did it to reassure me about getting a bad test score in elementary school, while my boyfriend also does it to let me know he loves me. We planned out ideas for a range of bands that could be used for any pair of people who end up spending some time apart, like a kid going on a school trip and his or her parents.
The Broken Arrow Lamp is the product I designed and manufactured over the course of 10 weeks for my Manufacturing & Design class at Stanford.
The project involved learning a number of processes in the Product Realization Lab at Stanford, including using the mill, precision shearing and bending of sheet metal, and laser cutting, as well as some simple electronics, creating CAD models in SolidWorks, and a LOT of prototyping and trial and error.
Maybe the toughest class I’ve taken, but easily the best.
Alex Stadnyk asked me to create a pair of labels and mockup of a website for the small hot sauce company that he and his father run from their home in Houston, Texas. I’d never done packaging or branding design before so of course I said yes.
Their artisanal products are different from a lot of other hot sauces that use habanero and scotch bonnet peppers. The two pepper varieties are incredibly hot, so most sauces that use them market themselves are being sauces for thrill-seekers that could cause severe tongue-burns. Alex and his father deliberately diluted the spice of the peppers with organic carrots and sweet potatoes to bring out what they really love about the peppers - the complexities and subtleties in their flavours. Therefore they wanted to create labels that got this unique vision of hot sauce across.
My first thought with the sketches was that the brand was about the personalities of the peppers. Although I grew up neither as a Christian nor in America, I was introduced to Veggie Tales as a freshman, so they were the first ideas that came to mind. The name ‘scotch bonnet’ also made me think of clothes, and so I considered dressing the vegetables up.
Still, the whole ‘cutesy’ thing with food can be a bit annoying, so in my first sketches, I cut the faces. I also tried to avoid overusing the three colours that seemed to crop up in the most aggressive possible arrangements in a lot of hot sauce labels: black, red, and yellow.
In the end, I stripped it down a bit to remove the carrot, even though I liked the leaves vaguely resembling a cool haircut, because someone pointed out that it made them think of the Calvin and Hobbes sketches where they’re dressed up as vegetables for the school play. Not using black also passed up the opportunity for some high-contrast minimalism. I did however like the fonts I used to go for a slightly retro home-grown vibe. From here the edits were pretty small - adding the nutritional info and text on the right (which was part of a strategy to link to a website to tell more of the story).
How Do You Visualise the Journeys of 100,000 People Over 9,000 miles that Took Place 100 Years Ago?
Chinese-Canadian Stories is an ongoing collaboration between Stanford University’s Spatial History Lab, where I work as an undergraduate research assistant specialising in interface design, and Professor Henry Yu at the University of British Columbia. The project focuses on telling the story of the nearly one hundred thousand Chinese immigrants to Canada from 1885 to 1949. The current site for the project is located at http://ccs.library.ubc.ca.
As part of the collaboration, I am working with the Spatial History Lab to produce a flagship mockup that visualises the patterns in the data. This is by far the most challenging design project I’ve undertaken - the dataset includes nearly 100,000 people, spans 64 years, and includes details down to their height, the Chinese town they stayed in before departing for Canada, and even the vessel they took to Canada. The visualisation has to function as both a useful tool to academic researchers which can provide information on trends which none of their existing tools like ArcGIS can provide, while also being interpretable and visually appealing enough to attract hobbyists and laymen.
The project took 4 months of extensive research, sketching, trial and error. The images above illustrate some of the steps taken on this incredibly rewarding journey.
The initial research interest of the professor was ‘chain migration’ - the phenomenon of migrants to Canada then bringing their family members or friends from the same village to Canada. Image 3 is an early sketch I did of a low-scope idea to show the peeling off of paths of migrants from the main port of arrival in Vancouver.
Struggling with the idea of visualising so many relationships, I also came up with the idea of taking a smaller subset of particular interest (Image 4) - in this case migrants from two villages in Tai Shan district who mostly ended up in Montreal and Vancouver - and creating a network map of relations.
At the next stage, we then realised that using the Tableau software, we could quite easily organise the data into timesteps showing the progression of migration. This coincided with our discovery of a distinct migration pattern within the 1912-1923 period, which was likely affected by changes in migration legislation, economic booms and depression, and the First World War. My co-researcher Stephanie threw out the idea of moving balls representing people, leading me to produce this mockup.
In this first mockup (Image 5), the left panel contains an animation that displays series of pie charts that shrink and grow month by month as immigrants leave China for Canada. Small dots, coloured according to which Chinese county the migrant came from, move along the pipes to illustrate this movement. The right panel allows users to see more detailed information about the migrants from or to a certain region or city, e.g. occupation.
As an alternative to the size-changing pie charts of the first mockup, I produced an alternate version (Image 6) that works more like a game of pachinko or a gumball machine, with the large ‘machine’ at the top representing China, and coloured gumballs falling along the pipes to the destination of the migrant.
Although we worked quite extensively on the previous mockup for a month, I became worried that we had abstracted the way we represented the data too much and lost the sense of the story and movement that I initially wanted to convey. I drew this sketch when trying to come up with a late stage pivot, which would restore some topology and focus again on interesting individual cases (Image 7).
Here’s an interactive sketch I pulled together quickly. We pivoted after a conversation with Henry where the idea came up for a unified visualisation that would have 3 different modes with a moving dot animation to show people leaving China each month. The first mode would colour-code them by district of origin, the second by age group, and the third by occupation. This could illustrate some of the fascinating trends I came across while working with the data - the decrease in average age over the period, the changing migration pattern of people coming from Sen Ning district, and the shift in occupations from virtually all labourers before and during WW1 to almost entirely students from 1919 onwards.
This mockup (Image 8) also restores the original topology in my earlier sketches. Even though the Pacific Ocean is only a few centimetres wide in this version, the different distances travelled by the migrants, many of whom crossed the country to Montreal, is better conveyed. The stacked line graph at the bottom of the design would let users situate the instantaneous snapshot of migration that they’re seeing in a larger context of the period.
Earlier research also led us to make a 2nd tool based on one of my earlier designs of lines illustrating connections between Chinese districts and Canadian cities that works as more of an exploratory visualisation (as opposed to this, which serves as more of an entry-point animation). This visualisation was programmed by Erik Steiner and can be seen by clicking here or in Image 2.
Final project for my Drawing Fundamentals class - and yes, it was a drawing class where the final assignment was a collage. Cannibalised from various New York Magazines and Urban Outfitters catalogues. And some aluminium foil and ink.
In May of my sophomore year I briefly relived the dream of being a music journalist. I was the managing editor and co-founder of a new Stanford arts magazine, the Stanford Arts Review, and I managed to wrangle an interview with Broken Social Scene’s Charles Speerin since I was helping to organise their concert on campus.
I also got a photo pass for the gig, so I went ahead and created this interview/photo book with the edited version of my interview afterwards.