SPIL GAMES

Company: Spil Games
Role: Product Designer
Project: Mobile apps and Web Portals 

I worked three years at Spil Games.  I started working as the interaction designer of the by-then new mobile department and my last role there was as Lead Product Designer of our gaming web platform (with million of monthly users).  I took care of improving the UX of the platform and I worked on the new branding and the implementation of it within all our channels.

 

Spil Games Product designer

During the time I worked at Spil Games I was involved in several projects, such as:

The creation of a couple of mobiles apps for specific niches, working on the whole process of the app, from the brainstorming till the creation of the promotional content.

The redesign of our huge online gaming web platform. This task included a complete rebranding; a new responsive layout, extremely focus on mobile and a new design system that needed to work in several languages and colour schemes.

The creation of a web game frame, responsive and and designed with a mobile first approach. This game frame is still now in all Spil Games web portals and it allowed the company to integrate all the content related with a game in the same web-app.

 

During the three years I worked in Spil Games I’ve learned to work in a big international company with big teams and heavily focus on creativity. I had the chance to work as lead designer of one the company flagships, Spil Games web gaming portal. To work with so many talented developers making products used by millions of gamers was a big step on my career.

Check other projects

Oso Polita Records

Client: Oso Polita Records
Project: Vinyl designs 

The Client

Oso Polita is a new Music Label based in Basque Country and created by the Last Tour guys (creators of the BBK Live Festival). With an independent soul and a very well choosen team o artists Oso Polita’s mission is clear: To make a statement in the spanish indie rock scene.

Music designer

I’m helping Oso Polita to define all the visual aesthetics of their brand. We are building together a music label brand from scratch, and that’s a really cool mission for a music nerd designer.

I’ve been working Oso Polita for almost a year now and we’ve made a ton of assets together: Ads for music magazines, tons of banners and a few vinyl covers.

Check Oso Polita Instagram to see some the works we’ve done together

Check other projects

Mockup_hermes_thumbnail_1440

Hermès Style GUIDE

Agency: AKQA Amsterdam
Client: Hermès
Project: Style Guide for new global site

AKQA Amsterdam hired me to create an easy-to-understand guide to help all hermès web editors to work with the new global site.

Context of the project

Hermès was going to release its new global site very soon. Being an international luxury brand with presence all over the world means hundreds of people working on the same site. It was mandatory to make an extremely easy to understand guide to avoid disinformation or lack of coherence between so many teams.

hermes_styleguide_Mockup_cover

It’s always challenging to write and design a style guide for a well stablished brand. Specially if it’s part of the luxury business.

The Challenge

How to simplify hundreds of jira tickets and technical documentation of a not-finished-yet site with e-commerce pages, blog, editorial and more than thirty language versions in just a twenty pages pdf? All this keeping the aesthetics of one of the most iconic fashion brands? 

Solving the puzzle

The first obvious thing to do was  research. I expend one week studying the site and the CMS. I dive into all the technical documentation and I created many blog post and content pages with dummy content to understand how it worked.

Once I understood the functionality of the site I studied the aesthetics. Which are the brand colours, the typography, the layouts and the grids used  in the site. I studied which type of layout goes with each type of content testing and testing again the CMS.

 

When I fully understood the structure and functionality of the site I created a very clear index, grouping widgets per type of pages and pages per type of content. 

The work process

Once the structure was clear all I had to do was to fill up the blanks. I started creating super simple wireframes of every type of widget within the site / per device view. When i got a clear overview of all the smaller structures I created spreadsheets explaining the characteristic of these different widgets.

Team Work

I had a very easy going communication with the AKQA Amsterdam developers during all the time I was working on this project.  Without them it would be almost impossible to understand the technical documentation properly. And since they build the site they where the ones who really had the information about how it works. My role was, sort of, a developer-human translator 😀   

Work approach

My philosophy during this job was to “try to explain as many things as possible with illustrations and icons instead of words” to make it more universal and easy to understand , regardless of which is the cultural background of the user.

