Artshop

e-shop redesign

Artshop

A redesign proposal for Artshop's e-commerce website.

client
fougaro
agency
personal project
Role
UX/UI Designer
the background story

Fougaro is a unique multipurpose arts venue in Nafplio, Greece. It is comprised of different spaces which promote art, education, innovation, and community engagement. Tourists and locals who visit Fougaro usually want to keep a small part of it with them before they go. Some visitors and art enthusiasts may also be looking for special gifts. Fougaro's small store, called "The Artshop", fulfills these needs by offering a number of for purchase items like art objects, books, office accessories, jewellery, children’s products, and more. Apart from its physical store, The Artshop also has an e-shop where the visitors can go through the products in their own time and from wherever they choose.

artshop-images
Images of the Artshop's physical store.
THE PROJECT & THE CHALLENGES

After redesigning Fougaro’s main site, we proceeded to propose a new design for its e-shop, "The Artshop". Our first thought was to visually connect the two. Next, we deliberated and came to the conclusion that we could boost sales by creating a better e-shop structure and improving customers' shopping experience. Our goal was for the customers of the online shop to have a pleasant shopping experience as did the physical store's customers.

artshop-website-example
Current Artshop website.
artshop e-commerce touchpoints/features

We researched the Artshop's e-shop needs. We decided to keep some elements of the previous e-commerce site. To stay focused on the features, touchpoints ecc. of the desktop and mobile version of the e-shop, I proceeded to write them down.

target group

In this case, the target group was the same as Fougaro's:

  • Pre-K and primary school children (4–12 years old) living in Nafplio and the surrounding areas.
    The goal here is to reach parents (35-55 years old) living in the Argolis community and who are concerned about the education, development, and quality of life that their children get during this period of crisis. These parents are aware that their kids do not have access to as many activities as they would in Athens; Fougaro could fill that gap.
  • Foreign tourists.
  • Greek schools visiting Nafplio for the day.
  • Athenians visiting Nafplio.
  • Intellects and the arts community.
  • We also added another group of people who usually buy very expensive artwork from the Artshop.
USER JOURNEY

Due to the proposal's tight deadline, we created user personas and a customer journey map for a specific case (i.e. when a customer wants to buy a gift for a friend). This helped us discover certain things that needed to change through the e-shop's redesign. We also made a diagram to visualise the specific users' desires and needs from the Artshop's e-shop.

customer's journey map
User journey map of a fictional persona.
DESIGN RESEARCH

I often use a program called Pixave where I collect (by bookmarking and screenshooting) all kinds of websites, images, UI elements, navigation and animation elements, new web trends, and organize them with tags. This process helped me with this project as well.

design research
A collection of some inspirational design elements.
DESIGN PROPOSAL

From our overall research, we found that there are different but also common needs. The website's structure must be based on these needs. The customer journey helped us make the site's structure more clear, although after the redesign process, we had to keep in mind that new user needs and problems would form. That's why the design process will always have to change and improve.
We worked on five basic pages:

We focused on the e-shop's architecture by creating wireframes. We concentrated on the content by carefully adding specific components that could improve the user experience:

wireframes
wireframes 2
Artshop's detailed wireframes.
homepage
Homepage
products' page
Products' Page
product's page
Product's Page
cart page
Cart Page
checkout page
Checkout Page
UI styleguide

We used brighter colors in “The Artshop” than the ones we chose for Fougaro’s site. We maintained the same aesthetic between them to keep a consistency design wise. Font was meticulously selected to have a good rendering with the Greek language and improve the legibility. The colors we chose followed the brand’s guidelines maintaining a clean and neat approach at the same time. You can see the design elements we collected below.

artshop styleguide
artshop styleguide
artshop styleguide
responsive DESIGN

We wanted to make a responsive version we could showcase the possibilities of the Artshop's redesign. You can see the design for desktop (1.400px), tablet (770px) and mobile (320px) below.

artshop-responsive