My client, a former designer at Google approached me whilst I was wrapping up my latest design project. After graduating from TechStars and securing £1M+ funding for his startup Kalo, he needed help with creating a more visually appealing and robust platform. I was tasked with creating a new, intuitive UI for the Kalo desktop platform as well as redesigning the UX from scratch, prototyping, interaction and animation.
The idea was to create a supplier management SaaS platform where clients can easily manage their vendors. My client explained that based on personal experience, it’s very difficult to manage external agencies and freelancers within a large organisation.
Keeping track of who is doing what, where and when could be managed much more efficiently in the cloud. The application was aimed at 2 target audiences, clients and suppliers.
After having an initial conversation with my client, piloting the MVP and submitting the client survey to uncover the needs of the user, it was clear that this would be a challenge that I’d enjoy. He stated that he wanted to create the best possible experience through visuals, interaction and motion.
As design founders are quite rare to come across, I knew it would be a match made in heaven! After I gathered the necessary resources, I went straight to the drawing board and began researching competitors and sketching out ideas.
Initially I was tasked with undertaking a small design exercise to understand the workflow and design a base UI that could be iterated upon at a later stage. Designing a visual language that was going to be used consistently throughout the app provided me with an opportunity to explore new typography, layouts, accent colours and patterns.
When I inquired about providing inspiration to help with direction, it turned out that my client was just as much of a fan of Material Design as I was! The spec provided a great foundation for structure and common design patterns.
My goal was to create a visual language that was intuitive, easy to understand and delightful to use by guiding the user with feedback using motion. The UI is built with reactivity in mind, meaning that I could ensure the user never gets lost by guiding them with instant feedback during the start, middle and end of each action.
Inspired by material design, the structure is very modular as my aim was to minimise cognitive load by masking non primary actions inside of compact modules formed as independent buttons. I applied modularity as a design principle to help the user focus on the task at hand. By incorporating z-depth to display dimensionality, the modules appeared independent of each other even though their positioning was relative.
This reactive system also provides flexibility when using the app on a smaller device. An example of dimensionality is when a client attempts to add a supplier to a category, they can decide to add a new category if none are found. Selecting this option will trigger an inner module that is independent of the outer module. There’s no need to click back and forth and the task is not interrupted with alerts. Once a new category is added, feedback will be displayed instantaneously.
The methodology employed was agile so each user story was formed into epics that are just a series of small user stories. Working directly with my client, I broke down each epic into user flows by identifying inputs, outputs, processes and other interactions to determine how best to achieve the goal in the shortest amount of time and with the least amount of effort.
The process is fairly iterative in order to prevent wasting time and resources. Each user flow, wireframe and mockup required frequent communication between my client, the engineers and myself. After the user flow was approved by the team, I then went on to creating the wireframes followed by the high fidelity mockups.
I had regular meetings with Peter (online and onsite) to discuss the design feedback and apply any amendments if necessary. I also collaborated with engineers to discuss the spec sheet and recommend improvements to the visuals that may have been missed, left untreated, or not aligned with the visuals in the mockups. Going agile can sometimes make the small details easy to miss!
Since April 2015, I have designed and iterated on over 200+ high-fidelity mockups for both desktop and Chrome, created countless user flows and wireframes, designed a full page marketing site, hand-coded interactive prototypes, animated logos, generated an intricate style guide and spec sheet.
Even though the app is still in beta, I consider it a success based on what I’ve heard from real users so far. The feedback has been very positive! Kalo has already lined up some big name companies to pilot the app and they’ve received quite a bit of praise for the intuitiveness of the UI and UX.
To be part of building a product from the ground up and seeing it grow into a platform where real people use it has been surreal. It’s been a team effort that has required constant communication between myself, the founder and engineers. To make peoples lives better through design, even if it’s just a little bit, is why I do what I do.
I was approached by a small recruitment firm based in Central London inquiring about a complete overhaul of their brand. My client required a full range of services including web, print and logo design. He wanted to move away from the generic recruitment agency style and introduce something fresh and modern. I thought it would be a great opportunity to try something new and see if I could challenge the status quo.
I was tasked with creating a new and modern brand, designing and coding a marketing site, designing print material including business cards and brochures, and designing and developing a sales dashboard.
The old Satigo brand was generic and predictable. The colours didn’t really represent the vibrancy of the agency and the style felt slightly outdated.
The website didn’t stand out amongst the saturated sea of agency sites across the web. Satigo had two target audiences – companies looking to hire, and candidates for hire. The static site didn’t really communicate Satigo’s mission clearly and there wasn’t any information about current opportunities available by the agency.
The company was having a hard time tracking their sales as they had to rely on tedious spreadsheets to see how the whole sales team was performing. The spreadsheets contained raw data that required lots of scrolling and wasted paper.
I crafted a survey for my client to try a gauge his intentions, company information and target audience. A few phone calls later it was clear that the open-ended project would be quite a challenge that I would enjoy tackling. I then proceeded to devise a clear scope that outlined expectations, goals, milestones and deliverables.
Reinvigorating an entire brand seemed daunting at first as there is no right or wrong solution. The output is very subjective and there can be countless revisions due to a lack of direction. Thankfully the survey narrowed down the requirements and provided me with a somewhat clear path to investigate. The logo and mark had to be recognisable in black and white, small and large and on web and print.
I was provided with examples of what my client saw as inspiration for the website. I took into account the keywords that were being described during our meeting to help with the direction. Words included modern, fresh, different, loud, one-pager, visual and not too text heavy. Defining which target audience to design for turned out to be quite a challenge as there was a clash between modern (candidates) and traditional (companies) styles. I had to ensure that both were being catered for. The website had to be fully responsive and work on all modern browsers.
The requirements for the dashboard were fairly specific as the sole purpose was to make it easy for my client to glance at the real-time sales statistics on a TV monitor instead of staring at rows and columns in a spreadsheet. So that meant the style of the dashboard had to be obvious, easy to digest and predictable. The dashboard also had to be fully responsive and work across all modern browsers.
My client iterated that the brand should reflect Satigo’s mission of being a leader in recruitment. The logo and mark was to stand out and move away from the generic recruitment stereotype.
My process consisted of plenty of sketching, constant communication and many iterations. My intention was to get out as many ideas as possible, even if they did seem rough or wild! This left more room for experimentation. I used Illustrator and explored complimentary colour palettes. I mixed and matched colours that felt electric and finally settled on blue and orange. I would present my work for feedback, even if it was unfinished and then iterated as necessary. Rapid prototyping helped me get closer to the goal much faster.
Eventually we settled for an abstract mark that was bold, strong and dimensional. The simplicity of the design allows the mark to be easily positioned on the web regardless of whether it’s a social media icon, favicon, grayscale overlay or print such as signage, business cards, t-shirts and brochures. I finalised the assets in Illustrator and then the vector artwork was sent to the printers.
The marketing site had to communicate to both audiences – companies looking to hire and candidates available for hire. I had plenty of direction derived from the branding task so I knew roughly to approach the design.
I began sketching out wireframes that demonstrated the architecture and hierarchy of the information and overall layout of the one-pager. The brand colours were included along with the logotype. The copy was supplied by a copywriter so I had real data to play with.
Once the wireframes were approved, I then moved on to the high fidelity mockup. I approached the design mobile first as I could focus on the essentials without bloating the site with unnecessary visuals. Part of my task was to design the site similar to an infographic as opposed to a generic about us site. The font used was clear, bold and craved attention.
After the mockup was approved, I then began developing the site based on a static template that was recommended by my client. I had to convert the site to WordPress as a real-time ticker was required to display the latest jobs from the MySQL database. I adapted the template using HTML, CSS, jQuery, PHP and MySQL to fit the new design and ensured that it was cross browser compatible and fully responsive through testing.
I was tasked with transforming a large Excel spreadsheet into a real-time, interactive dashboard for the web. I gathered the requirements from my client through online and onsite meetings. The meetings consisted of presenting wireframes and deciding on the most appropriate chart to display every piece of sales data.
Once the wireframes were approved after many iterations, the high-fidelity mockups were designed. This step went rather swiftly as the dashboard is much more content-focused. I used flat design to keep the style simple and on-brand.
The design of the dashboard consisted of a sidebar for easy navigation access and a main content area for displaying the sales data represented by charts. Visuals are much more easier to digest than raw tabular data so a lot of pie charts, line and bar graphs can be seen across the app. The design of the sales form was important as that is what drives the dashboard. The limited amount of fields were carefully chosen in order to reduce cognitive load.
The project was challenging, yet rewarding. I managed to develop some new skills and I also had the opportunity to push myself personally as well as professionally. My client (as well as his team) was very satisfied with the results and based on what I’ve been told, the project has helped them reach their goals of attracting new leads.
I’ve been thinking about different ways that could make my life easier as a designer. There are many tools out there that helps my design process but sometimes I have to scratch my own itch! I’m working on a side project to help designers like myself be more productive by building a new community where resources are easier to find, manage and share.
There are a few issues that I frequently encounter when I’m working on design projects:
Designing an open-ended product where you are the client can be just as challenging as working with strict guidelines. I set constraints for myself to prevent feature creep, minimise perfectionism, and progress at a faster pace. Typically I would give myself 2 week sprints where I would exclusively focus on different parts of the project such as branding, UI design, UX design, icon design and marketing.
During the course of a few weeks, I let the idea manifest itself so that I could determine whether the solution was actually worth pursuing. Before I reached for my moleskin, I sent a few emails to a couple of fellow designers to see if there was any demand or whether they could resonate with the issues that I faced. It turned out that my assumptions were true!
I went ahead and followed up with a few more questions to try and refine the idea and gauge more interest. I used the lean methodology to ensure that I wasn’t wasting my time and building something that nobody wants by talking with potential users. Eventually I began seeing a pattern and deconstructed the feedback to mould into features shown below:
I then proceeded to draw a couple of rough sketches for the MVP. My intention was to validate the idea quickly and show something, even if it’s rough, to designers who I assumed would find it useful.
Over the course of a couple of weeks, I validated the idea and had a clear path to begin designing the high fidelity mockups based on the iterated wireframes. This meant quickly creating a brand and style guide.
I wanted the design to be simple, flat, modern yet flexible. Something that would work well with either a light or dark interface or a combination of both. The colour palette I chose was somewhat experimental yet retro and playful. I wanted the combination of electric and pastel colours to make the brand adaptable to the ever changing industry.
The branding contained a mark in the form of an exotic bird. I wanted the Hixle symbol to represent a part of me as this project came into existence based on my experiences as a designer. So even though I have my own story to tell, I wanted the brand to have it’s own story too. The gradient colours seen within the mark represent an animal that can adapt it’s appearance to any environment. Later on I may decide to include a logo type to compliment the mark.
The project is currently under development and I’ll soon be launching the MVP sometime in the new year. I wanted to give back what I have learnt throughout my years as a freelance designer. This project has given me an glimpse into how to approach the lean method and saving time, money and resources by talking to real people. I don’t know where this journey will lead to, it’s uncertain. But what I do know is that designers should have all the tools they need to create the best experiences.
CircularChaos was coined from my approach to solving design problems. It represents my philosophy and the core values that I hold.
The word ‘circular’ states that a circle, which is unique to any other shape, has no start or end. This reflects my ambition and passion. I am constantly learning and adapting to the ever changing industry.
The word ‘chaos’ originates from the chaos theory. Even if patterns initially appear random, they in fact have a structure to them. The outcome is reliant on its initial conditions. This statement is imperative because as a designer, I have to seamlessly iterate in order to improve my work. I do not purely design for aesthetics, each element is positioned intentionally for intuitiveness. There is a science to design, just like the golden ratio in the Mona Lisa.
Since I began freelancing, I would typically provide my clients with mockups that only presented the end result. The issue with this is that creating a static mockup in Sketch or an animation in After Effects makes it difficult for the end user to grasp the context, hidden states, screen flows, feedback and interaction states.
I decided to go on a journey to learn a few modern tools for creating interactive prototypes. My intention was to help my client as well as engineers understand how the product works and my thinking behind it. Based on my experience during the handover process, it can become fairly muddled as a mockup doesn’t explain everything to an engineer. This will regrettably lead to extra time being spent explaining all of the intricate details, or leaving the engineer to make design decisions.
After experimenting with different prototyping tools ranging from drag-and-drop interfaces to generator plugins, I stumbled across FramerJS. The learning curve appeared quite steep at first as the tool required knowledge of CoffeeScript. But as it was code, the only limitation is the imagination. Additionally, learning a transferrable skill can only be a good thing! I saw the examples and was impressed by how little code is required to build an interactive prototype.
I wasn’t really tempted by the drag-and-drop tools as they can be quite limiting in terms of what is possible. Plus I didn’t want to be tied down to a single tool. Using After Effects is great as animating objects and paths is fairly simple and yet powerful enough to make complex transitions.
This disadvantages of using AE is that exported animations are not interactive and editing the timeline can be tedious as each object becomes dependant on each other. Framer on the other hand, was interactive but working with paths requires a few hacks ( using SVGs). I finally decided to bite the bullet and dive right into the docs!
I spent a few months practicing Framer by building small interactive prototypes such as a material design button producing a wave effect when clicked. I also spent time reading the docs, improving my CoffeeScript design pattern skills and interacting with the awesome Framer group on Facebook.
Over time, my confidence grew in both Framer and CoffeeScript so I began giving back by helping out other designers within the Facebook group and also providing my clients with context. This helped to reinforce my learning and also meet some cool people!
I wanted to take it to the next level by providing full app prototypes to my clients so I thought to myself, “What better way to learn about interaction than by creating a game?”.
The following weeks consisted of me designing the mechanics of the SpaceInFramers game. I implemented a popular collision detection algorithm used in game theory to detect when a ball hits a target using the square root of both objects. I tried to keep the structure simple so I went with the modular pattern to organise my code.
The game features up to 5 levels and even includes a power move! I did end up learning quite a lot about code organisation, using listeners, callbacks, special underscore functions and vanilla JS. I wanted to make the experience immersive so every levels makes it that much more challenging!
I was a fan of Space Invaders as a kid and that inspired me to create a slightly modified version of it using material design. Sure I came across bugs and strange error codes, but thanks to the Facebook community (and a bit of trial and error) I managed to resolve them eventually!