Ian Tornay Artist Portfolio

The Client

A landscape painter based on the east coast. Ian is connected to the Bowery Gallery in New York, and until recently has shown his portfolio on their website.

My Role

Sole UX Researcher / UX Designer responsible for end-to-end design and development of the site

Duration

January 2022 - February 2022

Design Tools Used

Adobe XD, Figma, Webflow

The Problem

Ian’s current website was not functioning and he was looking for a way to display his work in a curated online platform

The Goal

Create an online portfolio that allows users to quickly navigate through Ian’s work, and contact him about projects and upcoming shows

Defining the Client's Needs

Before beginning on the ideation phase of the design process, I wanted to ensure that I had all of the client’s goals for the project laid out. We spent our first meeting discussing what features he wanted included in the website, and I presented him with examples of current portfolio sites that he gave his opinion on. This conversation outlining the desires of the client allowed me to focus my ideation around features that would be the most useful for users while making sure that the client was satisfied by the content displayed.

Main Takeaways

After speaking with Ian about his goals for the project, I outlined 3 main guidelines:

Simplicity

Ian wanted a simple layout to each page, that would place the user’s focus on the artwork rather than add distraction

3 Main Categories

We decided to divide Ian’s work into 3 main categories: landscapes, drawings and still-lifes. To reduce clutter we will only display work completed in the past 2 years.

Works with Bowery

Ian is connected to the Bowery Gallery, and wants links to their site and upcoming events attached to his portfolio.

Building Wireframes

Paper Wireframes

During the early ideation process I created many paper wireframes to layout the pages of the site.  This helped me visualize design ideas before spending the time to create them digitally and pass them off to the client for approval.

Digital Wireframes

After completing the paper wireframes and settling on a final design, I created low fidelity digital wireframes to display the site layout for the client. Based on the guidelines I was given I came up with the following design decisions:

View Low-Fi Prototype

Refining the Design

Mockups

After multiple meetings with the client to refine the design, I created a high-fidelity prototype to finalize the design before moving on to designing in Webflow. By connecting regularly with the client I was able to fulfill their needs and ensure that they felt heard throughout the design process. The main changes I made to my designs are as follows:

High-Fidelity Prototype

View High-Fi Prototype

Published Version

View Published Site

Results & Takeaways

More Projects