Category: UX UI Design

UX design and UI design examples from Steve Crooks, Freelance Designer

Website Project Management
As part of an overall consultancy role within ZSEA (Zoological Society for East Anglia) their website needed an overhaul and I was part of the website project management team.

Working closely with the external digital agency the team produced a series of wireframes and development documents in order to consult with as many internal stakeholders to make sure the content would be correct and easily updatable.

The website project management team undertook a period of reflection and research to firstly establish the platform on which the website was to be built. The previous websites were build in WordPress, which has it’s merits, but was seen as unsuitable for the scope of the new project. One major aspect was to have the ability to run three websites, ZSEA, Africa Alive and Banham Zoo but have a single area controlling all membership information, purchases and tickets. In order to achieve this, ZSEA employed a digital agency with it’s own CMS system capable of producing websites within a template system, but still had the capacity for expansion. Given the size of the investment, it was important that the new platform and website infrastructure had the ability to be quickly changed allowing reskins for seasonal promotions and any future changes in strategy.

Above shows some of the wireframes produced in order to communicate the structure the different departments within the organisation. These were then used to build a development site which the website project management team explored the best way to display the information.

Website Project Management

There are real benefits in having a freelance website designer as part of the development team. We are problem solvers and have the ability to explain ideas and concepts to those who are not visual thinkers. Using wireframes and sketches, often on paper during the meetings dramatically speed up understanding and development time as decisions are made a lot quicker. We also understand the corporate visual strategy and can steer decisions ensuring that overall visual style is consistent.

An remember, the best thing about using a freelancer is we can drop in and out of the project when needed. If you have an upcoming website project you think needs the input of a creative visual thinker, then please get in touch.

Latest News, Projects and Articles

For more news, projects and case studies click here >
Hubspot Website Design
July 18, 2023
Read More
Food Vendor Logo Design
May 5, 2023
Read More
Charcuterie Label Design
April 15, 2023
Read More
1
2
3
4
5
›
»
February 12, 2022
Bespoke Website Design for Supercar Hire Experts

Bespoke website design project for PB Supercar Hire, experts based in central London. The website showcases the fleet of amazing supercars and communicates the different hire options.

Each car has a simple table which clearly communicates the prices and the car specification. The price options include a mixture of daily, weekly and even monthly options, so it was important the customer be able to see how the price reduces based on the length of hire.

Homepage shown on desktop and mobile

There is also an option for a short term lease for those who require the car for a longer period of time. These prices have been separated into a different section. This was not only to make the pricing easy to differentiate between short term and long term hires, but also to help with the SEO (Search Engine Optimisation) of the site. In using a different section, these pages can directly target keywords associated with short term leases. Working closely with PBSH, this has been continued over the entire site to use each page to target specific searches for that supercar. This helps mitigate some of the cost from their PPC (Pay Per Click) campaigns by boosting organic traffic from SERPS (Search Engine Results Pages).

Subpages showing information layout

The bespoke website design is based on HTML and PHP. In order to collect enquiries, the site has a bespoke PHP CMS (Content Management System) added. This collects the customer data, including which car they have requested the information from. It also provides this data to PBSH as a downloadable CSV file for them to use off-site. This enables PBSH to add customers who have requested news on offers to be added to their email database. The data can also be used to check on car performance and customer rental frequency.

Bespoke pages targeting different keywords for SEO purposes

Do you have a website that needs to display information in a simple, easy to digest manner? Taking a look at how the information is communicated is very important to how many enquiries your website generates. If you would like to know more about this project, or bespoke website design case studies, please contact me.

September 28, 2019
Hyjocool UX UI Design for App

This app design project for Hyjocool provides installers with a quick reference guide to all the specifications and data for their range of restaurant air movement products. It is also designed as a useful toll to enable quick communication with the Hyjocool Help Desk.

Research and Creative Concept

This app design project was the result of conversations with Hyjocool about how they wanted to re-engage with installers and position themselves as a modern, progressive company. Taking these objectives, we explored various concepts before moving the app design project forward. We felt this was the best way to display information, much of which already existed, in an exciting new way. The app would then act a campaign to promote the company as well as proving to be a value tool in itself.

App Design

The app is designed to be simple and easy to use. Installers will often need access to data sheets and installation guides while installing a new system. The provision of this app is gives the installer another good reason to choose a Hyjocool product as they know the information will be easy to find and up to date. It also highlights the dedicated Help Desk.

The products are split into 3 main areas and this can be accessed by a main homepage and through the menu navigation. From here the installer can then drill down to the specific product data.

Screen examples of app design for Hyjocool. Screens show (from left to right) intro screen, main navigation homepage, menu example, product selector, help desk interface

App Design Wireframes

Before any design was completed, we produced a set wireframes to explore how the app would work and the relationship between the pages. Once we were satisfied all the content was available we completed a set of design visuals. These are currently being worked up as a functioning prototype ready to be tested.

