Prototyping.
Being able to prototype ideas at low and high fidelities can be incredibly useful. Here are some of my projects that involve prototyping – both digitally and physically.
Lumi Light-Up Mouse
ABOUT
This project was from the Prototyping course at CCA taught by Graham Plumb. The goal was to design and prototype a mouse geared toward a specific audience. We would also use a NeoPixel light strip and Arduino to put inside the mouse and make it light up. I interviewed people and collected survey responses to generate a persona. I then used an iPad to digitally sketch out concepts for a mouse to suit their needs: something sleek and portable, but comfortable and fitted to their hand.
I used blocks of foam to sand down into the desired shape of my mouse. Yellow foam was used for the first 4 attempts, and pink foam was used for the final. I cut styrene and glued it to the foam mouse to create the look and feel of clickable buttons. I then spray painted this gray and filled in gaps and holes with Bondo.
I made a box out of cardboard and duct tape, glued my foam mouse to it, and I filled it with silicone. After this set, I removed my foam mouse, which left me with a silicone mold in the shape of the mouse. I poured resin into this to make the final version. Once I removed this from the mold, I used blue tape to mask out areas where I wanted light to shine through the mouse.
I attached my mouse to a stick and started to paint it using spray paint. The first layer was silver to prevent light from shining through. Since my mouse was intended to be two colors, I started by masking out the sides with tape and painting the rest of it white. This was determined based on the preferences of the people I interviewed, who wanted it to be white so they could tell when it needed to be cleaned! The final coat of paint was a light gray which went on the sides of the mouse to give the illusion of the texture being different – something with more grip to it.
The next-to-last step was photographing the work and showing the mouse with the light-up function working. Finally, I used my paper prototyping and visual design skills to design an out-of-the-box experience, with a multi-stage unboxing of the packaging design.
TOOLS
SKILLS
Procreate on iPad Pro, foam, bandsaw, silicone, resin, spray paint
Product design, sketching, personas, survey design, interviewing, low fidelity prototyping, high fidelity prototyping, silicone and resin casting, packaging design, graphic design, copywriting
First steps: persona, sketches, and low-fidelity foam prototypes
Next steps: painting the foam mouse, filling gaps with Bondo
Next steps: creating the silicone mold and casting with resin
Next steps: spray painting the mouse
Last steps: Lumi packaging design and OOBE
Shuffle
ABOUT
Shuffle is a kiosk for buying and selling used electronic devices. This cuts down on the level of e-waste being created, and it makes technology more accessible by helping people get devices at a lower cost. This project encompassed many parts of design: sketching, interviewing, personas, task flows, wireframing, paper prototyping, usability testing, modelmaking, UI design, and more.
TOOLS
SKILLS
Adobe XD, Sketch, Adobe Illustrator, iPad Pro, paper, card
Sketching, survey design, interviewing, personas, journey maps, task flow diagrams, wireframing, paper prototyping, usability testing, modelmaking, UI design, photography
Shuffle kiosk process book
AllTrails Adventures
ABOUT
This project is a mash-up of two existing apps: AllTrails, a hiking app, and Geocaching, an outdoor activity like is like a treasure hunt. The purpose of the new app, AllTrails Adventures, is to gamify the experience of hiking and being outdoors and reward people for spending time outside. I created a UI design that combines the two apps' interfaces, and I designed animations and microinteractions for the new app. I then used Adobe After Effects to animate this video which explains the story of the product.
TOOLS
SKILLS
Adobe XD, Adobe Illustrator, Adobe After Effects, Adobe Audition
Sketching, UI design, wireframing, high fidelity prototyping, microinteractions, animation, video editing
Outdoor AR Museum
ABOUT
This was a project I did in Gregory Cowley's Objects + Space class at CCA in the fall of 2020. I wanted to use augmented reality to create an outdoor museum that educates users on the effects of climate change on California's parks and natural spaces. This is a video that demonstrates how the app would work and teaches you about various aspects of climate change as it relates to this beach.
TOOLS
Adobe Aero, Adobe Dimension, Adobe After Effects, Adobe Premiere Pro, Adobe Illustrator, Adobe Audition, Adobe XD
SKILLS
Sketching, UI design, high fidelity prototyping, video editing, augmented reality
Teddy Talker
ABOUT
This was a project I did in Gregory Cowley's Objects + Space class at CCA in the fall of 2020. The assignment was to create a pair of devices that allow for remote communication between two people. A use case I imagined was a parent and child separated by distance and wanting to communicate.
TOOLS
SKILLS
Arduino, NeoPixel lights, soldering iron
Electronics, coding, sewing, soldering, low fidelity prototyping, video editing
Teddy Talker process book