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

22/11/16

C U B 3 D

I’ve been playing around with 3D interactions & transitions as I’m really getting into VR UI design. It requires a different approach as demonstrating 3D depth and perspective can be a challenge in most design and prototyping tools.

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

Kalo Case Study

PRODUCT DESIGNER

AngelList · Dribbble

Overview

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 Team

1

FOUNDER

1

CTO

1

PRODUCT DESIGNER

5+

ENGINEERS

Introduction

The Problem

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.

Preliminary Stage

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.

Skills

UI Design

UX Design

Interaction

Animation

Marketing

Deliverables

High Fidelity Mockups

User Flows

Wireframes

Interactive Prototypes

Animated GIFs

Style Guide

UI Kit

Spec Sheet

The User Interface

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.

User Experience

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!

My Contribution

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.

Reflection

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.

no responses

23/10/15

IoT Prototype

Inspired by Google Now, I designed this IoT app allows users to install add-on cards to control different aspects of their possessions and wellbeing including fitness, home security and room temperature. Clicking on a card will display real-time information. More information along with a video demonstration is provided in the Dribbble link above.

no responses

23/10/15

SpaceInFramers Case Study

INTERACTION DESIGN

Play · Dribbble

Overview

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.

Skills

Interaction Design

UI Design

Coding

Animation

The Adventure

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.

From the Art of Design to the Art of Code

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!

no responses

22/10/15

Kalo Interactions

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. 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 disguised as buttons. I applied modularity as a design principle to help the user focus on the task at hand.

no responses

22/10/15

SpaceInFramers

I’ve been using FramerJS for prototyping and it’s been really fun learning about interaction, animation and also CoffeeScript! I wanted to push my interaction skills further so what better way to do it than creating a game 🙂

I wanted to create an alternative version to Space Invaders but with a twist using only FramerJS (hence SpaceInFramers). The aim of the game is to destroy as many targets as you can to progress onto the next level.

no responses

22/10/15

Google’s Material Design Animation

I was inspired when I first heard about the new visual language by Google. I’m really liking how motion and colour are unified to create feedback through material design.

no responses