Do you have a sample to share in the gallery?
Project
Project Type
Organization
Position Title
Program
Project Overview
Concord Parking was planning to revamp their website and update it's design since Paladin Security just updated their website a couple of months earlier. So to make the design across brands consistent I was assigned a large task of redesigning the whole Concord Parking website and make it consistent with the Paladin website. The process would take about a month to complete. I collaborated with the marketing team for reviews and content creation (Text write-ups). I am the only designer that has worked on this project.
Research
The first step was to ask questions. Questions about design, about colors, about everything that is needed to complete the project. After asking all of the requirements, I start my design process by research, in this case because Concord wanted the website to be similar to the newly refreshed Paladin website to make it consistent, I started looking into the differences between the current Concord website design and the new Paladin website.
Planning
During the planning stage we decide the timeline of the project, the pages that needed to be revised (i.e pages we need to add/pages we need to remove). Aside from that we also went and filter out a lot of the images that we found on our website that is no longer usable for reasons (i.e an employee is no longer with the company)
After deciding on the elements for the new website we start prototyping with a low fidelity wireframe.
Wireframing | Review
After the planning stage we then move to the prototyping stage where I make low fidelity wireframes to start and get a rough idea of what the new website will look like. Since my abilities are limited when it comes to programming and Paladin also has their own third party developers that they've partnered with, the low fidelity wireframes was also shared with the developers so we can get a cost estimation. The prototyping is done on figma.
Prototyping
After the low fidelity prototyping stage, I move on to create a high fidelity prototype filled with colors, images and also did the interactions and microinteractions for the buttons and call to actions the website will have. This will prove beneficial as we also want to know the journey of every user and what their experience will be like when interacting with the new website. Same as the low fidelity prototype, this was also done one Figma along with the interactions.
Review
After I finished a fully functioning website prototype, I shared it with the marketing team so I can get their input and feedback about the website. The first thing they notice is the header background color, instead of the usual blue I have chosen to use white because I thought the main colors for the Concord Parking logo were blue. But this idea was soon changed as a request from the marketing director who said it made the site a little different and not consistent with the other Paladin Company websites.
One of the feedbacks is to also make our client's logos black and white when not hovered and then colored when hovered. Then their final suggestion was to create icons for the contact us page to make it look more sleek and simple because we have used to many photos.
Testing
After all of the updates are done, we move on to the most crucial step of our process, its to show it to someone outside of our organization to see how they will interact with the design and to hear their feedback.
We had a brief session with a client of Concord Parking, a representative of City of Surrey to take a look and go through the website.
The representative suggested us to emphasize our relationship with Paladin Security more as that would strengthen our brand credibility (since Paladin is such a well known security brand). So to solve that we added a section on Services just about our security officer services. One of their feedback is to also emphasize our sustainability focus, so we dedicate one page for it.
Review | Developers
After the user testing is done, we then send the final prototype to the developers so they can create and program it to make a fully functional website that everyone can access!
Further Improvements and Evaluation
Till this day the website is always updated with new images that we take and with new pages to promote any Concord Parking marketing campaigns that we have for the future!
