Nuno Coelho Santos

Email
Mobile
Line
Twitter
GitHub
Dribbble

I’m Nuno, a product designer based in Tokyo.

I’m Nuno, a product designer based in Tokyo. Specializing in user interface design, with a penchant for service design, prototyping, and development for the web in Ruby or for iOS in Swift.

Until recently I helped Thread reinvent personal styling as a product designer, and prior to that, I worked as a designer and developer at ustwo.

Previous clients include Google, IDEO, and Sony.

Currency is an incredibly simple currency converter for iOS. Download it for free on the App Store.

Project:

Currency for iOS

Role:

Product Designer & iOS Developer

Date:

January to March 2016

Website:

http://currency.nunocoelhosantos.com/

Description:

A side-project with the goal to create a product that does one job incredibly well and learn a new programming language along the way. Special thanks to Jonathon Toon, Johnny Linnert, Xin Nie, Asuka Yamashita, Alex Abian and Tiago Alves.

After having used various currency converter applications that are available on the App Store either free or paid, I found that these were either too complex, unintuitive, or yet to be updated to new iPhone screen sizes. Very often these apps have walkthroughs to explain the complex interactions, navigation or features they can provide to the user, instead of being simple to use.

I designed Currency to be the simplest and most intuitive currency converter in the App Store, that would look perfect on any iPhone screen.

Goals set when designing Currency for iOS

The final design focuses on doing one job well: converting a foreign currency into the customer’s home currency. Features such as currency fluctuation graphs, in-app settings and notifications were not necessary for this job.

One of the most unique aspects of Currency is the formatting of the currencies, with the correct symbol, correct number of decimal places, decimal divider and group dividers.

Currency for iOS App Icon, work by Nuno Coelho Santos

The icon is designed to fit perfectly with iOS, presenting Currency as if it is part of the operating system.

Currency for iOS glyphs and icons, work by Nuno Coelho Santos

Most currency apps use country flags to illustrate the different currencies. But some currencies like Bitcoin or the Euro don’t belong to a specific country. For this reason I instead used currency symbols and correct currency formatting, along with currency codes to correctly represent the different currencies.

Currency for iOS Design Process, work by Nuno Coelho Santos

Some early sketches displayed multiple currencies on the main screen and used country flags. One of the early designs uses a blue and dark visual style that I later on retired. When I started development and showed the app to my friends they seemed confused about which number they were editing, so I added a text input blinking cursor.

The final design is bright and shows activity indicators when the currency exchange rates are being updated. Other settings were added via the iOS Settings based on user request.

Currency for iOS Development Process, work by Nuno Coelho Santos Currency for iOS Xcode Storyboard, work by Nuno Coelho Santos Currency for iOS Xcode Exploded UI View, work by Nuno Coelho Santos Currency for iOS Source Code Screenshot, work by Nuno Coelho Santos

This was the first app I developed for iOS, and my first time writing Swift. The entire development of the application took about 3 months, with most of it being bug fixes and improvements to the code quality. The source is available publicly on GitHub.

Currency for iOS localization screenshots, work by Nuno Coelho Santos

The application, website and marketing material was localized to the US, the UK, Japan, China, Hong Kong, Taiwan, Latin America, Spain and Portugal. Three months after release, 76% of the downloads came from the Asia/Pacific region.

Six months after release, Currency was downloaded over 6,000 times and has an average rating of 4.5 stars. You can download it for free on the App Store.

Currency for iOS marketing photo, work by Nuno Coelho Santos

Thread offers one-to-one personal styling and access to a powerful clothing recommendation engine.

Project:

Thread

Role:

Product Designer & Front-end Web Developer

Date:

2014–2015

Website:

http://thread.com/

Description:

Thread is an online styling service, currently only for men in the UK, that joins the world’s best fashion stylists and Artificial Intelligence in a single platform to give users personal styling for free. Thread is a YC’11 start-up founded by Kieran O’Neill, Benjamin Phillips and Ben Kucsan. I joined the team in 2014 as a product designer and worked alongside some of with the smartest people I’ve met so far.

At Thread, we defined the long term vision for the company and broke it down into product, operations, styling and marketing goals. While I was part of the Thread product team, I would take on one of these challenge every week and set it as a weekly goal.

A typical week at Thread would include brainstorming and sketching on Monday, visual design and critics on Tuesday, prototyping and testing on Wednesday, development and testing on Thursday and Friday. Every Friday we would demo the work done and some of these solutions would be shipped on Monday the following week.

