glasswall filetrust for email ui/ux

A user interface for a SaaS cyber security platform designed to give users easy access to the setup and monitoring of email flows through the system.

My brief was to design and build a fresh and fully responsive interface for the new cloud-based version of the existing Glasswall customer portal.

The portal allows customers to see their emails flowing through the system and how the Glasswall engine has treated any attachments. Policies can be created to tune the system to the customer’s needs and held files can be released to recipients by admin staff.

The initial phase of work was aimed at reaching feature parity with the existing on-premise offering. Whilst the backend functionality was to remain the same, I was allowed the freedom to add improvements to the user experience wherever possible.

After studying the existing offering, I noted a number of clear areas that could be improved upon and set about sketching and creating prototypes to demonstrate my hypothesis.

Some of these prototypes were designed to be fully functional to not only demonstrate my ideas but also use them for usability testing sessions. These sessions moulded further iterations until a final design that I was was satisfied with was landed upon.

As time was at a premium for this project, once I was satisfied that I had enough to go forward, I moved quickly into coding the front end - initally creating the pages as static html and sass/css and then moving onto the actual project to start working closely with the developers to bring the screen to life with real-world data.

Once the body of the application UI was in place I spent much time working on the finer details such as micro-interactions, tab index/keyboard control and ensuring that the site was as usuable as it could be (for such a complex app) at mobile and tablet size.

The application is now live and in use by a growing number of Glasswall customers. Future monitoring of the application will be carried using tools such as HotJar. I have also begun work on a project to convert the existing front-end code to React.js

Technologies included: HTML/C#, SASS/CSS, jQuery, SVG

powerfull ui/ux

A conceptual project designed to explore the possibilities of optimising a household's use of solar power, wind power and energy storage at any particular time during a 24 hour period.

A fully responsive web application was designed to provide visualisation of the data modelling. My involvement in this project included exploring initial concept and experimenting with ways to display the data, to implementing the final front end code.

Ater experimenting with various approaches, including using WebGL, SVG animation was chosen as the most suitable means of displaying the parameter changes. The scene was designed in Illustrator and uses D3.js to manipulate the code to signify changes including weather, wind speed, battery charge and time of day.

Initial sketches were made to rapidly clarify the approach that we should take.

Functioning wireframe prototypes were created in Axure to explore ways of displaying the data in the best and most user-friendly manner.

A full onboarding walk-through provides the first-time user with clear instructions as to how to use the application.

Whilst Powerfull is purely a demonstration tool, it provides a focal point for discussion surrounding micro-generation and the intricacies of balancing a household's needs with the energy available to them.

Technologies included: D3.js, HTML, SVG, SASS/CSS, jQuery

powerfull.wheatleyinsights.co.uk

amethyst ui/ux

Amethyst is a fully featured, web based .Net Asset Management system for energy metering industry participants.

The application existed before my employment with the company but I was asked to give it a face lift and then subsequently to design a dashboard interface as a window to the data. The whole layout was revised and new icons employed to bring the visuals up to date.

I was involved with the dashboard from wireframe prototype experimentations to completion, working alongside the dev team to incorporate my front end code with the data to produce a highly interactive experience, utilising drag and drop and editing capabilities along with carefully chosen micro-interactions to enable a fully customisable screen layout.

Wireframe prototypes gave me the opportunity to rapidly experiment with layouts and functionality, whilst also providing the ability to demonstrate potential approaches to stakeholders and the dev team before committing to code.

Technologies included: HTML, SASS/CSS, jQuery

glide plan ui/ux

glide plan is an MVP for organising and planning resources.

Acting as Product Owner within an agile team, the initial brief was to create a minimum viable product time management/planning web application that could be used by a target audience of small business owners to schedule both people and resources, in a simple to use and delightful way.

We had gained a strong understanding of our potential users' needs due to market research surrounding a much more complex scheduling application that the company had previously created. The data showed that there was a market for a much simpler, user friendly and inexpensive SAAS application.

I set out to design a product that would be as delightful to use as it was straightforward and uncomplicated.

Initially a two-day R&D sprint of rapid html and javascript prototyping was carried out with a small team of developers to prove concepts and fail fast, before we committed to an approach and started building the application for real.

My involvement was very thorough and aside from product ownership, spanned the initial sketches and the design of wireframe prototypes all the way through to development of the interface, onboarding, and design and creation of the marketing website.

Technologies included: HTML, SASS/CSS, React, SVG

www.glideplan.co.uk

wheatley insights ui/ux

A website created to provide a hub to communicate the R&D side of Wheatley's business, introducing concepts and articles about emerging technologies in the utilities market.

The website needed to be appealing, modern and fresh and my goal was to make it as visual as it was informative. To this end I focused upon making the front page highly graphical with large tiles representing the most recent posts.

The site was designed with a mobile first, fully responsive approach, ensuring that visitors got just as good an experience when browsing on a handheld device. Microinteractions are utilised for affordance and to make interacting with the site a more pleasurable experience.

A content management system was required to allow the marketing team to post new articles with ease and Concrete5 fitted the bill perfectly.

Technologies included: HTML, SASS/CSS, jQuery, Concrete5

www.wheatleyinsights.co.uk

ctruk ui/ux

Wind turbine support vehicle app

An iPad application built using Javascript for a company who build and operate ocean-going wind turbine support vessels. Amongst other things the application records movement, speed and any impacts and logs any information that is input by the pilot.

Realtime information regarding the vessel's speed, acceleration, pitch and roll is available, along with the ability store information about passenger numbers, weather and any onboard incidents.

I was involved in all aspects of this project including customer liason, UI/UX and Javascript development.

Technologies included: Javascript, Node.js

pinpoint ui/ux

Pinpoint is a mobile application for the collection and access of water meter data.

This app was created to fulfil a need within the water industry for retailers to be able to increase the accuracy of their existing data relating to assets in the field. Pinpoint is designed to be an easy-to-use app for the water retailer to locate meter points and record and access data relating to them.

I was tasked with making this app as intuitive as possible, to make locating meters and the correct data a straightforward task for the user.

Initial layout sketches and user flows were drafted to clarify an approach to the app's architecture.

A prototype was created in Axure to prove the flow worked and to demonstrate this to the stakeholders

Technologies included: HTML, SASS/CSS, SVG, Ionic

graphics

A few illustrations, icons and motion graphics that I've created

Android Launch

Created for a marketing campaign to launch Android graphical template sets. Photoshop/Illustrator

Party Mode Icon/Graphic

Designed to illustrate a "Party Mode" in a sophisticated smart home. Photoshop/Illustrator

iOS Icon

Created as the main app icon for a medicine reminder iOS application. Photoshop.

Stage Gate Illustration

Illustration to depict the stage gates of a business innovation process. Illustrator

Amethyst Diagram

An animated infographic to illustrate the architecture of an asset management application. Illustrator/After Effects

art

A small selection of my paintings and drawings in traditional media

Maldon Quay

Large format painting of barges moored at Maldon

Reflection on Lombard Street

One of a series of cityscapes depicting the old reflected in the new.

Bawley on the Colne

Sailing on the River Colne in Essex

Glass and Apple

Pencil still life study