Slant'd

A re-design of Asian American creative collective Slant'd's desktop and mobile site.

Overview

Task

Re-design the website to reflect Slant'd's brand.

Time

8 weeks (Design)

8 weeks (Build)

Team

Joanna Choi

Yoko Kristiansen

Tools

Figma

inVision

Webflow

Problem

How might we encourage users to get involved while maintaining Slant'd's brand?

Process

Research

Heuristic Evaluation

Synthesis

Persona

Site Map

Problem Statement

Design

Wireframing

Mid-Fi Prototyping

Usability Tests

User Flow

Deliver

Wireframing

Mid-Fi Prototyping

Usability Tests

Build

Key Insights

Defining the scope

Slant'd is a community created by and for Asian Americans with a mission to celebrate Asian American identity through personal storytelling. I was tasked with designing the website for this community. Based on the kick-off meeting with Slant'd's creative director, I found the following information to guide my design process:

  • Goal: engage people to sign-up for Slant'd's newsletter, subscribe to the magazine, purchase from the shop, and/or become a member
  • Audience: Asian Americans
  • Aesthetic: unapologetically bold, optimistic, candid, humble
  • Pages to consider: Membership (sign-up), Submissions (for the magazine), Gatherings (events), Shop

Conducting a heuristic evaluation

We conducted a heuristic evaluation of Slant'd's existing website to understand what problems users were facing as they navigated the site.

Unclear CTA buttons

On multiple pages, there were CTA buttons that did not have clearly defined purposes. On the Landing Page, there were two options side by side with no information about the difference between the two CTA's. On the Membership page, I noticed two CTA buttons for a membership and subscription, which were not clearly differentiated.

Dense and boring text information

Slant'd has a brand that is bold and expressive. On the Submissions page, I noticed that the instructions for submitting writing pieces was long and boring, taking away the delight factor of the user experience.

Ideation

Understanding who Slant'd is

We created a persona of the typical Slant'd member to understand how they came to join the organization.

Organizing a site map

We created a site map to define the website hierarchy. This informed how we would design the Landing Page and the subsequent pages.

Design WORKFLOW

Wireframes

Our process for designing wireframes was as follows: mid-fidelity design > usability tests > high-fidelity design > usability tests > final design. We conducted usability tests after each round of design to ensure that our design was functional and intuitive for users.

The left image is our mid-fidelity design and the right image is our final high-fidelity design.

Creating a flexible user flow

During usability testing, we asked users to purchase a previous Slant'd magazine issue. We found 3 different paths that users took to navigate to the product page.

Challenges & Solutions

1. Clearly defined pricing plans

During usability testing for both mid-fidelity and high-fidelity, we found that users had trouble differentiating between a membership and a subscription. After multiple rounds of iterations, we created the following design because it clearly differentiates the price and plan for each option.

2. In-person vs. virtual events

As a result of the coronavirus pandemic, Slant'd has turned their upcoming events from physical to virtual. After multiple rounds of iterations on the high-fidelity wireframes, we decided on the following design because of the clean delineation of event types (show all, virtual, IRL) and easy-to-read format for the event information.

RELFECTION

Slant'd is a collective of Asian Americans celebrating the journey of self discovery through personal storytelling and gatherings. Keeping this in mind, we re-designed Slant'd's website to be colorful, daring, and creative. We conducted multiple rounds of usability tests at each iteration to ensure the functionality of the website as we explored bolder ways to express Slant'd's mission.