Camp Leaders Home Page Redesign
Take me there now!This project involved following a brief from a member of staff at Camp Leaders and redesigning it. The brief requested that the home page be redesigned to better guide users through filling in their profile. The Page was required to answer three questions for the user, "Where am I up to?", "What do I need to do next?", Advanced "How do I get help if I need it?".
Personas
As the site is aimed at 18-24 year olds who want to work at a summer camp, the persona created for the site was envisioned as someone in their early 20s who is very active and enjoys the outdoors. Because the brief details that users get lost and confused when trying to complete their profile, the persona user was envisioned as someone who doesn't spend a lot of time online.
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.