Mobile and Web Experience: Toy Store

Client: Brookside Toy and Science
My Role: Principal UX designer, I met with the client to discuss his goals for the project.
Wireframing, prototyping based on proof of concept.
Status: Experience design completed.
Year: 2018
My Role: Principal UX designer, I met with the client to discuss his goals for the project.
Wireframing, prototyping based on proof of concept.
Status: Experience design completed.
Year: 2018
Persona Development
An in depth analysis of the archetype of users, their needs and their goals for the system.
An in depth analysis of the archetype of users, their needs and their goals for the system.

Style Tile and Mood Board
Based on the history and the tone of the store, the energy amongst the staff and the owner, the style guide was formed and this helped with rebranding the product.
Based on the history and the tone of the store, the energy amongst the staff and the owner, the style guide was formed and this helped with rebranding the product.

Adjacency Matrix
This tool was employed in order to determine the optimum structure; the various pages were rated based on their relevance to each other.
Some pages were merged, and other new ones were added.
This tool was employed in order to determine the optimum structure; the various pages were rated based on their relevance to each other.
Some pages were merged, and other new ones were added.

Site Architecture
Based on the adjacency matrix, the site was restructured.
New features were introduced based on the user goals.
Based on the adjacency matrix, the site was restructured.
New features were introduced based on the user goals.

Mapping on to the interface : Wireframes
Using simple interactions and common design patterns, the design of the wireframes relies heavily on the proof of concept derived from the tools used such as the persona goals, the adjacency matrix, the new site structure and the mood board.
Using simple interactions and common design patterns, the design of the wireframes relies heavily on the proof of concept derived from the tools used such as the persona goals, the adjacency matrix, the new site structure and the mood board.
Low Fidelity Wireframes
After card sorting I had enough information to begin designing the wireframes.
After card sorting I had enough information to begin designing the wireframes.

User Story and flows
The new app and website were then laid out in a user task scenario.
The new app and website were then laid out in a user task scenario.

New Features
The user stories clearly demonstrated the value added by the new features that included CTAs, embedded google maps and a way for the store to leverage an existing platform-Facebook chat as a customer care hotline.
The user stories clearly demonstrated the value added by the new features that included CTAs, embedded google maps and a way for the store to leverage an existing platform-Facebook chat as a customer care hotline.

Interactions
Simple interactions such as accordions, galleries with indicators and common drop down menu patterns were used in order to appeal to our users age demographic.
Simple interactions such as accordions, galleries with indicators and common drop down menu patterns were used in order to appeal to our users age demographic.
Interactions
Simple interactions such as accordions, galleries with indicators and common drop down menu patterns were used in order to appeal to our users age demographic.
Simple interactions such as accordions, galleries with indicators and common drop down menu patterns were used in order to appeal to our users age demographic.
