Design Research
Ideation Exercise
Explore what controls are important to users when they watch their Dropcam video and how they group the controls.
Method
- recruit participants for 30 minute working sessions
- print and cut out each ui element relevant to interacting with video content
- have blank ui pieces for users to add functionality they feel is missing from the experience
- ask each participant to place each ui element around the video in a meaningful way
- discuss why they placed ui elements where they did and the groupings they made
- discuss the ui elements that they added or removed
Seek Inspiration
- look at how leaders in the video space group controls
- look at how others have treated specific functionality such as zoom and voice controls
- analyze interaction patterns of the more complex controls
Design Exploration
Wireframes
- map out placement of functionality
- describe functionality of features
- describe various camera states and needed content and functionality for each state
- review wireframes with product team to confirm all required functionality is available to the user at appropriate times in their workflow
- review wireframes with engineering team to discuss any potential technological limitations
Design Refinement
Visual Comps
Visual Specs
Art Direction
Worked with contracting illustrator on a set of custom icons for Dropcam's web and mobile apps, assuring that icons felt consistent together and suitable to Dropcam's style guide.
Design Implementation
Engineering & QA
- worked closely with engineering to answer any design or interaction issues that were not fully addressed in design specs
- worked through specific browser issues with designs as they came up with engineering
- tweaked designs in code with engineering to assure pixel accuracy
- tracked visual and interaction bugs in JIRA
