09/03/20

Plexicle iOS Game – Free Download

I’ve combined my favourite passions including design, interaction, branding, coding, animation, gaming, video and music production to produce this hyper-casual game just for fun. The aim of the game is really simple, just try to stay alive for as long as you can.

The fate of humanity lies in your hands in search of a renewable energy source. Try to stay alive and avoid obstacles by tapping to ascend and releasing to descend. Avoid asteroids and floating skyscrapers at all costs.

Grab the free game here. Grab the free wallpapers here.

no responses

08/03/20

Hixle v2

Hixle 2.0

When I launched Hixle 1.0 my goal was to allow designers to find the latest resources based on the best designs from around the web. It was a simple directory without all of the bells and whistles. Since then it has grown into quite a robust platform. Over the past year I have listened to the feedback from users and new, useful features have been introduced. In fact you may not even recognise the new version from the previous. So by saying that, I would like to introduce Hixle 2.0!

no responses

16/09/17

Hixle v2.0

Hixle has been updated to include dedicated sections for the latest palettes, gradients, fonts, tools from the best designs from around the web. Check it out for yourself at hixle.co.

Not only that, but you can now sign up to become a Hixlr and upvote your favourite design resources!

no responses

29/08/17

GraphQL Design Exploration

During the design process for creating the GraphQL Summit site, I took some time to explore different directions taking inspiration from elements seen within topographical maps such as depth, shadows and perspective.

no responses

29/08/17

GraphQL Summit 2017

I had the privilege of working with the Meteor & GraphQL team for their new summit event.

I was tasked with designing their landing page using a topographical theme. Many iterations later we finally settled on a design which you can view live here.

no responses

16/03/17

Hixle

Hixle.co

I’ve been working on a side project aimed towards designers. The app curates the latest design styles including colours, fonts and tools from the best designs around the web. These assets are the fundamental building blocks of visual design so it’s a great source of inspiration to have.

I’ve also been wanting to scratch my own itch and build something useful whilst bolstering my coding skills, so here I present to you….hixle.co!

no responses

07/02/16

IxD Exercise

Google IxD Exercise

INTERACTION DESIGNER

Download Assets · Interactive Prototype

The Challenge

Find This Garment –

Imagine a mobile app that enables you to impulsively identify and purchase a garment or accessory that you see in real life. Design an end-to-end flow covering the experience from the moment of awareness to purchase completion.

The Team

1

PRODUCT DESIGNER

Preliminary Stage

I have been tasked by the design team at Google to envision an app enabling the user to capture and purchase items of interest using image recognition.

I will assume that natural language descriptions of images have matured and the device used consists of a relatively high quality camera. Images are also assumed to be taken in good lighting conditions.

Skills

Interaction Design

UI Design

UX Design

Tools

Sketch

FramerJS

Research

Technology

I began by researching competitors that currently exist in the market. Based on what I gathered, there was a popular vote for point and shoot features. The majority of the apps required minimal steps from snapping a photo and returning the results. After reading the reviews, it turned out that the app relied heavily on the image processing algorithm which unfortunately was not as accurate as predicted. Nonetheless, the UI of the apps researched appeared intuitive and similar to each other.

Style

In terms of the branding, I noticed that the apps employed rich and vibrant colours. I assumed that the target audience were the younger generation such as users who would be familiar with using Instagram and SnapChat. The apps were image heavy with limited text. Nearly all of them consisted of a light interface and a grid layout.

Deliverables

Mockups

Sketches

Wireframes

Interaction Flow

Prototype

Visual Language

The brief stated that the app was for Google. As an avid fan of Material Design, I decided to incorporate the visual language into the app. The fonts used for the headings and paragraphs are both Roboto Regular and Condensed. The Ubuntu font was used for text containing numbers as I found it to be complimentary to Roboto whist taking up limited real estate within compact areas.

The colours chosen were inspired by the vibrancy of the fashion industry. Bold, vivid, electric and iconic are some of the words used to decide on the palette. As the app was aimed at the younger generation, I wanted to ensure that it will stand out from the masses.

Defining the User and Industry

I started to explore the idea of envisioning my own version of the apps that I previously researched. I believed that undertaking an action such as retrieving items from an image would be slightly different compared to the traditional search engines that only requires keywords or voice commands. Google Goggles painted a fairly accurate picture of what can be achieved through this but it seems to be a very challenging area to tackle due to a lack of high-end devices, image quality, analysis and speed or retrieval.

I began by attempting describe the characteristics of the user and the keywords associated with them. The brainstorming process helped me to unearth the relationship between the user and the goals. Finding connections can help foster new ideas. Finally I moved onto designing the rough sketches.

UX Process

The rough sketches provided me with a foundation to begin tacking the problem. The main feature of the app was to allow a user to take a photo and then purchase the items derived from the photo. In between those two actions could consist of many micro interactions and processes.

The UX will be dependant on the algorithm used for identifying the object within the image. For example, the user may be instructed to highlight an area or if the technology is more advanced, then no interaction may be required. If the algorithm couldn’t detect any objects within the image, then will the entire process have to start again? What happens if the opportunity has already been missed? e.g. the person wearing the item of interest has left the building?

I began by putting myself into the user’s shoes and envisioning the steps required to undertake the task. Certain decision will have to be made along the way and one of the best ways of clarifying them is through an interaction flow.

Interaction Flow

Designing an interactive flow helped me to determine how the user thinks. As design is a set of decisions, mapping out the journey from inception to completion can validate whether my assumptions are in line with the user’s goals.

