DESIGNING SHAPE: A VISUAL COLLA-
BORATION TOOL
TEAM
Product Manager
Developers
Interaction Designer
Strategist
MY ROLE
Designing new features
Creating high fidelity mockups
Working on implementation
Testing with users
PROJECT DETAILS
14 weeks designing and launching new features for Shape and Creative Difference, IDEO's digital collaboration and innovation tools
01
What is Shape?
Shape is a visual collaborative environment for building, testing, and refining ideas. It’s a platform designed to support collaboration at multiple scales, from small teams to large organizations and global communities.
Check out Shape at Shape.space
Shape allows team to collaborate, iterate, and gather feedback all in one tool
Shape’s feedback features allow teams to get feedback on ideas
Foamcore collections in shape mimic the collaborative interaction of team working with post-its on a foamcore board
02
What did you work on?
I joined a lean product team to improve existing features and design new features intended for implementation in IDEO’s live products - Shape and Creative Different. I created end to end designs from user stories and acceptance criteria to production-ready mockups for engineers on a two-week sprint cycles. I worked closely with designers, engineers, and PMs to plan and sketch out new features for upcoming releases such as an onboarding flow for Creative Difference.
Here are some examples of what I designed.
New quick content creation feature - I designed a new way to add content on Shape. One of the biggest challenges was balancing the various constraints and trade-off - existing design language, new interaction paradigm, and engineering effort.
This feature is implemented in the lastest release of Shape.
Designing for mobile content creation - I created interaction prototypes, especially around mobile interactions, to help communicate my designs clearly with engineers and help with implementation. Because Shape doesn't currently have a mobile design library, I created my design based on well-established interaction paradigms such as bottom sheets and modals.
03
What was your process?
We start our process by listening to the needs of our clients who are using Shape. We then create user stories based on our design principles, user needs, and our vision of a future collaboration tool. Once we established the user story, we create a set of acceptance criteria that meet the needs of the user story while considering the realities of implementation.
Based on the acceptance criteria, I often start my designs with quick paper sketches and then move onto a higher fidelity Figma prototype. I schedule multiple feedback sessions with designers, users, and engineers to ensure that my designs are desirable and feasible. Finally, I create an interactive prototype and detailed handover notes for implementation.
Quick sketches exploring additional collaboration features
An example of my design handover file