My Role:
Client Meetings, UI Design, User Testing, Webflow Developer, Visual Design

Project Type:
Client Project - Portfolio
Responsive Design

Tools:
Figma, Miro, Webflow, Google Forms, Paper & Pen

Timeline:
March - April 2022

Megan is seeking an alternative platform to showcase her tattoo work due to the recent censorship and algorithm change on Instagram. Although she has been using Instagram to document her tattoo journey and attract attention, the platform's increasingly strict policies have led to frustration among many artists, who have had their accounts deleted or blocked. Recognizing this issue, Megan turned to me for guidance, and I am eager to assist her in identifying the best possible platform to showcase her unique talents and connect with her target audience.

THE PROBLEM

Artists are left in the dust as creative platforms have become highly limiting.

Platforms such as Instagram are popular for sharing inspirational works with the public. However, due to the pesky censorship guidelines and algorithm changes, artists are in constant fear of getting their accounts deleted and/or blocked without warning. This exact reason is what made Megan Kagiyama, a tattoo artist, look for a new alternative.

THE SOLUTION

A custom website to call home.

Megan and I decided that a custom website is an ideal solution for her needs. With this all-in-one platform, Megan can safely and confidently showcase her talents and connect with her audience in a more meaningful way.

GETTING TO KNOW THE ARTIST!

After a thorough two-hour discussion with Megan, I gained a better understanding of her vision for her website. Our conversation covered a wide range of topics, including branding, personality, page content, budget, website platforms, communication tools, and deadlines.

Based on our discussion, we concluded:

INFORMATION ARCHITECTURE

To ensure a seamless user experience, I began the design process by creating an information architecture chart in Miro. This chart mapped out how users will navigate the website and ensured that all necessary content is easily accessible. Once the chart was complete, I shared it with Megan to get her approval before moving on to the next steps.

-Look around! I’m interactive!-

FINDING HER BRAND

As a collaborative tool for collecting inspirational images, we decided to use Pinterest. This platform proved to be incredibly helpful in creating a mood board that captured the look and feel that Megan envisioned for her website. Once we had finalized the mood board, we transferred it to Figma, where we used it to guide our decisions regarding the final aesthetics of the site. This approach allowed us to work together efficiently and effectively, ensuring that the final design met Megan's expectations and accurately represented her brand.

-Take a look at the mood board-

CRAZY 8’S

To generate a variety of ideas quickly, Crazy 8’s were conducted to quickly draw up ideas for each page. All of these ideas were shared with Megan through Miro, where she was able to provide feedback on which ones she liked and disliked. This collaborative approach allowed us to narrow down the options and focus on the layout designs that Megan was most enthusiastic about.

DIGITAL WIREFRAMES

Wireframes were made using Figma which allowed us to collaborate despite being in different locations. Low-fidelity wireframes were developed based on combining the crazy 8’s sketches that Megan liked.

ROADBLOCK WITH WEBFLOW’S FREE PLAN

After creating the low-fidelity wireframes, I moved on to developing high-fidelity wireframes, which included the copy that Megan had curated. However, during this phase, we encountered a challenge. The design I created would not be feasible within the limitations of Webflow's free plan. As a result, I had to revise the layout of the website, ensuring that it would still meet Megan's needs while remaining within the constraints of the platform. This hiccup required some adjustments, but it ultimately led to creating a website that was both functional and aesthetically pleasing.

USER TESTING

After receiving final approval from Megan to launch the website, I wanted to gather feedback from a few people to help me identify areas for improvement. I sent out a survey to 10 individuals, but unfortunately, only received 4 responses. Despite the low response rate, the feedback I received was valuable. 

All of the responses state the website is well-organized, easy to navigate, and reflective of Megan's personality. However, a few issues were identified related to the mobile and tablet experience. Participants noted that hovering over the works sections was problematic on these devices, and some had difficulty with the filtering system on the works page.

One of the key questions I asked was whether the site would encourage potential clients to return for future bookings. All four respondents indicated that they would be likely to return for future bookings and share with others.

To further improve this project, I would like to focus next on the user experience when looking for a potential tattoo artist. Doing this will be useful for the website’s growth as Megan continues to develop her online presence and work on building a loyal customer base.

WHAT I LEARNED

This was my first UI project 🥳 It felt liberating to complete my first project and seeing my design become an actual product was surreal. Main takeaways while working on this project:

1. Everything takes longer than you think. I misjudged how long a simple task can take sometimes. Getting to dive into each step of the design process provided me with a lot of first-hand experience that I never knew I needed while self-learning about UX/UI. Certain steps of the design process seem easy to do based on explanations, but doing it was sometimes difficult and time-consuming. I understood that even the most minor task can make a huge impact on the final product.

2. It is okay to fail! At first, I wanted to do everything perfectly and not make any mistakes. This was my first project and I wanted it to be perfect. As time went by, I realized that making mistakes is supposed to be part of the design process. We are supposed to learn from them to better improve along the way.

DESIGNING IS A CONTINUOUS PROCESS!

Next steps:

1. Implement user testing in the beginning to give this project a more user-centric approach that can improve my design decisions.

2. Better filtering on Works Page

3. Optimize the tablet and mobile versions (animations) for a better user experience

4. Upgrade the site to have a custom domain, add additional pages, and implement an on-site booking form

*UPDATE LOG* 

2/23/2023

• Hid sections for art, canvas, and photos because the client wanted the site to focus just on tattoo works. Also removed one influencer since the person was no longer relevant. 

• Added more tattoo pictures and updated links that were broken. 

• Included a button on the contact page to direct users to a google form for future bookings. 

• Better optimized the animations and screens for smaller devices - tablet and mobile (portrait & landscape)

~ THANK YOU FOR VISITING! ~