iKigaiArt Landing Page Redesign Case Study
Any identifying information about this company has been changed with respect to non-disclosure including name, logo, artist's names / works, site copy and imagery.Background
In the summer of 2021 I undertook a UX/UI Design Internship with a Barcelona-Based Start-Up iKigaiArt.
IkigaiArt is a modern art online marketplace and community for art lovers and artists to connect. The company offers flexible art purchasing options, aiming to democratize art and make it accessible to everyone.
Problem
The new start-up was experiencing low conversion rates on their website.
During my Internship, I was tasked with identifying potential reasons for this through user research and coming up with design solutions to overcome this problem.
My Role
Solo UX researcher,
Solo UX / UI designer
Copy writing
Illustrations
Software
Figma, Adobe Creative Suite
Timeline
May-July 2021
Problem statement
”Conversion rates on our new web platform are low. We believe we offer a great service. We want to know what is going wrong and how to fix it. ”
User Personas
Customer
1. Research & Usability Testing
See usability test results here: https://miro.com/app/board/o9J_lGDZ3KQ=/
As the UX researcher, I conducted evaluative usability testing on the existing website to understand potential problems with the existing web platform.
The subjects were reflective of the primary target market audience segment and screened to ensure they met inclusion criteria prior to the testing.
The research plan was created collaboratively by myself and the key stakeholders.
Research objectives
To discover if prospective customers:
Understand what iKigaiArt do as a company & why they should join them
Experience any pain-points in the key JTBD journeys (i.e. signing up for an account, purchasing an art work outright, starting a patreon plan)
How they feel about the company’s branding and UI design.
Problems I discovered
Problem #1: Users did not understand the business proposition of iKigaiArt, and struggled with confusing language and frequently used terminology.
Problem #2:Users struggled with the sign-up process as confirmation emails were automatically directed to their spam folders, due to too many image attachments.
Problem #3: Users felt that the black and white/greyscale UI design of the site was ‘cold‘, ‘sterile‘, ‘elitist‘ and ‘uninviting‘ resulting in new users not feeling welcome to the service.
Problem #1:
Users struggled to understand the business proposition
Confusing messaging about what the service actually does and who it is for
The site’s messaging about iKigaiArt left users confused as to what the platform does.
Multiple terms are used to describe the business proposition such as ‘patronage’ ‘subscription plan’ ‘membership plan’ and slogans like ‘experience art flexibly‘.
Users continuously asked questions and could not grasp the concept of the business proposition despite spending extensive time reading the site’s microcopy.
Users were confused by some of the terminology used to describe members of the community such as ‘patrons.’
Problem #2:
Poor sign up experience
Sign up CTA
Users experienced difficulties with the sign up process.
The ‘Sign up’ button was originally mislabelled as ‘Sign in’, causing confusion when tasked with singing up for a new account.
Example I to demonstrate poor sign-up experience
1. Verification emails during sign up were automatically directed to spam. Users reported not being able to find the email and therefore could not complete the sign-up proccess.
2. The link in the account verification email was not clickable. Users had to copy & paste into the browser, resulting in a frustrating experience.
3. The button in the verification email was broken / not working to confirm account verification.
Example II to demonstrate poor sign-up experience
As-is sign up experience user flow
To demonstrate some of the usability problems experienced by users during the sign-up process, I developed an as-is user flow for this journey.
1. The Sign up CTA label is labelled ‘Sign in’,
2. The email often goes directly to the users spam folder due to it containing images
3. The button within the email for the user to verify their email is broken / not working
4. The user must manually copy & paste the verification URL into their browser.
As-is sign up user flow to demonstrate poor sign-up experience
Problem #3:
Unattractive & univiting UI design
As-is homepage hero demonstrating UI Design
Users expressed a general dislike of the site’s UI design, stating that it feels cold, uninviting and wouldn’t entice them to sign up for an account.
“It looks unfinished.. it’s all black and white.”
“It doesn’t have the softness you’d expect on an art website.”
“It looks a bit dead.. it’s very sterile.”
“I really dislike the font.. it looks very old-fashioned, like typewriter font.”
2. The Redesign
The addition
Solution #1:
New site messaging strategy
Usability testing revealed that the original site’s microcopy and marketing messaging was unclear to users. This resulted in users not understanding iKigaiArt’s business proposition.
I removed a lot of the internal jargon and I devised new site microcopy based on the feedback gained during usability testing. I included clearer and more user-friendly language and explanations of the business proposition.
Additionally, I revised the UI design of the site to include icons and imagery to aid in user comprehension and reduce cognitive load.
Original landing page messaging
Redesigned landing page messaging
The addition
Solution #2:
New sign up user flow
Usability testing revealed usability issues with the sign-up process, such as:
The Sign Up CTA was labelled ‘Sign In’
Account verification emails were getting sent to spam
Buttons/links not being clickable in the verification email
Usability testing revealed that users often abandoned the sign-up flow at this stage in the process due to poor user experience.
Original Sign Up Flow
How might we save the user time and frustration when signing up?
I designed a new sign-up flow for users. The new process involves the user getting a verification code to their mobile number. This flow involves fewer steps and is much faster compared with the original.
I added a ‘progress bar’ feature so that users know where they are at in the process and how much time it may take.
I added social media verification (as an alternative to mobile number) as this may also help to streamline the process.
New Sign Up Flow
The Subtraction
Solution #3
Removal of the sterile UI of the platform
(Dated font & greyscale imagery)
Usability testing revealed that users were not ‘excited’ or ‘enticed’ by the greyscale imagery & black and white colour scheme across the site.
Users were excited about the artworks and wanted to see more of it across the site.
The majority of users reported inconsistencies with the font choices and their dislike of the courier font choice reporting that it is ‘dated’ and ‘an unusual choice’.
Original UI design
New UI design
Usability testing revealed users responded positively to the artworks and wanted to see more of it on the homepage, I used this as a space to promote the artists.
I added icons and smaller, more readable sections of text to aid in understanding the business model more.
I changed the font families used to more elegent and easy to read fonts.
My Iterative Design Process
I used Figma as part of an iterative design process during the landing page re-design.
Early iterations
View in Figma:
Later iterations
View in Figma:
Final iterations
View in Figma:
Outcomes
The next step in the process would have been to conduct usability testing on the new design of the landing page.
As this was the end of my internship at the company, here is where my contribution to the project ended.
I did feel as though the objectives of this project were a success, however, usability testing would be required to validate this:
Increasing the users understanding of the business model
Creating a welcoming feeling on the landing page
Solving problems with the sign up process