Results and conclussions

👌🏼

The work was done on time and the client was happy with the result. The constrains of having to work remotely with the client  didn’t interfere with the communication flow (Hermès HQ is based in Paris) and the experience to work with such a talented people from a multi awarded agency was great.

Check other projects

Berlin

TYPOGRAPHIC POSTER​

Client: Show Us Your Type
Project: Berlin Typographic Poster

SHOW US YOUR TYPE is a project about two things: type and cities. When a friend told me about this guys I had to give it a try, ’cause I love music and travel. SUYT started to provide a creative platform for designers to share their talents and explore cities from a different perspective, and Berlin was their first mission.

City of Music

I love Berlin, I’ve been there a couple of times and I think it’s a very special city. I spend a long time diving into their vinyl shops and dancing in its crazy clubs. When I made this poster Minimal Berlin Music was super popular so the concept appeared easily: Music Typography

2016_05_whitelabel.original

White label vinyl records are generally 12-inch LPs, or 7-inch singles that come with a plain centre label and are in plain packaging.  All respected analog DJs have tons of these in their bags, so I thought it was the perfect symbol of the underground Berlin music scene.

I made every letter to look like a vinyl, rounded when possible. The last two letter/vinyls are still inside the iconic white label bags, to accent the underground vibe. The lights over the background are inspired by the clubbing light ambient.

Result

My poster was one of the selected ones. It’s still available at Show Us Your Type. 

Check other projects

SPIL GAMES

Company: Spil Games
Role: Product Designer
Project: Mobile apps and Web Portals 

I worked three years at Spil Games.  I started working as the interaction designer of the by-then new mobile department and my last role there was as Lead Product Designer of our gaming web platform (with million of monthly users).  I took care of improving the UX of the platform and I worked on the new branding and the implementation of it within all our channels.

 

Spil Games Product designer

During the time I worked at Spil Games I was involved in several projects, such as:

The creation of a couple of mobiles apps for specific niches, working on the whole process of the app, from the brainstorming till the creation of the promotional content.

The redesign of our huge online gaming web platform. This task included a complete rebranding; a new responsive layout, extremely focus on mobile and a new design system that needed to work in several languages and colour schemes.

The creation of a web game frame, responsive and and designed with a mobile first approach. This game frame is still now in all Spil Games web portals and it allowed the company to integrate all the content related with a game in the same web-app.

 

During the three years I worked in Spil Games I’ve learned to work in a big international company with big teams and heavily focus on creativity. I had the chance to work as lead designer of one the company flagships, Spil Games web gaming portal. To work with so many talented developers making products used by millions of gamers was a big step on my career.

Check other projects

heineken_experience_welcome

Heineken Experience

Agency: M2Mobi
Client: Heineken
Project: Heineken Experience Interactive Tour

To do a good, deep research for this project we were invited few times to the Heineken Experience Tour in the old factory in Amsterdam. Very immersive 🍻

Context of the project

We were hired to create a mobile version of the interactive tour available at the Heineken Experience. Our app included many languages that weren’t available at the original tour. 

heineken_barrel

We were a small team of one android developer, one IOS developer and me on the role of UX designer / product owner.

The Challenge

How to add in lightweight app so many different videos, each of them in seven different languages? Impossible, that’s the answer… 

To create an app that allow us to have all those option and keeping it light we create a two-parts app, The 1st part was pretty light, and just included the age gate and the language selector. Once the user choose the language the second part of the app starts to download, showing a funny animation of a Heineken beer being filled. The users are advice to download that part using Heineken Experience’s free Wifi network .

Wireframing

We did the tour at the brewery many times. We mapped every step of the tour and took photos of the place as a reference. Once we got a clear picture of the tour we translated that into wireframes. In that step we planned the different interactions and gestures.

 

The app was designed when the common practices in UI were pretty different than the current standards but it’s looks up to date.

Scrum and daily stand up meetings

The time frame to design and develop the app was pretty tight, but doable thanks our daily stand up meetings and good use of the scrum methodology.

