RC Dalek Site
Take me there now!This project involved selecting an item in my house & designing a website selling that object. A remote control Dalek toy was selected as the item. The brief also limited content on the site to content I created myself. This resulted in a responsive site that has several features designed to grab user attention.
Personas
As a site selling an item such as this would attract different types of users, two personas were created to fill two of the main types of users the site would attract. One of these being a child looking for something to ask their parents for. To incorporate this into the design it was decided to create several features in the site that would appeal to a younger audience. For example, the 3D model spinning on the page, and the controller section where the voice lines can be tried out.
An empathy map was created to further understand the users philosophy. This aided in the design process as it allowed me to deepen my understanding of the persona created. This empathy map helped create an understanding of how the user might think and feel during their visit to the site, and what they would do while browsing the site.
Empathy Map
User Journey Map
The user journey map created for the user helped map out how the user would feel at different stages of using the site. This is used to identify key areas of the site to reinforce with user centred design principles to create a frictionless experience for the user.
Sketching the initial designs using pencil and paper is an efficient way to create a permanent idea of what the basic design for the site could look like. Pencil and paper helps as the first step of interface design as there is a low barrier from idea to visualisation. This makes creating wireframes and low fidelity prototypes a much easier process.
Sketches
Wireframes
Creating the wireframes for the site was the first step towards a final design for the site, allowing the sites interface to start to form. The wireframes were created using Figma to not only create the first, but to plan early ideas of how the HTML & CSS layout of the site would be actioned.
The Figma prototype is where design of the site was finalised, and considerations for aspects of the design, such as font family and colour. The prototype is also given basic interactions in Figma’s prototype design tab.
Figma Prototype
Site Build
The site was then built using HTML, CSS, and Javascript to ensure an accessible, user focused experience that meets all the user needs identified in the design stages. The sites main interactive features were implemented using Javascript.