Facilitating a Design Studio for a web app design
AlzCare Labs
PROJECT DETAILS
Timeline: 1 week (including planning)
Team: I worked with a team of 3 UX/UI designers (remote team)
My role: I organized, facilitated and participated in the Design Studio
Tools: Paper and Pencil, Mural, Sketch
challenge
Conduct a Design Studio to kickoff the design of the PreSafe web app
The Design team was tasked with designing a web app based on the PreSafe iOS mobile app and Google's Material Design principles. I led a Design Studio so the team could explore a variety of ideas and perspectives.
solution
A web app design that incorporates the functionality of the iOS mobile app
As a team, we came up with a design for the web app that matches the functionality of the iOS mobile app.
For the password to view the case study with sketches and wireframes, email me at: kalyani.a.deshpande@gmail.com.
PROCESS
Determined scope of the Design Studio
In order to have a productive session, I narrowed the focus to designing the map page, the "home" screen of the app.
Trained design team on using Mural
As the team was new to Mural, I gave a demo on the tool and its features.
Facilitated the collaborative design activity
Sketch and provide feedback
As a team, we decided that reviewing Material Design principles and similar web apps for inspiration would help in "priming the pump". We then sketched for 15 minutes and uploaded our sketches to Mural. We presented our work and shared feedback on aspects of the design that worked well.
Affinity mapping
With affinity mapping, we identified common themes across our sketches and discussed what aspects to incorporate in the design. We also uncovered unknowns we wanted to clarify with the Product Manager.
Low fidelity wireframes
One team member took the themes from the affinity mapping and created low fidelity wireframes, which we reviewed in a later session.
For the password to view the case study with sketches and wireframes, email me at: kalyani.a.deshpande@gmail.com.
next steps
Designed wireframes for core flows of the app
Now that we had the map page, we decided to wireframe the main flows of the app - registration, custom hazards and rescue mode. We split up into pairs, designed the wireframes and held a design review.
Moving forward, we'll use the low fidelity wireframes as a starting point to wireframe the remaining screens of the app.
reflection
Designing as a team was effective because we came up with a variety of ideas in a very short amount of time. Focusing on only one screen of the app and doing some groundwork helped us have a productive session.