Roy Quilor

Hello, I’m Roy Quilor, Product Designer, who loves simple designs. Say hi

To use the chapter links below, please play the video first.
00:07
Awkward moment
01:16
Good old days
04:13
Influence
16:52
Old portfolio
21:40
Side projects
37:15
Justify
43:04
Be nice
44:30
Do

Get to know me first

Dare to watch my first ever public talk at FutureRising in the University of West London. Hear my story on becoming a Web Designer, with lots of awkward moments.

Gains app

Another fitness app. Braun products and Dieter Rams influenced my design decisions to have as little design as possible. Almost feels like a utility app.

Prototype →


1. Problem

Forgetting to write down my personal best and using notes on my iphone seems disconnected. I didn't find a simple fitness app, so why not create a concept.

2. Design

A good friend told me, are you designing for designers or users? Users are my target, hence keeping it simple and MVP. I used elements from ios9 ui kit.

3. Workflow

Start sketching the idea down, use Sketch app to get a high fidelty concept and prototype in Marvel. Repeat the process since there could be many iterations.

Gridscores

The love of the grid, Tron, teletext manifested into this thing. Have you seen weird science?


1. Goal

Based on the above, I started to hack a design in code and played with the css to see how it would respond in different screen sizes.

2. Design

Match of the day in the 80's had a scoreboard text font. I used fontstruct to create the font and converted it to a webfont.

3. Delight

I used sound effects for when a goal is scored or when a penalty is missed. I shall upload the video soon. Do you play Football Manager?

To write or not to write

I started a blog to learn how to write, share my experiences and dabble in Wordpress. A combination of HTML5 boilerplate and Zenhabits theme to start with a simple base.

awwesome.com →

Branding

I created the Awwesome logo for the blog, keeping it clean and minimal. I will write about some of my interests: #introvert #design #father #mma #fitness #self-growth


1. Concept

My love of simplicity and martial arts led me to the type Knockout by Hoefler & Co. Testing out available names, I added the extra W.

2. Goals

Talk about my interests and create a habit of writing articles weekly. My goal is to inspire people, gain a following and learn about marketing.

3. MVA

Minimum viable audience: the blog covers a lot of topics. Once I find my voice, there will be a singular focus, it could be martial arts.

Mobile

The stats for mobile use surpassed desktop, so designing for mobile first was the way to go. Instagram sold for 1 billion dollars.


1. Responsive

Keeping the design simple will help it adapt to most of the devices out there. Complex layouts could hinder speed. The technology available now makes it easier to do.

2. Content is King

The audience wants the words and pictures. Decorating and creating fancy stuff can get in the way of the content. Let the user breathe and minimize distractions on the screen.

3. Fat fingers

There is less real estate on the mobile screen. Ensure your links and buttons have enough space so you can touch the target. Cramming information is bad for usability.

Intranet

Favourite project from my job, to redesign the company intranet.


1. Problems

The old intranet neglected and the blog unused. To book a holiday you had to email your manager, this system became a burden. Designing for marketers, developers and designers who can be a fickle bunch.

2. Goals

Create a modern design to encourage staff to blog. They could book holidays on the intranet, see how many days they have left. You can even nudge the project manager if they haven't responded.

3. Constraints

This was not a priority project since it was not paid work. I worked with a developer and we could not start the code from scratch, causing issues. We shipped it and worked in an agile way to fix them.

Lily Quilor

My wife is an Artworker who creates annual reports using inDesign.

lilyquilor.com →

1. Problems

The website was showing old work and her agency required an update. The web evolved and it was not responsive.

2. Goals

Take decent pictures of the work using our shiny new Panasonic Lumix GF6. Write a brief description on certain projects to outline her role.

3. Thinking

Keep the design simple and show high-quality pictures of her work. A single column, showing her portfolio in a linear way.

4. Results

Lily had contract and freelance offers. We fixed a couple of images that were not responsive. Done is better than perfect.

Contact

Have an idea or project you’d like to talk about? Get in touch:

Be happy and may the force be with you.