Work process

The process was:
1  – Creation of the Interaction design (without visual features)
2 – Start to develop IOS and Android (basic interactions)
3 – Creation of the User Interface designs
4 – Implementation of the UI deigns
5 – Test and iterate

Final words

To work with Heineken was a dream job and a very valuable experience. It’s a brand with a lot of experience working with advertising agencies and creating innovative products and it works my first job having a lead role. 

heineken_bottle

Check other projects

spaces_UI_kit_rotated

Spaces App

Agency: Applified
Client: Spaces
Project: Redesign of Spaces App

The Spaces app includes a rent-a-room easy to use platform and information about the coworking where the user is installed.

Context of the project

Spaces offer creative working environments with a unique entrepreneurial spirit. With more than 150 locations around the globe Spaces is a community of thinkers, achievers and imagineers.
Spaces-Herengracht-Amsterdam-designer-coworking-office-interior-

The goal was to create a new version of their current app developing a more minimalistic design system.

Design System

To work with a design system is very useful to create a coherent User Interface. It helps to keep all the elements aligned and saves lot of time when creating new screens. The UI Kit I created for this project help us achieve a consistent UX when building new features.

I created a UI kit of minimal cards that could work over flat background or full-screen photos. 

Results and conclussions

Working with the principles of minimal design we created a very simple app, but packed with useful features for the Spaces users. Both client and agency where happy with the result and the app got a very good score in Google Play (four stars).

Check other projects

Vondel Park 3 Menu

Agency: Applified
Client: Unlimited Label
Project: Vondel Park 3 Menu design 

The Place

Vondel Park 3 is settled in a very special location. It’s surrounded by the most iconic park in Amsterdam and it’s designed with a very distinguished mix of industrial and minimal styles. It was important to design a menu that breathes the same principles.

Minimal & indutrial

I looked for wood planks in every possible shop in Amsterdam till I’ve found the type of wood that was strong but with a nice texture; not too rough, not too polished. I created an illustration serie of natural elements that can be found in Vondelpark and I choose a hand made typography inspired by the healthy and natural ingredients of the menu. All mixed with a colour scheme inspired by copper and iron.

It can look easy to design a “simple” menu compared with digital products but it can be way more challenging that it looks. For this type of project is a must to be extremely thoughtful about every detail. Including the materials, printed or not used in the project. 

The client liked my design so much that he asked me to create a vinyl design for another of their business, the Caffe Esprit, a big coffee place in Spui Straat, in the center of Amsterdam.

Check other projects

app_social_trading2

ayondo social trading

Company: Ayondo
Role: Lead Designer
Project: Social Trading Platform

In the two years I’ve been working as lead designer of ayondo we’ve developed a new mobile trading app, a new corporate site (with a tested conversion improvement), a new registration design system, a responsive trading platform, a blog and some other projects…

What is ayondo

Ayondo is a FinTech group founded in 2008. Ayondo has developed one of the world’s most intuitive trading platforms and aims to develop more tools to allow more people to enjoy the rewards of the financial markets. We have offices in London, Frankfurt, Singapore, Toronto, Madrid and Barcelona.
laptop_home

My role as Lead Designer of ayondo, among other things, is to develop a design system to  build digital products faster and to improve the user experience.

The Social Trading Mobile App

One of the first important tasks I got to do was to re-design the Mobile Trading App, which wasn’t available for Android by then. Inspired by Material Design and the current ayondo branding philosophy I created an UI Kit and an interactive prototype suitable for mobile devices.

I worked with a team of developers based in Toronto and a product owner based in London. Remote work with three different time zones was part of the job. This type of communication makes us being as productive and straight forwards as possible.

Registration Process

The previous Registration Process to create an Ayondo account was technically good but quite complex for the users. So my main goal when I was assigned to work on this project was to do it as simple as possible, considering all the legal restrictions we have, as any other complex financial product.

