Project Type
E-commerce
Build Type
Responsive site
Date
October 2017 – October 2019
Client
Toys “R” Us
Role
Interaction Designer
The much-beloved brand, Toys “R” Us, was one of a number brands taking it’s offline business online in the MENA region. Brands including ACE Hardware, Kiabi and Reebok would be simultaneously launched on a responsive bi-lingual Salesforce site, made up from reusable modular UX.
My role as interaction designer was to understand brand, customer and business requirements and translate those into an extensible design system with micro-interactions that added delight and utility to the experience.
Style Guide
The brand guidelines provided laid a good foundation for the sites visual direction, with core colours and latin typography provided as well as key illustrations of Geoffrey the giraffe and a playful icon set of different children’s activities. This need adapting for the project in key areas:
- Web ready Arabic type needed to be identified with the appropriate playful character and legibility at different sizes
- Core colours need to be adapted to ensure combinations were accessible
- A secondary palette picked from existing brand icons was used to add variety and allow for codification of the core site categories.
- A new set of interface icons was created to accompany the existing impact icons, designed with the rounded corners and chunky strokes to match the character of the existing collateral
- Impact icons inspired by existing activity icons were created for key services such as delivery and payment types
Design system
The style guide laid the foundation for the design system, which needed building from the ground up; from simple component like buttons up to more complex components like product and order cards. Considerations included:
- Establishing base units and spacing to ensure visual rhythm and hierarchy
- Communicating brand personality with a chunky rounded shapes in the UI indicative of children’s toys
- Harmonising and codifying primary and secondary colours into an interface that was vibrant without being overwhelming and lacking clear priority
- Defining interaction states for each component to communicate system status and imbue with bouncy, energetic animations
Checkout the interactive prototype 👉
Design system
The style guide laid the foundation for the design system, which needed building from the ground up; from simple component like buttons up to more complex components like product and order cards. Considerations included:
- Establishing base units and spacing to ensure visual rhythm and hierarchy
- Communicating brand personality with a chunky rounded shapes in the UI indicative of children’s toys
- Harmonising and codifying primary and secondary colours into an interface that was vibrant without being overwhelming and lacking clear priority
- Defining interaction states for each component to communicate system status and imbue with bouncy, energetic animations
Home and category pages
The homepage, category landing page and brand page provided key entry points to users looking to establish and refine their product search. These pages had to cater for both experienced and educated users, such as parents looking to satisfy the educational needs of their children, as well as uninformed relatives and friends looking for inspiration and guidance.
- Cater for essential product finding strategies including shopping by age and educational appropriateness identified during user research
- Facilitate merchandising strategies around new and seasonal product ranges
- Leverage Toys “R” Us competitive advantage as toy experts
- Elevate the user experience with engaging micro-interactions and transitions
Home and category pages
The homepage, category landing page and brand page provided key entry points to users looking to establish and refine their product search. These pages had to cater for both experienced and educated users, such as parents looking to satisfy the educational needs of their children, as well as uninformed relatives and friends looking for inspiration and guidance.
- Cater for essential product finding strategies including shopping by age and educational appropriateness identified during user research
- Facilitate merchandising strategies around new and seasonal product ranges
- Leverage Toys “R” Us competitive advantage as toy experts
- Elevate the user experience with engaging micro-interactions and transitions