Edge cases can be tricky to detect and figuring out whether the flow is heading in the right direction can be a catch-22. Determining what to do when things go wrong will aid in making the user feel at ease as there will always be an option to opt-out if necessary.

I’ve also described the animation states to occur when a specific action is competed or in progress. Certain transitions such as making a screen slide in/out can also ensure that the user understand that they are progressing throughout the app.

High-Fidelity Wireframes

As with most rough sketches, refinements will be required as you gain more insight about the goals of the app. I discovered that the navigation could be improved to enable a more seamless experience when going from screen to screen. I also illustrated how elements are connected to a screen in order to determine the target destination.

During this stage, I had to think more critically about how the user will be flowing around the content and interacting with certain elements. For example, the ‘taking a photo’ screen includes a camera button which when pressed, initiates a new screen. I had to determine whether the user will taken back the previous environment or whether a new screen will be initiated in order to move on to the next stage. I determined that moving forward should simulate a real life experience in terms of some level of uncertainty, but with consistent feedback.

Interaction Design

As this design exercise leaned heavily towards interaction, I took into account how, when, why and where the user will interact with the UI elements. Determining the state of the UI whether it’s through colour, shape, form or motion can make or break the experience. I wanted to ensure that the user would be comfortable through consistent feedback throughout the journey.

Floating Action Button

The floating action button is a primary action sitting at the top of the screen element hierarchy. As the element sits behind the most dominant feature, I wanted the experience to be delightful. The FAB creates a wave effect as soon as the user presses up. Once selected, the short journey to discovering the mysterious garments and accessories behind the photo begins.

Scrubbing

This interaction requires the user to scrub or smudge an area on the screen which contains the object of interest. This technique is fairly experimental as I believed it was the best way of getting from A to B in the fastest time possible, whilst also making the experience enjoyable.

I was inspired by colouring books as they’re known for being delightful to use. The paint brush effect inspires the user to paint objects on a canvas. An alternative would be to circle an area but as there could be many objects in the frame (some of them quite small e.g. earrings), it didn’t really seem practical. Plus it did not seem multi-touch friendly. As the user scrubs through the image, the overlay is removed revealing the object to search. Upon finger release, a circle dot is created to highlight the area affected.

Toggle

A toggle button eliminates the need for an additional button when attempting to complete more than one action. In a screen with limited real estate, the user can toggle each option to either display (active) or hide (inactive/default) information. This feature is widely used in popovers and navigation menus.

The user will be able to understand which state they are in through alternating styles and animation/motion. A default state will look similar to other relative elements as long as there is no interaction. An active state will see the item elevate through an animated drop shadow and the chevron icon rotated upwards.

Swipe Gesture

As the UI relied heavily on cards (both vertical and horizontal), an added benefit is having the ability to interact directly through certain gestures. As cards are fairly compact and limited in their functions, users could discover new ways of completing actions through swiping left and right.

Here a card can be edited by swiping to the left and deleted from the right. These gestures are fairly universal so the leaning curve is small. This feature eliminates the need to include repeated icons or popovers.

Download Assets

Reflection

Overall I enjoyed tackling the problem and exploring more of Material Design. Due to the restricted time limitations, I would have enjoyed developing an interactive prototype to demonstrate the context, interaction flow, motion, transition and states of the UI. I also believe the app would benefit from additional visual refinements. Finally, the hotspots relied heavily on the algorithm so unearthing edge cases through experimentation could have improved upon the experience.

no responses

23/10/15

Satigo Case Study

Satigo Case Study

PRODUCT DESIGNER

Site · Dribbble

Overview

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 Team

1

FOUNDER

1

PRINTER

1

PRODUCT DESIGNER

5+

EMPLOYEES

Introduction

The Brand

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

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 Sales Dashboard

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.

Preliminary Stage

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.

Deliverables

Landing Page

Logo & Mark

Business Cards

Sales Dashboard

Skills

UI & UX Design

Print Design

Marketing

Coding

Constraints

The Brand

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.

The Website

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 Sales Dashboard

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.

SM Stationary Branding Mock Up (Volume I)

The Process

The Brand

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 Website

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.

The Sales Dashboard

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.

Reflection

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.

no responses

23/10/15

Hixle Case Study

PRODUCT DESIGNER

Dribbble

Overview

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.

Skills

UI Design

UX Design

Branding

Marketing

Coding

Introduction

The Problem

There are a few issues that I frequently encounter when I’m working on design projects:

I want to be able to cross reference designs with each other e.g. recommending similar projects for inspiration or search for projects based on multiple resources or tools
It’s hard keeping up with trends so I want to see the latest font pairings, colour palettes, tools for prototyping used by other designers like yourself
Learning – Whenever I see a project I like, I want to know how it was built so that I can dissect it by finding out which font or tool was used

Constraints

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.

My Little Big Project

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:

Recommend projects and the resources used
Recommend colour palettes for different project types
Compare assets, discuss and recommend your favourite
Add the resources used to a project
Describe and deconstruct user flows
Add tags on images to search like a designer (via emotions etc)
Create relevant collections based on resources
Add tools used to create a project

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.

Deliverables

Landing Page

Logo & Mark

Web Application Mockups

Reflection

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.

no responses

23/10/15

CircularChaos Brand

CircularChaos Branding

The meaning behind my brand name.

cir · cu · lar

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.

cha · os

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.

Download My CV

no responses