We worked with the assumption that our users would prefer a Registration process with many steps, being those steps very easy and fast to interact with than a registration form with just four steps, being those steps extremely long and filled up with many forms and questions. The fact that we created very short steps (one or two questions top per step) made very easy to accommodate them into a mobile first design.

 

When I fully understood the structure and functionality of the site, I created a very clear index, grouping widgets per type of pages and pages per type of content. 

New Social Trading Platform

Using a look-and-feel similar to the Social Trading Mobile app I created a big design system that covers all the features of the Social Trading Platform, adapted per device view and widget function. The purpose of this new Social Trading platform is to dispose all the functions in a more intuitive layout. This new platform basically looks more like a hardware tool than a regular marketing website.

Ayondo Blog

In order to keep a consisten conversation with our clients we need to talk to them always in the same tone. To do so we needed to rebrand all our digital products, which included the Ayondo blog. It was a great opportunity of creating new engaging content too. With those two goals in mind I created this responsive design, that following Ayondo brand Style is more focus on readability and content.

New corporate Site

We redesigned our web using Google Design Sprint method. Before the official launch we created a test against our previous site. The results were positive, so we implemented the new approach on our two main product landing pages. We tested these LPs too, positive results again. Yay!

ayondo_home_laptop

FinTech and Design

To work in an international company like ayondo, working with teams in four different time zones and being responsible of designing complex FinTech products is being a very valuable experience. On top of that we use testing tools and analysis, which I believe, is is the only way to really create meaningful  products for our users. 

Visit ayondo

Check other projects

HEMA loyalty membership app

Agency: TBWA \ Mobile
Client: Hema
Project: Loyalty Membership app

HEMA is a Dutch discount retail chain that started life as a dimestore in 1926, currently having more than seven hundred shops in Netherlands, France, UK, Germany, Luxembourg and Spain.

Context of the project

HEMA just launched a new branding. It was a soft redesign of the brand but making it more modern and clean. This new style was needed to be implemented in all their digital products. TBWA / Mobile was assigned to make their new Loyalty Membership Mobile App. And I was hired by the agency to create the UI of the 1st stage of the project.

coupon_square

HEMA is a big thing in Netherlands. Their shops are everywhere. You can find easily random people enjoying their famous 🌭

Challenge

We had to create a coupon loyalty program for IOS and Android. So the client could storage points  to redeem vouchers. One of the challenge was to coordinate with the different agencies working within such a big project. 

It was my 1st big gig as a freelancer and I was quite impressed by the situation. I never worked before with TBWA\Mobile and I wanted to look good. I also was living in Netherland for six year by then so I was quite a fan of HEMA (I’m honest here, I love the fact that I can buy a hot dog and new notebooks in the same place), which made me bit more nervous.

Working close to the client (literally)

To create a fully functional loyalty coupon program, one  that works in real life situations, you need to have (dah..) a functional product to integrate in your product. 

To do so I worked one or two days per week in HEMA headquarters with the team assigned to create this program. HEMA HQ is a really cool place, completed branded with the new design. Even the building is designed with the same principles of simplicity and and fun. 

 

To work with a HEMA team in their HQ was a very good experience. We could iterate the prototype quickly. We had easy/short meetings to keep everybody on the same page during every step.

The work process

On the first week I created a basic interactive prototype of the app based on the documentation about the program and adapting the designs of the new HEMA branding. 

After that I worked with a remote team of developers using Scrum method and weekly sprints. The client was involved during all the process helping us to shape the correct flow of the Coupon program.

More about the design

I worked close to the agency that created the new branding and with the agency who made the e-commerce site. It was a 6 weeks project and I designed more than forty screens.

Long story short

My first big gig as a freelancer was an easy going collaboration with a big dutch retail brand. I had the chance to improve my remote-job communication skills, I created an interesting e-commerce product working closely with the client and I collaborated with the amazing people from TBWA\Mobile. I can say I’m pretty happy about the result. And, last point, my job was finished before the launch of the app but the ending product is very similar to my work for HEMA, so I guess they were happy too 🤟🏼

The app is available in apple store and google play

Check other projects