Challenge: How may we improve our mobile experience?

Thread users visit Thread from their mobile more and more over time devices, however internally we always had the habit of designing thinking on the desktop browser first. So in this project we looked at what the ideal mobile experience would be like and how we could reshape our design and development process to fit a mobile-first approach.

We started by tackling this challenge by designing a native iOS experience of Thread. We built a wireframe prototype and asked users to visit our office to use it. After a few interviews, everyone in the team felt like this was an improvement over the current experience.

Thread V2 iOS wireframes, work by Nuno Coelho Santos

We also explored a different direction, that focused on systematizing our web experience to be more modular and targeted for mobile browsers. We called this new system Thread Whitechapel. It included new type styles, new touch interactions, new guidelines for flows and page content, and a new set of standard HTML components.

This resulted not only in a better mobile experience, but it also allowed us to design and develop faster while keeping our visual language consistent.

Thread V2 modals redesign, work by Nuno Coelho Santos Thread V2 modals redesign, work by Nuno Coelho Santos Thread V2 component library, work by Nuno Coelho Santos
Challenge: How may we keep providing a Thread service even while stylists are offline or in vacation?

Thread has a powerful recommendation engine that helps match the outfits each stylist makes to each client preferences, but when the stylists are away we can’t generate these recommendations for the users. So how should Thread work when this is the case?

At the time, stylists could use the Thread engine to find clothing items and users could receive recommendations from stylists. But a channel between the user and the Thread engine was missing. During the first week, myself and Dan Palmer explored how an experience of using Thread’s engine without having the stylist involved would look like to users.

Thread Browse icons, work by Nuno Coelho Santos

We developed the concept of a curated store. Imagine a clothing line, made of the amount of items a person can realistically own. A curated wardrobe. We wanted an experience similar to walking to a clothing store and seeing only new items that you would love. This became Thread Browse.

Thread has thousands of items and there are thousands of online stores with thousands of items that are irrelevant to their users. Thread Browse is the curated shopping experience for when your personal stylist isn’t available. Designs show the items categorized by outer to inner-most clothing, and a limited number of results is displayed below. All matching the user preferences.

Thread browse desktop design, work by Nuno Coelho Santos

Thread has been growing steadily over the last few years and I’m incredibly proud of all the work we have done together. Thread will be available worldwide in the near future. If you’re looking for menswear styling in the UK, sign up here. If you’re interested about working at Thread, see their jobs page.

Other projects involve branding, photography, and software development.

Polaroids from “A Year in an Instant”, a project by Nuno Coelho Santos
A Year in an Instant

For my first 365 days living in Japan I took an instant photo every day and published it online. This was a successful Kickstarter project where the 80 backers get to claim their favorite photo from the blog for themselves. Read the diary here.

Opening photo from “15 Days in Japan”, a project by Nuno Coelho Santos
15 Days in Japan

One of my most popular side-projects. A travel blog where I documented my experience traveling completely on my own in a country where I didn’t speak the language. All photos were taken with a Fuji X100. See the story here.

Screenshot of “1975”, a project by Nuno Coelho Santos
1975

A side-project where travelers document their trip on a day-by-day photo diary. This project was an opportunity to give me more experience developing Ruby on Rails applications. Sign up here.

Image of “The Scientist” app for iOS by Nuno Coelho Santos and iterar
The Scientist

The Scientist is a scientific papers aggregator and reader for iOS. The design shines in its focus on incredible legible typography. Get it on the App Store.

Stylize/d logo by Nuno Coelho Santos and Marta Dos Santos
Stylize/d

Identity and web design project worked on alongside Marta Dos Santos. Stylize/d is a fashion blog eager to show the final fashion editorials and the process in making them. This modernist identity stays away from most amateur fashion blogs with pink tones and cursive typefaces.

Photo taken inside of the ustwo London office
ustwo rebrand

I worked on a rebrand concept for ustwo entirely inspired by the candid and daring company culture. This included a new logo, website design, typeface and tone of voice. After some refinement, this became the studio’s new identity. See it here.

Logo designed for Marili André by Nuno Coelho Santos
Marili André

Logo design for Marili André, a fashion photographer and filmmaker. Fellow student at Central Saint Martins, London. The connected shapes try to represent the motion in her work, while clearly following the style of high end fashion brands.

Thank you for reading. If you would like to discuss more, share feedback or ask any questions, please get in touch.

Nuno Coelho Santos

Email
Mobile
Line
Twitter
GitHub
Dribbble