UX/UI Design for ArtV Website with AI Research Assistant Integration

‍

Project Overview

‍

^{End-to-End UX/UI Design for ArtV Website: Fusing Artistry with E-Commerce.}

‍

Background

‍

^{ArtV, a client specialising in calligraphy, painting classes, and unique artworks, sought to establish an online presence with an elegant and artistic website. With a limited budget, the challenge was to create a platform that showcased both his offerings and his artwork sales. Leveraging the power of social media and an AI research assistant, a comprehensive solution was devised.}

‍

Problem Statement

‍

^{ArtV required an engaging website that effectively highlighted calligraphy and painting classes, while seamlessly integrating a platform for selling unique artworks. The design had to embody elegance and clarity, maintaining a strong focus on artistic aesthetics. Additionally, budget constraints necessitated innovative methods to gather insights and streamline the design process.}

‍

Goals

‍

• ^{Create a visually captivating website that reflects ArtV's artistic identity and showcases his artworks, calligraphy and painting classes.}

• ^{Establish an integrated e-commerce platform for selling ArtV's unique artworks.}

• ^{Overcome budget limitations by leveraging social media for feedback and utilising an AI research assistant to optimise design iterations.}

‍

Solution

‍

^{The project followed a holistic approach to fulfil ArtV's requirements while staying within budget constraints.}

‍

DESIGN PROCESS

DISCOVER

Desktop Research

‍

^{Desktop research was conducted to analyse ArtV website's competitors, explore its social media presence, identify target audiences, utilise surveys, and laverage an AI assistant. This comprehensive approach aimed to grasp a thorough understanding of the platform's landscape.}

^‍

• ^{Online Survey : 21 survey participants ranging in age from 15 to 55+, with a majority of falling within the 26 to 45 age range.}

• ^{Competitor Analysis : Deep research into art websites like Ashvin Harrison, Tahlia Stanton, Camila Conti and Oriavi.}

• ^{Social media surveys : I create multiple question box surveys in my client's Instagram account with 3K followers and my Instagram page as an artist with 5k followers for feedbacks and insights.}

• ^{AI  insights : we capitalised on the capabilities of an AI research assistant to enhance our design process for the ArtV website. This technology expedited design iterations, ensuring quicker refinement while keeping costs in check. By leveraging AI-driven insights, we made informed decisions on design elements that resonated most with the target audience, optimising budget allocation. Moreover, the AI assistant facilitated efficient analysis of user interviews, granting us deeper insights into user preferences. This strategic use of AI not only sped up the design process but also enriched our understanding of user needs, contributing to a well-informed and budget-conscious design approach.}

‍

Research Finding Highlights

‍

^{Following comprehensive desktop research and data collection from surveys, Instagram question boxes, and competitive analysis, these insights culminated in a gratifying outcome. Leveraging an AI tool, I precisely mapped out crucial navigation elements for the ArtV website. This approach also facilitated a deeper grasp of user behaviours and preferences, ultimately ensuring the website's design harmonises effectively with the intended audience.}

^{Important Insights acquired via social media (Instagram), surveys, competitive analysis, and assistance from AI research tools which are summarised below.}

‍

DEFINE

Meet our user personas

‍

^{After analysing feedbacks and insights, I created4 lightweight user personas for ArtV website based on their different shopping behaviours and interests.}

‍

^{A well-crafted customer journey map tailored to the preferences and expectations of Max, Sarah, Emily, and Jessica serves as the foundation for an ArtV website that offers optimal user-friendliness and an exceptional navigation system.}

^{The minimum viable product (MVP) map for the ArtV website was thoughtfully designed to focus on essential user interactions and core functionalities. It outlines crucial navigation pathways and features aligned with user expectations, ensuring a strong foundation for initial launch and future iterations. This strategic approach accelerates development while validating design choices, resulting in a user-friendly website that resonates with our target audience.}

‍

IDEATE

Information Architecture

‍

^{I crafted the information architecture to establish a structured framework that optimises user navigation and content the website.}

User Flow

‍

^{I created a user journey map to gain a clear idea of the site architecture and how our users will be interacting within it.}

DELIVER

Sketches & Wireframing

‍

^{For brainstorming and testing the initial design ( Low - Fidelity), I developed hand-sketched prototypes. After confirming the primary concepts, an interactive prototype was produced using Freeform. The prototype underwent iterative enhancements, and its performance was evaluated through testing with five individuals.}

Initial User testing

‍

^{Impressively, 5/7 testers expressed satisfaction with the design and navigated the Low Fidelity design seamlessly.}

‍

UI Style Guide

‍

‍

‍

Hi - Fidelity Prototype

‍

^{Test Objectives: Acquire feedback on the complete process and pinpoint accessibility issues linked to purchasing artworks or booking classes directly from the website. This informs a future project we're already aware of.}

^{Participants: 7 people total, a mix of tech people, designer and art lovers.}

‍

User Testing Feedback

‍

• ^{7/7 people said they liked the design of the website.}

• ^{6/7 said they can easily find all information they are looking for in the home page which was one of persona's initial goal.}

• ^{6/7 people said it is easy to navigate.}

‍

Learnings

What did I learn?

‍

• ^{Do usebility testing as much as possible}
• ^{A quick sketches and wireframing is powerful and important}
• ^{If it's possible, engage developers in the design stage}

‍

^{That marked the initial phase of my involvement in the project, where I fulfilled my role and passed it to the client and development team. As a designer, I constantly strive for improved features and seamless navigation. Upcoming tasks involve designing the checkout and payment pages, representing future undertakings for the project.}

‍

‍