Getting Started

Freehand is a global marketplace that connects digital tattoo designers with customers. It is a working project with active users.

I started Freehand despite the fact marketplaces can be notoriously complex to design. This is mainly due to the two-sided aspect of the business. However, Freehand boasts a design that enables a smooth customer experience for both buyers and sellers. Firstly, let's take a closer look at the product design process.

Idea and Understanding

• Carrying out user research to determine what problems customers currently face.

• Studying the competition to explore unique selling points and market positioning.

• Understanding what the customers require from the product I am building.

• Understanding what the business needs to succeed from a financial perspective.

• Having conversations with tattoo artists to understand their concerns.

I identified three websites as the main competitors. Tattoo Stylist and CustomTattooDesign both use an agency business model. Fiverr is a more general marketplace but includes a subsection for tattoo designers.

Part of my research included directly reaching out to artists on these platforms and finding out what they did not like about their current setup.

Sketching and Prototyping

• Creating rough wireframes and user flow diagrams to visualise how the product will be used.

• Iterating based on feedback from users and colleagues.

• Prioritising speed and agility over pixel perfection at this stage.

• Using lean UX methods to make quick changes.

• Testing user flow on various devices.

Here is a snapshot of the first user flow diagram I made that visualises the buyer account flow and the seller account flow. The main purpose is to map out the website from a bird's eye view so that I know what pages are required.

After a few iterations of this diagram, I began working in Figma to design the pages for each stage. Great product design balances aesthetics and function and this is something I kept in mind throughout the project.

Polishing and Testing

• Applying the brand visuals and creating components.

• Adding interactions and animations to make the product feel modern and premium.

• Ensuring the design language is uniform throughout and on all devices.

• Making changes based on real world feedback.

• Optimising the design for mobile.

This is the service page from the seller account perspective. After consulting with artists, I added a "deactivate" button so they could pause their services without deleting them altogether.

Challenges

There have been many challenges throughout the entire process. I am going to highlight a couple of them here, along with the solution I applied.

1. Onboarding

A lot of artists were signing up but not all of them were completing their account setup process. They would sign up but not add any information to their profiles. The ones that did, did not always make their profiles look appealing to buyers. This was an important issue to fix.

I designed the artist onboarding screen so it would be super easy to digest. The strategy was to encourage actions that would result in a more appealing seller profile.

The hand-drawn illustration style was intentional, as it matches the theme of the product and also the brand name.

In order to improve the seller account completion rate, I needed to remove friction. I designed the artist page so that it emphasises adding new work or creating a new service. These are the two most important factors in populating the marketplace.

I spoke with my developers, and we decided not to display incomplete artist profiles on the website. An artist must have an active service in order to be visible to customers. This made for a more enjoyable browsing experience from a buyer's perspective and was another push for artists to complete the onboarding process.

2. Admin Dashboards

It was crucial that admins had the ability to monitor the website and manage important tasks without any coding knowledge. I designed a custom dashboard for Freehand that allowed all of this.

The homepage of the admin dashboard displays critical information at a glance and also notifies the user of any important issues.

Admins can update the featured artist section, create new blog posts, manage users and more. All changes push live updates to the website when saved.

The design goals for the payments dashboard were to include all important transaction information and make it as easy as possible for customer support to review specific transactions. As the activity of the website increases, it will be important to add search functionality to the dashboard.

Mobile Layout

Of course, it's essential to have a smooth experience on mobile. The entire website is optimised for mobile devices while retaining the brand's design language.

Examples of various pages optimised for mobile screen sizes.

Components

Here are some of the main components used throughout the platform: Including drop-downs, buttons, navigation elements, and statuses.

I included a custom hover animation for some of the main CTA buttons on the homepage. This is super important for a website to feel up-to-date with modern trends.

Brand

I wanted the brand to stand out from the typical dark and intimidating way things are designed in the tattoo industry. It was important for the website to appear professional but equally as welcoming.

During the competitor analysis stage earlier, I found the two main competitors were using the classic tattoo shop style for their brand. Instead, I went with a more general and modern design. However, it still feels related to art due to the hand-lettering style.

Here are some of the ideas I initially explored. None of them quite fit what I was going for.

• Number 1 doesn't allow the "F" to be used as a standalone icon.

• Number 2 looks too intimidating and bold.

• Number 3 was the closest to what I was envisioning but still felt a bit too masculine.

This is the hand-lettering logo I ended up with. It's neutral but still has some flair and personality.

Logotypes tend to feel more premium and modern. This was part of the design thinking process behind the decision to not use an image or emblem.

This iteration of the logo allows the "F" to be used as a standalone icon where applicable.

Showcase

Designing something beautiful is one thing, but working alongside developers to actually build the product is even more important. This is something product designers can sometimes forget as they get seduced by making things appear as pretty as possible while forgetting the functionality and the challenges behind building them out.

Here is a video presentation of the final product.

Promotional Video

I also co-directed a video commercial for Freehand. This involved recruiting videographers and models, along with writing a storyboard. Multiple aspects of design and creative direction were required to execute a video like this.

The film was shot in Ukraine and the project was managed remotely.

View the website →