The sitter profile page on mobile is a critical step in the experience of finding a pet sitter. It’s one of the most important pages in the early part of the Rover customer journey. However, the code and design was old and unstable that no new development could be done without a major refactor. Additionally, each platform had a unique legacy design that needed to be merged into a single unified design.
My roles as a designer:
1. Create the new unified design for the sitter profile page
2. Identify what new components are needed
3. Design any missing components
4. Create Figma components to add to KDS library
Before (ios/android), After (unified design)
Objective
Support the engineering organization through the refactor of the sitter profile page by delivering new designs for the page, with specifications for each new KDS component that needed to be created.
Context
Rover’s design system, Kibble (KDS), is in the nascent stages of being built and adopted. Concurrently, our app is undergoing a page by page migration to React Native. Due to the lean nature of the team, KDS components are being built one by one in a prioritized order, but sometimes for a page migration like this, certain components jump to the top of the prioritized list.
Process
Given that new KDS components are very different from legacy native components, a pixel-perfect migration is not possible, so how do we stop this project from being a scope-creep nightmare?
Guardrails: Keep interaction design and component parity with the legacy page, but visual changes will be expected. E.g. Since the legacy page used inter-page navigation via a tab component, the new page should have a KDS tab component.
Existing screens
Component blueprints
I outlined each component and design pattern that existed on iOS & android. The new design would be a merger of ios and android patterns that had to feel neither ios-driven or android-driven.
Component blueprints
I created the first draft of the component proposal to kick-off the team discussion. The page needed atoms, molecules and organisms, the first 2 being built by the KDS team, the 3rd group being built by my feature team.
atoms, molecules, organisms
Design explorations & asset creation
Design explorations to ensure the meta section was extensible
Created new icons needed in kibble style
Exploring future opportunities, like expressing preferred pronouns, and extending the native pattern to web
