Source. Create. Inspire.
━
Dive into the realm of art with ease
Case Study #1
ArtFriend
Finding information about art supplies on the store's website can be difficult and time-consuming. Often times, you would choose to abandon the research and try your luck at the physical store while keeping your fingers-crossed in hope that the staff would have some knowledge of the products you want to know more about.
By redesigning ArtFriend's website in a Mobile Web Application platform aims to enhance the experience of product research and collating inspiration.
Redesign Mobile Web App
2023
Team of 4
Involvement
Individual: User Persona, Journey Mapping, Ideation Sketches, Mid Fidelity Prototype, Usability Testing, Task Analysis and Iterations
Team: Desk Research, User Research, Heuristic Evaluation, Direct & Indirect Competitors' Analysis
Project Timeline
How it all started?
We were given a brief to improve a local eCommerce platform that has been running for a couple of years but it is not performing up to its expectation.
As this was my team's second project at General Assembly, we decided to do something more fun but at the same time, problematic. The first business that came to our minds was the local go-to, ArtFriend.
We realised that we would only talk about the physical store experience and not about their website, so we are here to find out why.
Let's get to know more about ArtFriend!
Established since 1981
Aims to bring the finest and best-priced materials to their customer while introducing new and interesting products for customers to explore.
5 Physical Stores in Asia
1 Official Website, shared among regional stores
Looking at the bigger picture!
What we identified from the website:
Does not meet multiple heuristic evaluation
Repetitive categories
Navigation leads to dead end
This leads to users becoming frustrated and abandon the site before achieving their goal.
Current SiteMap
Here's our Tree Testing Analysis
THE DISCOVERY MOMENT!
Through user interviews, we are able to understand the users' needs and pain points.
Peek into our Affinity Map & Findings
In conjunction to the Project Brief, each of the team member will have the opportunity to have a take on the design solution.
So here's my take on solving this!
Defining the problem > Ideate > Design > Test it > Next Steps
So what's the problem?
Users need a comprehensive platform to assist them in exploring the world of art with convenience because the existing art stores' websites primarily concentrate on sales of products.
User Persona
After diving into the problem, I have created a user persona that provides a reliable and realistic representations of my key user for reference.
Hypothesis
By revamping the User Interface and Information Architecture of ArtFriend's Mobile Web App will attract more users to use it as an inspirational art community and product research site on-the-go.
This is how my wireframe designs begin!
Design considerations:
Which platform?
I chose to redesign the Mobile Web Application as majority of the users would research on-the-go whenever they want to. Not only does this caters to the needs of the users, the business can also avoid spending on developing a mobile application.
What needs to emphasise?
Search Button
New feature: Art Talks (Inspire and be inspired)
Contact Us
Store Locater
Faceted Navigation
Mid-Fidelity Wireframe
Testing 1 2 3...
Purpose
To test how well the revamped website provides convenience and findability on a Mobile Web Application
Goals:
Language/Jargon familiarity
Product Findability
Getting inspiration from Art Community
Ease of use and viewing on-the-go
View test scenarios and results here
4 Key Findings that validates the goals
6 out of 9 participants chose to find the products through the 'Menu' instead of 'Search bar'
6 out of 9 participants are able to understand the Art Terminologies used in the Menu after exploring the Navigation for the first time
5 out of 9 participants chose to use 'Filter' to view by 'Brand' and 'Types' to locate product more efficiently
5 out of 9 participants understands that they can get inspiration from the 'Art Talks Gallery' column
Getting more insights!
From the Affinity Mapping, I learnt that
Familiarity can allow users to learn
Users are able to pick up Art Terminology through exploration
Lack of space between design elements
Users find it hard to tap on the checkboxes causing frustration
Lack of contrast can cause uncertainty
Users are not able to know which page they are at because of the mild contrast at the inline navigation
Users likes to take 'Shortcuts'
Users tend to use the Search Bar in times of confusion or to be more efficient
The "Hi-5" Moment!
View the Interactive Hi-Fi Prototype here!
3 Aspects of the Product:
Design elements
I aim to keep it familiar and recognisable for users to navigate with ease
Colours
Instead of ArtFriend's Yellow and Blue branding, i aim to keep the overall look clean and minimal, so that the colours of the products will take the center stage instead of looking cluttered
Functionality
I aim to incorporate functional buttons like the viewing options and having more white space to allow users to take in information more easily and efficiently on-the-go
What's next?
My takeaways from this project
When I first started on my individual take on the solution, I just wanted to jump into changing all the categories on the current navigation to simple art terms. However, based on my conversation with interviewees, I realised that they are art amateurs who wanted to learn and get into the art community, therefore it will defeat the purpose for them to pick up Art Terminologies if i were to use layman terms on the Global Navigation.
Despite struggling with decision to forfeit ArtFriend's brand identity colours, I chose to prioritise functionality to use colours that are easy on the eyes as art supplies can be very colourful to begin with.
I came to understand that settling design decisions between the business' perspective and the users perspective can be daunting as it will never be perfect to score on both ends, but i believe it can always be improved overtime to tick-off check boxes that fulfil the minimum requirement for both parties.
IT'S A WRAP!
So that's pretty much it! This was me redesigning ArtFriend's Mobile Web Application.
Thank you for reading!