Artshop e-shop
A design proposal for Artshop's e-commerce website
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.
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.
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.
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.
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.
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:
- The Homepage
- The products' page (with filters)
- The product's page
- The cart page
- The checkout page
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:
- Adding elements (i.e. language selection, search, nav bar) by following the F/E reading pattern
- Exhausting info about the products
- Detailed search filters
- Newsletter subscription that stands out
- Meticulous cart/checkout forms
- Spacious hero and product images
- Detailed and clear header and footer menu
- Recently viewed products and new products' ideas sections
- Clear info in the cart and checkout section
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.
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.