Challenge
“How might we create a cohesive experience for Respond tool on both Mobile and Web app?”
I was provided the following needs and constraints:
To have a consistent experience across web and responsive products
Maintaining a single code for both Responsive and web app experience.
To make minimal changes yet trying to make bigger impact with the changes.
Research
Interviews
After our team conducted a series of interviews, we were able to understand Analyst’s motivations and the blockers/pain points that exist while using the current mobile version of the respond tool.
Key user stories
As an Analyst, I want quick and easy access to priority cases even when i am away from my system
As an Analyst, I want to view cases assigned to me and manage them.
As an Analyst, I want a way to analyze and resolve cases by adding required notes and attaching required case history for future references.
Respond Tool workflow
Defined steps to manage and resolve student cases.
Designing for single code maintanence
Iteration
We followed a mobile first approach, with that in mind i tried reusing the web structure and made it flexible to fit responsive usage, and design each section into expandable components. The design changes followed the minimum code efforts restriction.
Flexible design components that adapts to both web and responsive usecase
Initial design consideration
As i kicked off with the design, i benchmarked multiple mobile application and studied how they address both responsive and web app implementation, mapped the navigation mental models and interaction vastly used in mobile apps.
Solving issues identified from usability test
The project primary objective was to address the usability issues, correctly apply the design system components to the new mobile designs and introduce new components if required.
Case listing workflow, Filters
Before
After
Case Detail Screen
Before
After
Case resolution actions
Before
After
Final Deliverables
After many stakeholders meeting we created an improved mobile first case management tool and enhanced the web design to match both experiences consistently. The tool can now be managed from a single code base for both web and responsive design.
Mobile
Desktop
Takeaway & Reflection
Mobile design adaption should be thoroughly researched and built to avoid frustrated and discontent customers. Understanding business need and aligning users requirement is key to take balance design decisions. Having all stakeholders to take project decision helped faster project completion.
A Final note: Learning to identify and address the right problem understanding solves most part of the projects.