pendragon.online

Redgate Internship Project

Redgate Internship Application | Database UI | HTML, CSS, JavaScript, Axure RP | Built on research from Redgate

Define

As part of an application for an internship, I created a database UI prototype for Redgate Software. The brief from Redgate suggested that a current database UI solution did not display enough information in a way that users found quick, easy and efficient.

Discover

Redgate provided some thoughts from users of the existing system.

What users said

Comments from those who tested some existing solutions mentioned.

'It’s too difficult to see where important actions need to be taken.'

'A lot of wasted space.'

'The majority of users were only interested in a sub-set of the projects, but we still have an Ops team who are involved in all the projects, so they would sometimes need to see everything.'

A group of people graphic.

Presently, an easy-to-use but limited interface is used to find the deployment status of databases. The rows represent the projects that the databases belong to and the columns represent the stage of deployment.

The issue with this system is that whilst it’s intuitive to find statuses and projects, it’s not good at showing a lot of data where there are lots of projects being displayed, but not all the projects are going through the same stages, leading to large gaps in the interface. This means that scrolling and/or zooming in and out is required to view all data and it can be hard to view projects in context.

Develop

The objectives from the revised system are to be able to quickly and easily find projects that need attention by just looking at the interface and this will be done by reducing the gaps and wasted space as well as the implementing different views that only show the necessary information.

The goal is to quickly be able to monitor the status of database deployments at a glance.

Initial sketches were drawn of how an improved interface could look. I also wanted to utilise Honeycomb elements to stick to Redgate’s branding and design.

I began experimenting with grouping items that needed to be seen together and related to each other. My initial attempts used circles to do this, however they did not fit together very well.
Hexagons and squares fitted together a lot better, so I decided to stick to placing the name of items in hexagons and then could group items together by 'sticking' the hexagons to each other.

My initial ideas were to improve the current layout by grouping the database cards together in a honeycomb or elongated chevron pattern. This would show items were related to each other and show an order that deployment tasks needed to be carried out in, but when it came to prototyping, I found that the more conventional rounded rectangle was easier to read and understand when shown in the timeline. The rectangles could also be placed close to each other to help reduce the amount of space used.

Full designs were later produced using Axure RP.

Wireframe of my proposed design made in Axure. Items are arranged in a 'timeline' view, with each job having its own timeline and items in the job arranged in the timeline.
For those who didn't want to look at a (rather boring) timeline view, I created a more 'visual view' which shows the items arranged in hexagons.

Finally, these wireframes were made into a working UI prototype using HTML, CSS and JavaScript which was the final outcome.

Try the wireframes!

You can try the wireframes in your browser - they act just like a website!

Test

The prototype and my design thinking was critiqued by graphics students at NUA who were able to advise and suggest appropriate colours and shapes to use for the interface. They also suggested adding subtle animations to the interface could help make the interface feel slicker and more modern.

Outcome

I chose to code my prototype to prove my design and coding abilities and to show that I can design interfaces that can realistically be coded.

The coded prototype allows the user to see clear status indicators of tasks, see which tasks are assigned to them, gives each job its own timeline and time scale so that there are no ‘gaps’ in the timeline and has a switchable dark mode for improved comfort.

The default view shows items arranged in a timeline. Tasks that require attention are shown in red and tasks not requiring attention are green.

My design is colourful, modern and flat and utilises Redgate's Honeycomb colours, fonts, icons as well as shapes.

Individual task statuses can also be seen- items are arranged in honeycombs and coloured green if status is OK and red if not OK.

Not being able to quickly see which tasks had been completed was a pain point, so I created a view where the user could see what had been done.

Project information is available at a glance in the 'info view'. Not being able to see project information quickly was also a pain point my design addressed.

Project information is available at a glance in the 'info view'. Not being able to see project information quickly was also a pain point my design addressed.

The visual view helps to make it very easy to see the status of tasks by grouping them by priority of urgency. This has been designed like this to combat the user's complaints about seeing information quickly.

The visual view helps to make it very easy to see the status of tasks by grouping them by priority of urgency. This has been designed like this to combat the user's complaints about seeing information quickly.

The dark mode is the same UI as the default view, but features a dark grey backing and white text. Each view features a collapsible dark yellow triangular hamburger menu in the upper right of the screen that contains tools.

I created a dark view for those who might be using the interface for extended periods of time. Options and links are in the hamburger menu.

The dark version of the info view, also featuring a dark grey backing and white text.

The info view as seen when the interface is set to dark.

The dark version of the status/visual view.

The status view as seen when the interface is set to dark.

A video demonstration of my interface prototype in action.

Evolve

With some more testing, this interface design could have been developed further and applied to a working multi-user database.

Related

Enjoyed this case study? Have a look at some similar work!

Nellie's Nursery Website Prototype

From a hastily-made Wix website to a fully functioning prototype of how a nursery site could look and feel - based entirely on formative user research, research into existing conventions and customer needs.

Storehouse Magazine Website

One of the only independent student magazines in the UK, 'The Storehouse Story' includes managing a team to produce the magazine, several websites and other digital tools along the way - as well as a lot of collaboration!

Pendragon logo.

My Portfolio Website

From a basic site made in Muse to a custom-coded website showcasing my work, my portfolio has been built on feedback from the industry and is always changing to suit the needs of today.