Buy toys easy and fast.

Ideation

With the research findings and personas in mind, I brainstorm solutions. I tried to come up with as many ideas as possible without considering feasibility at this stage and the developed paper wireframes, digital wireframes and low-fidelity prototypes.

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a horizontal list of cards.

Digital Wireframes

Low-fi prototype

I quickly drew out sketches of these functionalities

The primary user flow I connected was contacting customer support.

High-Fidelity - Iteration 1

For the first iteration, my main goal was to validate whether the design helps different types of users navigate the main user interfeace with ease. I also hoped to test the usability of the design, so that I can improve upon it.

Minimal aesthetic

Toy Store uses a minimalist aesthetic, creating an experience where content and actions take the forefront of the user experience. Toy Store's brand plays an important role as the central, unifying scaffolding for the variety of products and brands showcased.

Curved Borders

Curved borders are a visual theme in the app, and are used on various components and elements. They reflect the shape of the store logo, and act as an extension of the store brand.

The app logo and examples of curved angles in the app UI

Overlapping sheets

The underlying theme of the app interaction model is that of three overlapping sheets. The bottom sheet has the main content; the middle sheet has the bottom navbar and the topbar; and the top sheet has the the contact customer support button.

1. Bottom sheet
2. Middle layer
3. Top layer

IA

The app’s information architecture has a catalog structure. A catalog contains categorized list of items. Toy Store's top level categories group ages and genders (babies, preschool, boys, girls), so there is a clear way to find a toy. Adopting a catalog structure allows users to browse an area of interest, compare items to each other, and view the details of a specific item.

Navigation

The app uses a bottom navigation bar as the main way to navigate through it.

Dropdown menus

All navigation patterns share the same selected state: when a dropdown button is tapped it displays the subcategories.

Layout

Toy Store uses a responsive grid system, allowing padding and column size to change between mobile, tablet, and desktop.

Color

The app color theme is monochromatic, using light and dark variations of the primary color Toy Pink. The app’s primary color (Toy Pink 100) fills the back layer, and the secondary color (Toy Pink 50) fills the bottom sheet. The main content is on white, and the dark Toy Pink 900 is used for typography and iconography.

Typography

The app type scale provides the typographic variety necessary for the app content. All items in the type scale use Nunito as the typeface, including Nunito Light, Regular, and Semibold.

Components

The app showcases a variety of components. From beautiful Icons to stylized but modern buttons, including contrasty dropdown menus.

Here's the first prototype of the checkout flow. Try adding the pink bunny to the cart and then checkout.

Design

Prototype Insights

After the prototype, I found problems with the homepage.

• The bottom navbar didn’t work
• It felt that something was missed

The biggest challenge I faced throughout this project was balancing moving forward with the designs, we spend a lot of time changing copy and images.

Launch screen

One of the Store's mascot plays a central role in the animation.

Navigation transitions

The app uses navigation transitions use emphasized easing and long durations to achieve a relaxed and elegant tone. Temporal offsets are used to call attention to important elements like the cart and checkout button.