Nevo example image
Caleb Kingcott
Nevo example image



Made by Caleb

For the last couple of years, I have worked directly with clients, from local to national brands. With responsibility for crafting the whole website, I worked as UX Designer, UI Designer and Front-end Developer.

ROLE:

Front-end Development, UI Design, UX Design

PROJECT SCOPE & TOOLS:

Sketch, Google Analytics, Pen & Paper, Git, Gulp, Sublime Text


Explore

Research

Before the visual design of each product, it was important that I completed some UX research to get a better understanding of the users, any pain-points that exist in the current solution and any opportunities.

I often started with a stakeholder interview and heuristic analysis of the existing solution. This would often be enough initially define the user and product goals. I would then use other research techniques through the project including card sorting, user testing, qualitative research (Analytics, Heatmaps).

Two different glucose monitoring solutions. Dario glucose monitoring and Freestyle libre flash monitoring.

Design

User Persona and Diagrams

I would first create a User Persona and often a User flow diagram and Sitemap before any Visual Design. This gave me an opportunity to take what I had learnt through UX Research and plan the product as a whole.

Wireframes

I would then build out some low fidelity wireframes. I would use these to consider the structure and feature set of a website. I could then take the deliverables to the client and open discussion on these points. I would iterate on the wireframes and settle with the client on a solution.

High Fidelity designs

Once Wireframes had been approved by the client, I moved on to a higher fidelity design. If the client needed help with branding/logo design, I would complete those first and then bring them into the project. At this point, a colour scheme and style guide were essential documents.

I would often go back to the client and work with them directly during this stage. Visual Design is more subjective and it was important that I settled on a design that not only the client liked but targeted the customer.

Development

eCommerce and CMS Development

Depending on the clients requirement for content editing, I would either use a PHP back-end CMS such as Wordpress, or a JAMStack solution such as Hugo.

I would first build out the basic skeleton structure of the website, then move on to HTML and CSS styling. Finally, I would take the static files and integrate them into a CMS platform.

Workflow

I worked minimally to make sure that I worked effeciently, ensuring I was on-time and on-budget. For design, I used a pen & paper, any platforn needed for UX research (e.g.Google Analytics and UserTesting.com) and Sketch for high fidelity designs. For development, I used Sublime Text and command line tools including Git, Gulp and Hugo.

Conclusion

Reflection

While I'm sometimes restricted by budget, I feel that it's important to spend time on User Experience (UX). Early on in my career, I would focus on features and styling, but this often resulted in a pretty product that didn't suit the customer and therefore didn't perform. As I'm often working with small businesses, my clients often have never heard of UX Design and so it's quite exciting to see their mind-set change from the beginning of the project to the end.

Next Steps

I am constantly looking at how I can improve my process as a Freelance Desiger and Developer. I'm currently considering the way that projects are structured as they currently have a set beginning and end. While it's useful to have a set time and budget for the client, it means that when the product is delivered, that's often the end of the project. Instead, I would like to actively perform UX research and continuously iterate.