Project Role
Wireframed sketches on Figma
Prototyped product
Led visual design direction
Tools
Clip Studio Paint
Figma
BGJar
Project Length
Nov 2023 - Jan 2024
Project Type
Freelance
Overview
Prowl Owl is a website monitoring system that sends periodic updates to your email on anything you set it to. The website needed a redesign as it was very “bare bones” and did not retain any user on the website for much long. The final design transformed the site into a more modern and trendy site, where information was more easily seen, so that users were more compelled to stay on it.
What is Prowl Owl?
A heuristic analysis shows that the design of the initial website was it looked very out dated and plain.
Moreover, critical information about the website was scattered throughout, making it hard for users to find easily.
Observations
I was looking to solve this by putting all the critical information in one place and in the fore-front so users did not have to go looking for it; as well as making the design more modern and trendy so users would feel compelled to stay on it in the first place.
Prior to any changes, about 10% of users completed submitting a request when visiting. I was hoping the design would tempt more users into trying it out, increasing this number to at least 20%.
The Goal
Constraints
Before starting the design, I was given some restrictions and constraints to work with. As it is only the owner of Prowl Owl that is working on this and the only one implementing the design, they asked me to:
Keep the design very simple and easy to implement
Keep the blue as the main colour from the original design
Users should be able to get all the information they need at a glance
Design
Wireframing
With the restraints in mind I set about wireframing the main page. There were a few iterations we went through but the one that was chosen was the one most similar in structure to the original design, as it would be simpler for the developer to recreate this and wouldn’t have to change much; only add to it.
There was a new page I was asked to recreate and that was the pricing page. From the wireframes that I created, the one that was chosen was had a horizontal structure with all the information laid out in one area. Users can click on each of the plans and see the features that it comes with highlighted at the bottom before buying.
Evaluation
The redesign for the landing page was mostly implemented and resulted in a 25% of users submitting requests when visiting the site, a 15% increase. The new design also increased traffic by 22%.
The Final Product and Metrics
Extras
Prior to being asked to redesign the website, I was asked to create a simple logo for the website. Given that the name is Prowl Owl, the creator wanted an owl featured in someway in the logo.
Since this was requested before the idea of a redesign of the website was on the table, the design of the logo stands out quite a bit from the rest of the website. As of now, there are no plans to redesign the logo however if I were to remake it, I would go for a more sleek and minimalistic design to correspond to the rest of the website.
Logo Exploration
For the background, I originally had in mind an abstract bubble-like background with varying colours of blue. However, this was proving hard to import on the developers side.
As a result, we decided on the current rendition of a cloudy background using a generator that was easier to import. The clouds are variations of the staple blue of Prowl Owl and the background is a slight purple to create a contrast between the sky and clouds.