23/10/15

Hixle Case Study

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:

  1. 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
  2. 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
  3. 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:

  1. Recommend projects and the resources used
  2. Recommend colour palettes for different project types
  3. Compare assets, discuss and recommend your favourite
  4. Add the resources used to a project
  5. Describe and deconstruct user flows
  6. Add tags on images to search like a designer (via emotions etc)
  7. Create relevant collections based on resources
  8. 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
Hixle Case Study
23/10/15

IoT Prototype

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
IoT Prototype
23/10/15

SpaceInFramers Case Study

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
SpaceInFramers Case Study
22/10/15

Kalo UI/X Style Guide

Kalo UI/X Style Guide

The handover process between a designer and engineer can be an art itself. It’s easy to miss the small details and the end result could be not what you expected. Therefore to make the process seamless as possible, I had to create pixel perfect components describing properties such as size, style, positioning and motion.

The guide helps the engineers move faster when it comes to developing the application and it’s also a handy guide to refer when designing new features!

no responses
Kalo UI/X Style Guide
22/10/15

Kalo Interactions

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
Kalo Interactions
22/10/15

SpaceInFramers

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
SpaceInFramers
22/10/15

Hixle Feed

Hixle Feed

I’ve been thinking about various 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 manage.

no responses
Hixle Feed
22/10/15

Google’s Material Design Animation

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
Google’s Material Design Animation
22/10/15

Woof App

Woof Mobile App

I worked on an ultra minimalistic app called Woof. It’s always disheartening to see stray dogs suffering on the streets and finding adopters isn’t always a straight forward process. The app allows you to easily locate, adopt or keep track of the animals that have been saved by awesome people.

no responses
Woof App
22/10/15

TinyLove App

TinyLove Mobile App

I worked on a mobile app called TinyLove which allows you to report incidents locally and helps bring your local community together within Taiwan.

no responses
TinyLove App