Translating an accessible component library
_____
Challenge
As part of the new visual language, we needed to translate the iOS & Android UI design system into an accessible web component library
As part of the new visual language, we needed to translate the iOS & Android UI design system into an accessible web component library
_____
Assumption & Opportunity
We strongly believe an investment in a component library will empower the UXD & development team design & build for a large scale product. This will also help speed up workflow efficiency, create a consistent web visual language which as a result will strengthen user & engagement experience
We strongly believe an investment in a component library will empower the UXD & development team design & build for a large scale product. This will also help speed up workflow efficiency, create a consistent web visual language which as a result will strengthen user & engagement experience
_____
Product Goals
1. Adapt the new iOS visual language into a scalable web component library
2. Ensure the design system conforms to the AA level of the Web Content Accessibility Guidelines (WCAG 2.0)
3. Reduce the usage of native patterns on the master-brand website
_____
Methodology
Visual stand-ups with a cross-collaborative squad, 3-minute weekly UXD team update & a weekly in-depth design critique with a small design committee
Visual stand-ups with a cross-collaborative squad, 3-minute weekly UXD team update & a weekly in-depth design critique with a small design committee
_____
The MVP
Identifying the scope
I began by reviewing the existing & new native visual language against the current web language, this enabled me to complete a UI audit on what components & systems needed to be prioritised for the MVP
_____
Accessibility, Accordion, Breadcrumb, Button, Checkbox, Colour, Content cards, Dropdown, File uploader, Form, Grid Layout, Link, List, Messaging, Modal, Web toggle, Notification, Numerical field, Page shell, Pagination, Progress indicator, Radio button, Search field, Slider tool, Spinner, Switcher, Table,Tabs, Tag, Text field, Tooltip, Typography scale
_____
Rapid designs
In collaboration with the small design committee & the development team, I paired with developers to define a strong, scalable accessible language. Created a documentation of the translated web component library, which indicated interaction use cases.
In collaboration with the small design committee & the development team, I paired with developers to define a strong, scalable accessible language. Created a documentation of the translated web component library, which indicated interaction use cases.
_____
Iterating the design
Collaborating across various tribes, I iterated on key interaction states to ensure the UI illustrated cohesion with the experience design
_____
Key takeaways
1. User testing the component library externally would have possibly helped us iterate on complex interactions
2. The small design committee was extremely beneficial in empowering us to make rapid design decisions
_____
Organisation
Babylon Health
2019
Babylon Health
2019
Product Designer
Patricia Ofuono
_____
Patricia Ofuono
_____
