Peter’s Web
An Espresso brew and my first design project, I was working as a UX designer with Helena Hill to redesign Peter’s Web, a webhosting service website. We were asked to design a website that is visually appealing and is easy to use whilst using a WordPress theme and content specified by the client as a guide, as well as user feedback.
The Goal:
Our goals were to:
-Improve the UX and increase conversions
-Give the website UI a ‘face-lift’
-Use a set WordPress theme and content (defined by the client)
-Apply user feedback to design
Evaluation, Research + Preferred theme
The chosen theme: Phox-Startup
I looked into the client’s (Peter) website so I could understand more about his branding and what he offers, as well as analysed qualitative user feedback provided to me.
I conducted a competitor website analysis of two other websites to identify user interface patterns and elements that might improve the design and give me a better understanding of the industry.
Peter had expressed that he already had a WordPress theme that he liked (Phox), so we used it is as a reference for our design. The Phox theme is a simple and elegant design so I was definitely looking forward to using it as a base. However, we decided to remove the social media links from the top of the UI as it may lead users to click off the site before looking at the homepage content.
Homepage
Wireframe
Working on the homepage was my first dive into wireframing on Figma. I started by looking at both the homepage of Peter’s existing site as well as the homepage of the Phox theme.
One important thing to note was that Peter wanted the tagline ’Managed WordPress Hosting’ prominent on his homepage as well as a domain search field so customers can directly write in their desired domain straight away.
I wanted to avoid a slider because it isn’t great for SEO optimisation, so thought I would make each option clear in their relevant sections instead.
Prototype
Here is the mid-fi prototype put together in Figma based on the wireframe. I added his logo as well as aspects from the theme’s page itself.
Here we began to fix some of the problems with the original website that was included in the feedback given to me.
Store
Wireframe
However, I was unsure how to lay it out...
There were two ways to layout the store:
Display all services on one page or;
Create a page for the hosting services, and another for the domain services
After looking at other websites that offer similar services, as well as consulting with a UX strategist (Helena Hill), we decided it would be best to keep all services on the same page. This is because users may bounce off if they don’t see their desired service straight away. Having it displayed all on one page is much more likely to ensure that users don’t bounce off as they can see what they need without much cognitive effort. This keeps defection rates low and retention rates higher (this keeps our KPIs happy!).
I also decided to add anchor links for each service at the top that users can click on to move to the corresponding section of the page (clicking ‘Managed Hosting’ will send the user to those services within that page).
Prototype
Here is the prototype of the store put together in Figma and based on the wireframe. Here I became more confident with prototyping, adding more detail than the last:
-Coloured section indicators
-Changing background colour for different sections to make tabs stand out more
Overall I just felt more comfortable working on it and would like to highlight some aspects of the updated UI.
In Summary…
Having the opportunity to redesign a website was incredible. It provided me with an opportunity to put what I have learned throughout my studies into practice on an e-commerce site (that is currently in development using my designs for the Home and Store pages). I learned a lot whilst doing this; the process of designing from start to finish and how to tackle problems when dealing with lots of data and service options as well as keeping a clean design that is user friendly.
The website is still currently in development and, like any product, is constantly going through different iterations so is being updated regularly. So, please keep an eye out for any changes to the site!
*Please note that any written content is not mine, the content was provided by the client