FarnieDesigns

The Challenge

As part of a web design course at UCSD, I worked with a team of 4 to create a personal business website for our local client, Farnie. As an illustrator and artist, she sells her designs through stickers and other stationary items. She currently only has an Etsy shop where customers can purchase her items from, however she is interested in having a personal website to attract more customers and share more of her brand and style as well as personality and character through there. Thus, we took on the challenge of creating her ideal and dream website.

Research

The First Encounter

For our first interview with Farnie, our main objective was to get an idea of what her goals were for this website and what the current struggles were with using Etsy as we wanted to get an understanding of what key features she needed. We were able to identify what type of vibe and theme she wanted to portray as well as some vital elements she wanted to display. Some key features she requested were:

Testimonials: Farnie also does custom work so in order to portray a trustworthy and credible image, she would like to add testimonials from returning and loyal customers somewhere on her site

"Connect With Us" Section: in attempt to publicize her company more, she would like to include links to social medias and other relevant platforms for customers to check out her work and also to see a humanized side of her

More personalized website compared to Etsy: she wants to show more of her character and identity through her site so customers can get a sense of who she is

Less writing more pictures: Etsy contains a lot of unnecessary small texts that are irrelevant for Farnie's brand and products. She would like her site to be more picture heavy.

FAQ Page: Etsy currently does not have an explicit FAQ section for each shop and farnie would like to include it to keep customers informed and in the loop

Promotions Section: Etsy also does not support a promotions sections and she would like to include freebies and promotions to advertise her brand more

Some words she wanted her site to portray and describe were:

"Trustworthy, Professional, Leafy Bohemian, Youthful"

User Interviews

Who: Mainly women between ages of 15-20, younger women

Goal: To gain a better understanding of website viewers needs, behaviors, goals, likes and dislikes

Main Findings:

Some prefer to shop at corporate companies online because the check out and shipping process is quicker and more efficient

Key deciding factors for smaller business is reliability, simplicity, and trustworthiness

It's important to get to know the owner and her motives, such as how and why she started, how long she's had her business, etc.

Key features stated by interviewees: clear store return policy, straightforward communication with owner, and a seamless check out process

Competitive Analysis

We did a thorough competitive analysis on 5 other businesses by comparing and evaluating their branding, functionality, content, site architecture, and navigation. Below are a few examples of our annotations and research as well as overview tables of our findings, which we've created to consolidate our results and brainstorm design ideas for our own site.

Overview of Findings

Takeaways / Design Ideas

Moodboards

Design

Site Architecture

Wireframes

We started with mobile design first before proceeding with the desktop version.

Before & After Stories

After conducting a few user tests and receiving critiques, we made a few minor stylistic and functional changes in our high-fidelity prototypes.

A/B Testing

We tested different versions of designs and styles with 4 users as well as with our client, Farnie, to ensure that our final designs were seamless and aligned with our client's goals.

We tested to see whether a search feature was necessary or if we should remove it entirely.

Findings:
Our client, Farnie, preferred having no search bar since it seemed to play a limited role in the design as her overall product selection was still quite limited.

For the mobile design, we compared having a slide out menu that partially covers the screen or fully covers it.

Findings:
Users preferred the partial menu as it looked cleaner and was more functional to access and hide. Being able to see what page the user is currently on also provides more transparency and is less obtrusive.

Final Design & Prototype

Many iterations later, we successfully finalized our designsand are really happy with the results as it aligns very closely with Farnie's original brand and theme and not only meets the aforementioned goals but also the vision weand Farnie had for her site!Links to the interactive prototype has been attached below so you can see the work in action!
‍
Links: Mobile Prototype, Desktop Prototype

Home, Products, & About

Checkout Flow

Account & Profile

Desktop Version

*Note: not all desktop screens are shown as the mobile designs translate very similarly on desktop

Feedback From Our Client

Overall, our client trusted our creative process and abilities. Our first meeting, she gave us a good idea of what she wanted and was looking for. We implemented her color scheme and took inspiration from other websites she liked. The website we designed met her expectations and we are very pleased that she is satisfied with the final product!

“OMG ITS PERFECT 😭 ❤️ – You guys are seriously amazing I love it so much"

- Farnie Designs

Reflection

Key Takeaways

Communication is key. Staying in touch with our client throughout the entire process made the work flow much easier and explicit as we were able to check in with our work to make sure it aligns with what she wanted. Asking any and all questions removes any ambiguity or confusion as well.
Fully understand what the client's needs and goals are. Before diving into the work and designing, wholly understand what is it exactly the client's goals are to prevent any miscommunication and misinterpretation, which will ultimately save time and money as well.

What would I do differently?

Start with what's most important.
Start by designing the key features and pages the client requested to confirm those designs with her ahead of time and then move on to the secondary pages. That way, our focus can be on reiterating those key features, rather than designing all the pages at once.

Become buddies with our client!
The best way to understand what kind of vibes and moods the client would like to express on her site is to intimately get to know who she is. I wish we had more time to set up coffee chats or calls to get an idea of her personality and character more so that we can display her unique qualities and traits on her site.

FarnieDesigns

Overview

ROLES

TIMELINE

DURATION

The Challenge

Research

Design

Reflection