Wireframe examples for the Hyjocool app design showing (from left to right): Main homepage, menu example, product range page, product range page with expanded detail.

App Logo and Identity Design

It was important to Hyjocool that the app had it’s own identity. They wanted it to be more that just a tool, they wanted it to add positively to the overall brand perception. The logo designed added value to the app and installers value the way it looks and feels. The identity positioned the app as the as a help to the installers and help elevate any fears they had about accessing assistance.

Do you have an idea for an app to help your business communicate with your customers? Get in touch and we can talk ideas and how best to make it happen. As with this project, as a freelance designer and not just an app designer I am best place to help design it’s own identity and give it a personality of it’s own.

April 12, 2018
UX UI Design for White Label Home Control App

This is an example of UX UI design project for a home control app. This app is being developed by a London based investment company who have stakes in both a CCTV provider and home security business. Their plan is to make available a white label app that can control various home functions and offer it as part of a deal with new energy providers.

Many new energy providers are entering the UK market and this app is offered free in return for the opportunity to provide the customers with home security. Using a white label app offers considerable savings for the energy provider. It also allows the provider to offer the app immediately without needing to embark on a lengthy development process.

Selection of screens showing the app. From left to right: Homepage offering energy provider branding, Current Status screen showing an overview of energy usage and any other chosen services, Menu, Room overview showing each room’s temperature, Example of individual room controls, Temperature control.

The apps works via a number of APIs from the security software that controls the alarms, access points and CCTV. It will then use the smart meters provided by the energy provider to show customer energy use. Additional functionality such as internet control and audio/visual control will then offered as add-ons. Basic SONOS controls for example can be controlled via the app. The app is now in production ready for launch in AW18.

Examples of UX UI design wireframes for main status page, room selector and room control interface

The UX UI design will be tailored to each provider, allowing then to add their own brand identity. As far as the consumer is aware, the app is part of the energy provider’s service so any reference to the white label brand is removed. With this in mind, the design has to be easily adaptable.

As well as the UX UI design we also designed a proposal document and identity for the white label version of the app.

White label branding to use on the app plus example of tailored proposal document designed for to pitch to each energy provider.

Do you have a project you need a freelance UX UI designer to assist with? Get in touch for more examples of interface design and other design projects I have been involved in.

April 7, 2018
Website Development for Care Development East

This website development project for Care Development East started with a series of interviews to establish the clients requirements. This included, not only the proposed content of the site, but also who in the organisation was responsible for updates, their experience with CMS systems and any additional functionality needed. They wanted to bring a new fresh, clean design to their online activity and provide new tools to allow them to provide more training opportunities to a wider audience.

We decided to build a bespoke site but use WordPress as the platform. Care Development East had knowledge of the WordPress CMS which would mean any training time would be kept to a minimum.

Once we had established the content we produced sitemaps showing the information architecture. Production of wireframes were then designed to show the information hierarchy and proposed layout.

Once the wireframes had been approved by all departments, we produced a series of flat website designs of the homepage and key pages. The design utilises a lot of white space giving the design the fresh clean look we were looking for. The principle information is contained in a single, large top navigation and any lesser navigation is retained in the footer.

As part of the website development we needed to tweak the Care Development East corporate identity design. The brokerage used a series of established purple colours as part of their identity. We felt while designing the website we needed a new accent colour to bring the deign to life and help highlight important information. We experimented with a number of designs and all agreed the teal green was the perfect accompaniment to the purple.

Care Development East Training Exchange

One of the challenges was to add the required functionality to the site as quickly and efficiently as possible. As WordPress access various plugins, we wanted to use these as much as possible rather than code our own. A good example of this was the Training Exchange added to the site. This area needed to display a number of specific training opportunities allowing the care sector to share training courses. In order to achieve this we sourced an excellent plugin designed to manage classroom bookings and repurpose it to use as Training Exchange. This kept costs to down to just the plugin, implementation and design. This area was then given its own logo and identity design adding to its value.

Suffolk Training and Course Providers

Another section which required additional functionality was the Training Provider and Short Course Provider section. This area allows providers from Suffolk to list the training they provide. It is a section which gives care professionals a simple list of all relevant providers to contact when organising mandatory and additional training for their staff. This again utilised a WordPress plugin, in this case a portfolio plugin to give the Suffolk Brokerage a quick cost effective solution.

Website Development from a Suffolk Freelance Website Designer

Do you have a similar website design project? This is one of a number of projects I have completed and demonstrates how I can discuss with you to find the best solution. This is done without confusion and with a total understanding of the skill sets of those involved. It also shows how we can develop an excellent site without a massive budget by using existing software. If you would like to see any other examples, including those completed on behalf of agencies or marketing companies (which I don’t show on this site), then please contact me.

March 12, 2018