Modern Logic for Artists

A UX Case Study by Brendan Stern

Jump Menu | Summary | Process | User Observations | Recommendations | Mobile Example


Project Overview

Client: Modern Logic is a Minnesota based web and mobile app company making a web portal welcoming artists to create their first website.

Goal: They asked me to perform a UX evaluation to determine where users may drop off in the sign up process. We focused on a high fidelity prototype they created.

Jump to any section below: Process | User Observations | Recommendations | Mobile Example

Owner Objectives

  • Have people go through the sign up process and become a paid user without any interface roadblocks.

Competitive Advantage

  • Modern Logic is targeting users who are willing to pay a bit more up front for a professional design of their navigation, photos, and text on their new website. This costs more than a free service like Google Sites or Squarespace, but significantly less than paying a web designer for a custom design.

Experience goals

  • Test the usability of the portal to see if there are any barriers to getting people to sign up.
  • Secondary
    • Test to see if users realize they can pause and continue later if they leave the portal.
    • If they’re filling it out on a computer, test if are they able to add photos from their phone using the provided QR code.

Problems to Solve

  • Users couldn't easily see how Modern Logic compares to other website providers. This led them away from the site and some said they would have instead signed up with a competitor.
  • Users had issues navigating the portal when returning to add or revise content.
  • The sign up portal doesn’t work on mobile. We will explore some basic interfaces here with Figma.
My Role

About Brendan

This page is accessible before signing up, but not during signing up, and could show users Modern Logic's competitive advantage so users don't leave the site.

A sample of the first page of the portal.

Process

In this study I conducted a heuristic evaluation and user observations to locate any obvious interface issues or user pain points in the process.

Heuristic Evaluation

  • There were several opportunities for user experience improvement upon initial testing. My findings were extensive and you can read the full report here.
  • In summary, menu options, field usability, and warnings for incomplete or poorly filled forms were the biggest issues to address in making this more usable.

User Observations

I observed three users of the portal, giving them three objectives:

  1. create a site
  2. leave in the middle of creation and then navigate to a few specific pages after returning
  3. upload photos from their phone

Mobile Prototype Made in Figma

Jump Menu | Summary | Process | User Observations | Recommendations | Mobile Example

User Observations

The users were art teachers or students who were not skilled in website creation but were familiar with using forms and web interfaces.

They were informed that they received a card or other advertisement promoting this site, which promises a professional website with easy setup. They were instructed to create a site by answering the questions on the portal. Later in the test, they were asked to leave the site and return, navigate to different pages to make changes, and try uploading photos to the site using their phone.

User Observation Synthesis

The major themes from user observations were:

  1. Competitor pricing and comparisons are missing, prompting users to search elsewhere on the web.
  2. Lack of transparency regarding the costs of better templates or customizations from Modern Logic.
  3. All users wanted a navigation system with labels to quickly get to their desired page.
  4. Users are uncertain about what their site will look like before buying it. They are also unsure about the amount of effort required to modify it, compared to using a free site like Google Sites.
  5. All users disliked the floating fixed menu on the more expensive Modern Site template.

Customer Journey Maps

Currently the customer journey is facing challenges in the early and late stages of the process. They are conflicted about the pricing and quality of Modern Logic for Artists and how it compares to competitors. They also are hesitant to finish the purchasing process without seeing their design. They weren't sure how much back and forth they might have to adjust their design.

    Additional notes from users

  • Earlier placement of Website Style page: One user believed it would be more appealing to have the Website Style page earlier in the process to get users excited about their website. They suggested pushing the contact info and details to later in the process.
  • Pre-start item list: Users wanted a warning about all the items needed before starting, such as text for the site, images, contact info, and social media links.
  • Font choice uncertainties: On page 8, Website Style, all users were unsure about font choices and ended up selecting Times just to complete the task. Providing title and body font examples or suggested font combinations with examples could be helpful.
  • Users bypassed the About page: At the landing page, all users immediately clicked "Get Started" and skipped the About Page and Templates. It would be useful to have this information available during sign-up.
  • Issues with mobile image upload: When trying to upload photos using the QR code, users encountered the error message: “Application error: a client-side exception has occurred (see the browser console for more information)”
  • Reluctance towards customer contact: One user disliked submitting this form and being contacted by Modern Logic to start the conversation. She preferred to control when she would be contacted.
  • Hidden errors: No error messages were displayed when users left a page with errors.
  • Desire for more templates: Users wanted more templates and appreciated the ability to choose colors on Squarespace, unlike the color form provided on page 8.
  • Unclear navigation: Navigation numbers could be separated from completion status. Using green check marks could signal completion more clearly.

    Alternatively, the numbers could be retained with a change in the color and shape of the icons behind them.

"I immediately went to other sites to compare pricing and examples. I probably would have gone with Squarespace before returning."

Art Teacher

"The forms are nice and the site works well, but $700 up front seems like a lot, especially when you can make a Google site for free."

Art Student

"I really wish I could see my site before I paid for it. Also, I prefer the monthly payment option as the savings on a yearly plan aren't great."

Art Student

Jump Menu | Summary | Process | User Observations | Recommendations | Mobile Example

Recommendations

    Important

  1. Create an explanatory video: Consider creating a video that explains the benefits and competitive edge of Modern Logic along with a brief walkthrough of the online portal.
  2. Accessible About Us/Info page during sign-up: Making the About Us/Info page accessible during the sign-up process will help users understand who they are signing up with.
  3. Analyze competition and showcase advantages: Analyze the competition, possibly offer more templates, and display competitive pricing and advantages on the Modern Logic site to prevent users from leaving to do their own research.
  4. During sign up, update navigation for user benefits: Updating the navigation offers many benefits to users. Refer to the list in the heuristic study for detailed suggestions..

    Good to Have

  1. Enhance form fields and contrast: Improve form fields and contrast, particularly to assist users with impaired vision.
  2. Provide error warnings: Continue to provide error warnings so users know what to fix in order to complete registration.
  3. User login feature: Consider implementing a user login system that allows users to stay logged in, rather than using email identification and password.
  4. Create a mobile version: Develop a mobile version of the site. A mockup prototype of a mobile version is available for reference..

Jump Menu | Summary | Process | User Observations | Recommendations | Mobile Example

Mobile Portal Prototype in Figma

Link to usable prototype of mobile version of Modern Logic for Artists.

This demo shows a mobile option for the portal and what navigation might look like, including a menu for each screen, info about Modern Logic, and the option to get help by sending a Customer Care ticket.

Another big change is switching the page order of the portal so that you are designing your site first and then filling out your personal information. This gets users excited about creating their site and gets them invested in continuing sign up.

Demo of Figma board.

© All rights reserved, Brendan Stern.