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.

My Role & Responsibilities

Solo UX researcher,

user testing,

UX / UI designer

Project Duration

Eight weeks

Software

Figma, Adobe Creative Suite

Project Description

IkigaiArt is a Barcelona-based Modern art online marketplace. The company offers flexible art purchasing options. The company aims at democratizing art to make art accessible to everyone.

During my internship, I was tasked with redesigning the company’s landing page. This was due to low conversion and user retention rates.

Problem statement

 

”Conversion and retention rates on our new platform is low. We believe we offer a great service. We want to know what is going wrong and how to fix it. ”

User Personas

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 with five participants in round 1.

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. The research objectives of the testing were:

  • To discover if new users understand the site’s microcopy and business proposition of iKigaiArt
  • To discover if new users find the site useable
  • To discover what new users feel about the UI design of the site

1. FINDINGS / Problems I discovered

1. Users struggled to understand the business proposition of iKigaiArt

2. Users were confused by the different terminology used ‘membership’ ‘patron’ and ‘subscription’ to describe the business proposition

3. Users struggled with the sign-up process as confirmation emails were automatically directed to their spam folders, due to too many image attachments 

4. 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 

2. Problems I Discovered

a. Confusing microcopy & messaging about what the service actually does and who it is for  

​The 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.

Once users understood what iKigaiArt is and what it is for, users were excited about it and said they loved the concept.

b. Low usability

​Users reported difficulties with the sign up process. 

The ‘sign up’ button said ‘sign in’ in several places. 

Users reported that the header carousel moves too fast.

Users reported that the text is unreadable.

This issue compromises the users ability to understand how the platform works. 

Example I to demonstrate low usability

Example II to demonstrate low usability

 

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.

Here is a user flow demonstrating the problems I identified. (in example I & II as mentioned above) 

Notice that it is overcomplicated with too many steps and pain-points, clearly demonstrating the problems with the original UX.

User flow of the original UX outlining issues with the sign-up process:

2. IMPROVEMENTS

& GOALS

To maintain the original functions of the platform, I improved the user flows and the interface design by subtracting and adding new functions.

The Addition is to add a new sign-up user flow. This aims to encourage new members to join and stay in the community.

The Subtraction is to remove unhelpful and unattractive elements from the user interface and replace them with UI that is attractive, welcoming and enticing to new users.

    The addition

    Solution 1

    New sign up user flow

    Usability testing revealed usability issues with the sign-up process, such as: 

    • The Sign Up CTA being labelled ‘Sign In’ 
    • Account verification emails being 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 usability. 

    The new user flow is a streamlined process where users can enter their mobile number, receive a code, input the code and are immediately logged in as a member.

    Original Sign Up User Flow

    How might we save the user time when signing up?

    I designed a new sign-up flow for users. 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 this may streamline the process further for users.

    New Sign Up User Flow

    The addition

    Solution 2

    Navigation bar problems on sign in

     

    Upon sign in, the navigation bar changes. Menu items change from ‘Art Shop‘ ‘About‘ and ‘Contact‘ to ‘home‘ to ‘profile‘ ‘settings‘ and ‘invite

    • Users were getting confused as once they signed in, the nav bar changed and the items were no longer familiar.
    • Furthermore, users couldn’t find the ‘artworks’ section which I identified as a high-priority problem as the platform is for buying and selling artwork.

    Solution:

    • Navigation bar stays the same on sign-in to reduce confusion and maintain consistency. 
    • Extra menu items upon sign-in are burrowed away in a drop-down menu under the profile menu item and can be seen on hover.

    Original navigation bar on sign in

    New navigation bar on sign in 

    My Iterative Design Process

     

    I used Figma as part of an iterative design process during the landing page re-design.

    Design process / progression I

     

    Click this link to view:

    https://www.figma.com/file/AzHbQT9zwRilqplZWzFHh8/Working-Drafts-Figma-I?node-id=0%3A1

     

    Design process / progression II

     

    Click this link to view:

    https://www.figma.com/file/gN1uTMYb6aGdDjSxLLRuez/working-drafts-figma-II?node-id=0%3A1

     

    Design process / progression III

     

    Click this link to view:

    https://www.figma.com/file/ehtzIcSqtrezIwqFSMH2hk/Working-Draft-Figma-III?node-id=0%3A1

     

    The addition

    Solution 3

    New site messaging strategy

    Usability testing revealed that the original site microcopy and messaging was unclear to users. This resulted in them 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 Interface

    New Design

    The Subtraction

    Solution 1

    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’. 

    Examples of the greyscale imagery / original font choices

    Examples of changes made such as inclusion of artworks, change of font families and more colour.

    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.

    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