Alex Yixuan Xu

learning experience designer passionate about education, accessibility, and playfulness

Design-centric Work

design thinking, research, documentation
The Wick Editor
E-Save Plugin
Greenfield
Bartending 101
IDM Showcase Posters
Accessible Groove Pizza

Ec-centric Work

concept, exploration, expression
Smile Machine
Content, Data, Space
Struggle
Balance of Life
Follow Your Teacher
Double: Two Souls in One Body

about ︎ + resume
linkedin | github
ayxx@nyu.edu
Mark

The Wick Editor

UI Design, UI Development, 2020


Background

The Wick Editor is a free, open-source tool for creating games, animations, and more.
In 2020, I was contracted as the only designer to:
  1. Audit and document the accessibility of the Wick Editor and the Wick site according to WCAG guidelines
  2. Re-design the interface of the Wick Editor and the Wick site for accessibility
  3. Design a mobile-friendly version of the Wick Editor
  4. Design a tutorial and learning page on the Wick site
  5. Design features in the Wick Editor and site that encourages user donations
  6. Develop all design changes I made using React.js

Here, I want to highlight a small portion of my work, specifically my design process/decisions designing the user donation features for the Wick site.

The Problem

The Wick Editor is free and open-sourced, worked on only by a few individuals who were receiving limited grants. Therefore, the developers would greatly benefit from user donations/support. While Wick has a Patreon page and GitHub Donations page, they were not made obvious on both the Wick Site and Wick Editor itself.

Our goal is to incentivize volunteer donations through the site while not annoying the users.

Initial Ideation and Drafts

The stakeholder pointed out that we may present names of existing donors on the website in order to encourage more people to donate. Overall, there are 4 places we could place the donation feature:
  1. A splash page when users first go on the website
  2. A highlighted paragraph on the initial page
  3. A paragraph on the Supporters sub-page
  4. A fixed side feature throughout the site


I evalutated the pros and cons of each option:

Pros
Cons
Option 1:
A splash page when users first go on the website
“Forces” users to read information about donations
Can annoy users and burden them with unecessary interactions before proceed to the actual product

Option 2:
A highlighted paragraph on the initial page
Still highlight donation information on the first page while not being too intrusive
Pushes down important content while also can be ignorable
Option 3:
A paragraph on the Supporters sub-page
Logical placement within the site under Supporters
The donation feature still remains hidden

Option 4:
A fixed side feature throughout the site
Always highlighted on the side no matter where the user navigate to.
Progress bar gamifies donation and can encourage in a non-intrusive way
Not enough space to highlight all existing donors

After discussions with stakeholders, eventually, we landed on implementing both option 3 and option 4.

Below illustrate the design decisions I made for option 4.

Consideration 1: Color Choices

For the fixed donation feature, we can use the existing brand color, or utilize the brand colors of Patreon and Github for accents.


Eventually, we landed on utilizing the brand colors to better distinguish this feature within the site (with relatively homogeneous accent colors).

Consideration 2: How Much Information?

Another design consideration is the amount of information to display on the fixed feature. I presented 2 options:
  1. Displaying the 2 windows and highlight the benefits of being a Patreon supporter or GitHub sponsor. The minimized version shows the Patreon and Supporter icons.
  2. Displaying 1 window and remove the benefits. The minimized version shows text “Support Us”.

Eventually, we landed on option 2. This is because:
  • Option 2 simplified the content on screen to reduce visual redundancy when expanded
  • Single click instead of two clicks to expand all the donation information makes it easier for users
  • Give more space as well as attention to the minimized window by displaying text “Support Me”. This also helps call for action instead of having vague icons.

Consideration 3: Brand Consistency for Buttons

In the same stage (as consideration 2), we demonstrated 2 options for the donate button design. In option 1, we remained consistent with the Wick design traditions when designing the buttons. In option 2, we have the donate buttons match with the donate buttons of Patreon and GitHub themselves.

We landed on option 2. While it may be important to remain consistency in the Wick brand, by having slightly different looking buttons can further distinguish and highlight the donation feature from the site. They also provide a visual basis towards transitioning users to the Patreon or GitHub site.

Consideration 4: Adding More Warmth (and Brand)!

The Wick ghost is a well-liked mascot avatar that represents the Wick brand. Asking for donations can be a “cold” “material” thing, so I added the Wick ghost (envisioning animations) as part of the design to give the feature more warmth and playfulness. (P.S. In the final implementation, the ghost will also appear in random postions around the window.)



Consideration 5: Design for Mobile

Let’s not forget users who come across Wick on mobile! For mobile, I come up with multiple options for this feature, both for minimized and expanded.




For mobile interactions, the donations content can be the most highlighted when fully centered - therefore, we went with Expanded Option 1. We also still want to call for action while not taking too much of limited mobile space, so we chose Minimized Option 1A and to show the full “Support Us” text.

For consistency in both desktop and mobile experience, we eventually created the desktop design in the same fashion as the mobile, where clicking the “Support Us” button will bring up a centered modal overlay on screen.

Final Implementation

To further stand out the “Support Us” button while matching donate buttons, I designed the final version of the button to have the same rounded corners as the donate buttons.


Mark