Join Page for Artistworks.com

Overview

Artistworks.com is an interactive instrument learning platform learning that allows students to watch, submit and exchange videos with their instructors. The project required that I work closely with the marketing team to redesign their Join Page to boost customer conversion rate. Work performed for this project include Competitor’s Analysis, Empathy Map, User Journey, User Testing, User Flow, User Scenario, Wireframe, and prototyping.

Softwares Used

Problem

• Artistworks is loosing customers due to confusing layout in the program selection and payment check out page.
• Redundancy in information presented on the check out page discourages the customer from scrolling down the page to eventually making a purchase of Artistworks’ product.
• Determine the visual presentation of the pricing matrix to better reflect its intended purpose. Define clear CTA
• CTA section needs to be streamlined to guide the customer to make a purchase quickly without confusion.

Solution

• Restructure of the check out page layout thru improvement of the visual and information design to guide the user through selection process to eventually making the purchase.
• Access and adopt existing user experience patterns to create a user- friendly design that streamlines user’s experience through the check out process.
• Simplify the check out process to clearly reflect different steps: 1) choose program, 2) choose instructor, 3) choose payment plan, 4) Check out CTA selection.
• Address the current issue of visual presentation of pricing matrix to better communicate its informational objective.

User Testing and Feedback

Prior to sketching out our first concept, we conducted a user survey to gauge user’s decision factor when they make a selection. We found out that number of hours, reviews, number of students, and description of the class are important when they choose an instructor.

We also collected some feedbacks on the existing design, I posed questions such as: what can be improved, what they are hoping to see on the page and expectations when they click thru the check out system. From the feedbacks collected, I put together an Empathy Map and User Journey Matrix.

I presented two wireframes of what our check out process should look like with both following the similar concept of showing clearly defined steps, but with first wireframe single page cascading menu, the second wireframe is divided up into three different pages showing progressing bar on the top. For both, we broke the selection process down to three different steps guiding the user to first make a selection for instrument, then instructor, then lastly plans.

We eventually decided on cascading menu presented on single page to minimize users’ need of having to scroll from one page to another. This way when user make selections, they can just glance everything on one page.

We prototyped the wireframe mock up in inVision and a launched a focus group interview assessing the new design. We conducted in person interview on 11 participants and video typed their responses. The plan was read to the user prior to testing. User Testing Plan The user’s feedback included that the categories on the first cascading menu was unclear and it’s not subcategorized enough for them to pick an instrument.

The original design lists category base on the menus on the home page. We made improvements by listing out 19 categories and added iconography to improve readability. We sent a revised wireframe and scenario back out to 212 user who agree to participant in testing and received feedbacks from 40 respondents.