A very special and still an ongoing project for me. 
The client decided to start her own B2C business and needed a website to share her hand-crafted products and services. 

I led the whole design process from ideation till deployment. 
I will be also overseeing the website past deployment, granting me the opportunity to track how the website is existing in real setting and make adjustments based on the changing market trends.

UX and UI Design lead

• UX Design - led the whole process of the design, starting from ideation and finishing with prototyping
• UI Design - based on the client's brief, narrowed down the UI elements
• Visual Design - based on the client's brief, established the visual language and aesthetics of the website
• Wireframing - created wireframes of the main, product and product description pages
• Prototyping - created a prototype in Figma based on the wireframed pages
• Building the actual website - wip, building a website on Wordpress based on the design work I did

The client needed a website to showcase her products and services but also to sell them. 
Existing platforms were considered as an option at first, but the client wanted to be more visible and avoid the burden on user to search for her products among many other creators. Moreover, to find a combination of a platform that both displays the products but also shows services is tricky. 

First, the client and I had a couple of calls to align on the vision of the website: what it should do, what feelings or vibes it should give, what the visual language should be. 

Then I began researching a couple of existing webistes to understand what is already done and works well, as well as, what I want to bring to the product. I began wireframing, to just show the basic layout of what should be where. We had a call again, iterated and I was good to go for the prototype. In parallel I also suggested a colour pallette based on the images the client sent me. 

Once all was cleared, I created a prototype. We iterated on it once and now I am good to go to create the website.

For now: a prototype of selected pages to start building the prototype. 
Ongoing steps: building an actual website.

1st Goal: create a prototype of key pages of the website to show the look, feel, usability and structure of the final product
2nd Goal: create an actual website

People aged 20-65, searching for hand-crafted products or services.

• Time. I wanted to move fast into creating a website, because I know that there might be some technological constraints due to me not being a programmer.
• Language. The website needs to be in English, Estonian and Russian, since the client is based in Estonia.

Figma
Lovable
Wordpress
Unsplash

I always start with existing examples to see what works best and what I can bring with me into my design, but also to see what doesn't work and what to avoid in my work. From the cases I have reviewed, I liked the layout and it was generally useful to see how the products are displayed. 

Reviewing existing examples.

In parallel, I discuss with the client what feel and look they want from their website. The brief was "japanese minilamism, scandinavian design vibes like AB Småland, Banksy, natural colours". I have also asked the client to send me pictures of whatever they like, doesn't matter what. My goal was to understand the preferences of the client through visual media, what vibe to go, what feeling should the website evoke for the user, but also to understand the colour pallette.

Moodboard from the client & me. And a set of fonts to pick the correct one.

I usually sketch on paper at first just to quickly dump ideas and have an approximate structure of what should be on the page. This method is fast and also gives me an opportunity to think while doing.

I also used Lovable to exercise working with AI.

Ideation on paper and with Lovable.

Then I went to Figma to start wireframing. My goal was to: 
• have an understandable draft of content elements 
• have a draft of content hierarchy 
• have a tangible asset to help me and the client narrow down what exactly should be displayed and what's prioritised
 
For example, I assumed that having products displayed already on the home page is good both from the user perspective, but also from the business: 
• user doesn't need to wonder around the website 
• the business displays their product right away. 
The client, however, felt products belonged on another page dedicated to products. From the user perspective that was better, but the business side loses on not displaying something around products on home page. So we went with my recommendation to keep only category "New In". That way, we don't overload the user with too much info, but also create curiosity around the product. 

Wireframes, version 1 on top and iterated final version 2 on the bottom.

My goals were to: 
• have a realistic prototype for the client to understand the direction and react to suggestion
• shape a direction of the visual language for the website
• prepare for building the actual website

Since I know the client very well personally, I nailed the vibes of the website. However, buttons on each category were hard to read. I had an assumption that it might be the case, but wanted to test on the client. Obviously, that point was taken into consideration and implemented. 

First prototype ready to be shown to the client.

The prototype has survived the review with small ammendments.
On Home page: 
• moved category buttons under the pictures
• cropped first image to fit category section on the screen before scrolling.
On Products page: 
• cropped first image for the same reasons as the above
On A product page: 
• tightened layout and cropped images to avoid need for scroll

Now I feel ready to start building the actual website.

Final version of the prototype. Ready to be made into an actual website.

I always take the opportunity to learn from any project I take part in. 
In this project I learned: 
• UI design - I stepped more into that domain, trying to think as a UI designer and ensure documentation is understandable.
• Product page on a retail website - how to connect warehouse with the webpage.
• Working with AI - prompt writing mostly.