Hi, I am Danni! I am a User Experience Designer.
I design with Curiosity, Empathy and Attention to Detail.

MooDuino: in-class voting app Design

About Fizzlab and MooDuino

Fizzlab is a Directed Design Group in UW HCDE department. It gathers a group of people who are interested in physical computing. We try to bring software world to physical world and provide “super power” + “second life” to ordinary stuffs with computer technology.

During the Autumn Quarter 2013, we begun to create interactive systems based on a traffic signal. By connecting the traffic signal with Arduino, a open-source electronic prototyping platform, we were able to build applications that interact with the traffic signal.

The application my team was working on is named MooDuino. It is designed to be a classroom voting app that allows instructor to gather real-time feedback from students in the class (their “mood”).


Sketching

The concept of this project is pretty straight forward: gather inputs feedbacks from students and present student’s data in an effective way to instructors. Our Design Question:

  • How to help students input data intuitively?
  • How to present student’s data in a effective and informative way?

I spent a whole afternoon in one of favorite cafe shop ZOKA Coffee, sketching out the flows and screens. It was pretty fun.


Sketching forced me to think deeper about the ideas, and helped me think about details.


Design is a mixture of independent thinking and collaborative work. And one of the challenging but interesting part of design process is Communication: communicating your ideas, and embracing other people’s opinion/ ideas/ critiques. After finishing the very first few sketches, I sent them to my teammates, with some annotations (really informal ones) that helped explain my thinkings behind.


As you can see from the sketches on the right, they are complicated and still have a lot of potential to be refined. But as a starting point, which helped evoked discussion within the team, I think they are good enough.




Fizzlab Sketch 1
Fizzlab Sketch Setting

Presentation and Design Critique in Research Group

During Class
In Class Fizzlab Balsamiq Mockup
Break
fizzlab balsamiq mockup
The first two screens (from left to right) in each screenshot above are what we came up with during our group discussion.
Ideas from research groups are really helpful to us. We adopted some of the ideas, cleaned up our UI a bit and add more user friendly elements to our design. They are the third screen in both screenshots.

HTML Prototyping with Bootstrap

We wrapped up our project with a html prototype built with Bootstrap 3.
html prototype fizzlab

Final Thoughts

Main Design Challenge Identified:

  • Conduct meaning calculation based on meaningful data collected.
  • Provide informative but not distracting feedbacks to the instructor.
  • Present the feedback in a way that evoke positive emotional response.
My Responsibility:

  • Designed the MooDuino App
  • Facilitated team discussion about the design
  • Made prototype with Balsamiq and presented it in Fizzlab design critic session
  • Built responsive UI with Twitter Bootstrap 3
Protected: Product Design at Microsoft
Microsoft
Graphic Design, Interaction Design, Recent Work, User Research
Protected: Product Design at Microsoft
Framer Experiment
Interaction Design, Recent Work
Framer Experiment
Re-imagine Read-it-later Experience
Graphic Design, Interaction Design, Recent Work, User Research
Re-imagine Read-it-later Experience
Yelp User Profile Page Redesign (ios)
Graphic Design, Interaction Design, Recent Work
Yelp User Profile Page Redesign (ios)
Taxonomy for Starbucks Bakery Products
Taxonomy for Starbucks Bakery Products
TEDxRainier Event Companion App
UW iSchool Capstone Project
Graphic Design, Interaction Design
TEDxRainier Event Companion App
Health Pal: Web Application Design
Interaction Design
Health Pal: Web Application Design
Hello 911… Information Visualization Project
Information Visualization, Interaction Design, User Research
Hello 911… Information Visualization Project
MooDuino: in-class voting app Design
Interaction Design
MooDuino: in-class voting app Design
Exploratory Data Analysis with Tableau
Information Visualization
Exploratory Data Analysis with Tableau
Homeless in Seattle Visualization
Information Visualization Class
Graphic Design, Information Visualization
Homeless in Seattle Visualization