Ariel Noboa

A website that aims to portray (pun intended) the work of Ariel Noboa as a wedding photographer. Project includes Branding & UI Design.

(Client)

Ariel Noboa

(Year)

2023

(Service)

Website Design

(Website)

arielnoboa.com

(Details)

(Challenge)

Creating a portal of work to attract and retain clients.

Ariel Noboa needed to create a website in which he could showcase his work, inform, attract and retain clients, all while making sure he is properly communicating his vision, work ethic, and personality to make a business.

(Goal)

Stand out from the crowd!

Having his own portfolio website for his business, Ariel had a few goals in mind, but the main goal we accomplished was to differentiate him from his competition in the wedding photography market.

(Result)

A beautiful portfolio that showcases Ariel's vision

The end result is a beautiful website that showcases his work and dedication to editorial wedding photography. Ariel now has a fully customizable website that attracts clients, serves as a catalog of services (private pages), and with the help of his marketing team is now his main source of leads!

(María)

Age: 32

Job: Marketing Manager

Marital Status: Married

City: Bogotá

(About)

Maria is a stylish and modern professional who values quality and uniqueness. She is looking for a photographer who can capture her wedding day in a way that reflects her personality and style.

(Objectives)

Maria wants to capture the essence of her wedding day and cherish the memory for the rest of her life.

(Needs)

She needs to see and tell if a photographer's style and experience align with what she wants.

(Quote)

“I want my wedding photos to be as unique and stylish as I am. It’s an important life event for me, and I want to look back at this day and remember the fun we had!".

(Manuel)

Age: 34

Job: Consultor

Marital Status: Single

City: Medellín

(About)

Manuel is a creative and adventurous architect who values quality and creativity. he is looking for a photographer who can capture the beauty of his wedding and help him visualize and reminisce on this special day.

(Objectives)

Manuel wants someone to capture the beauty of his wedding with images that he can look back with joy.

(Needs)

Manuel is anxious about finding what he considers the “perfect” photographer, someone that has the style he wants, but can also fit on his schedule and budget.

(Quote)

“I want my wedding memories to be a work of art that captures the beauty and uniqueness of my special day.”

(Low-Fidelity Wireframes)

In the initial phase of the platform design, we refined and improved upon low-fidelity wireframes provided by the client. These preliminary sketches, focusing on layout and user flow, allowed us to streamline the navigation early on, setting the groundwork for more detailed design stages.

(Flow Diagram)

I created two flow diagrams outlining necessary website functionality and user tasks. I created these flow diagrams to better understand how to create low-fidelity wireframes for Ariel's portfolio showcase. Our main goal is to provide a great user experience for Ariel’s clients.

Main User Flow

This user flow is designed to help new users discover Ariel's website and become aware of the different sections and tasks available to them. The flow is intended to be easy to navigate, allowing users to explore relevant sections and complete tasks as they move through the website. The goal is to motivate users to check out different sections of the website as they explore, creating a positive and engaging user experience.

Potential Client User Flow

This flow is more specific and includes a hidden section called "Private Investment" that shows Ariel's prices, plans, and financial options. This section is not public as Ariel prefers to have contact with clients first and then settle on different options and plans. It serves as a great introduction to his services, and then showcasing his work.

(High-Fidelity Wireframes)

The initial step was to create a moodboard and brand guidelines for Ariel. This was done to ensure that the product was consistent with Ariel's visual identity. Once the moodboard was created and the brand guidelines were established, we started applying these styles to the product. The result is a high-fidelity design that showcases Ariel's portfolio in a visually appealing and user-friendly way. We prioritized clear navigation and calls to action for optimal user experience. The high-fidelity screens are a testament to our dedication to providing a great user experience for Ariel's clients.

(High-Fidelity Prototype)

I connected my high fidelity designs into a clickable prototype. That will allow me to test the website on a first group of users. After creating sample iterations we conducted a testing round to check the usability of the website and see if there were any features we could improve. We ended up doing a second round, but here is the final High Fidelity Prototype.

Prototype

(Brand Guidelines - Summary)

For this project, Ariel needed to create a set of rules for his brand and product. This made the project slightly fall back sometimes, because we were developing a website and the brand guidelines that define it at the same time. It was a bit of a hectic process at first, but we created the rules we wanted to follow for the product, and we were able to implement it all around the website and his marketing material.

(Alignment and grid)

I picked an 8-pixel grid for the project and set the margins withing groups of 8, 16, 24, 32, and 40, with margins between groups at 32, 40, 48, 56, 72, and 96. These vary between content & brand elements. Here’s an example of the mobile version:

(Prototype validation)

I validated my prototype with 4 users. Each were given a subset of the prototype dedicated to let them navigate the website and get to different sections they would be interested in when it comes to visiting a photography portfolio. I wanted to be sure the users understand the website, they are able to move freely, and that they didn’t feel stuck at any point.These test were conducted in person, where I introduced the users to the website and assigned different tasks. The tasks were reaching a wedding gallery and exploring, getting in contact, and learning about the photographer. The ideal context of these tasks was that they would be able to do this without having to go back and forth at any point of their journey.

(Study Results)

We designed a first iteration to test, this first iteration was intended to validate our decisions based on data, assumptions, and branding.At first 60% of users (6 out of 10) said that navigation was sluggish because of the hamburger menu and the animations implemented, saying that it didn’t work for the intended easy & fast navigation we wanted to claim. So we decided to stick to a standard navigation bar on the desktop version.40% of users (4 out of 10) expressed that some buttons were not clear, according to users some button look and don’t look like they’re button on different instances, but for now, Ariel has decided to stick to the current version of the button due to branding.

Ariel Noboa

Prototype

(Contact)

Let's talk!