Redesigning Descent Magazine's Website

The Project

As part of Innovative Design, USC’s student-run creative agency, I worked with 3 designers and a project manager to redesign Descent’s website – an art editorial at USC that features Asian Pacific Islander Desi American (APIDA) student creators. In particular, I was responsible for redesigning the "about Descent", "our team", and "resources" pages.

Date

Oct - Nov 2022

Tools

Figma, Squarespace, Notion

Role

UX/UI Designer

Methods

Mood boards, Site Maps, Pain Point Analysis, Wire-framing, Prototyping

About Page

Before

After

Resources Page

Before

After

Design Process Overview

Part 1

Understand

Project Brief

Descent Magazine provided us with a written project brief outlining the main challenge and important context such as the target audience and key message.

The Challenge

The current website doesn't match the magazine's aesthetic. In addition, we want to actively engage those in the APIDA community.

Target Audience

Other students, particularly APIDA creators.

Key Message

Descent is a trendy arts magazine that serves as a safe place for APIDA artists to create, explore, and share.

Part 2

Ideate

Pain Point Analysis

With the project brief in mind, we individually went through the website and took note of pain-points. Then, we came together to organize our observations.
From there, we outlined four main areas of improvement:
1. Unify the website’s visual identity with the magazines
2. Make the website more interactive
3. Improve the website’s information architecture
4. Include a clear call to action in order to engage the community

Site Map

In order to improve the website’s organization, we focused on consolidating pages and clarifying nav bar labels. We also worked on reducing the number of external redirects to google docs by including key information directly on Descent’s website to reduce friction and improve usability.

Mood boarding

We each created a mood board to gather inspiration for visual design and interactions. Some remerging key words were “bold” and “artistic”.

Part 3

Design

Style Guide

We each came up with 1-2 color palettes and font combinations. We decided on a color palette I proposed, inspired by East Asian art and past Descent material. For typography, we selected a sans-serif font for the header to convey a friendly tone and a serif font for the body to enhance readability.

Low Fidelity Wireframes

At this stage, I focused on adding visual elements and restructuring each page to increase the visual appeal and decrease cognitive load.

Design Decisions

About Page

To help with visual consistency and make the page less overwhelming, I chose to display the team member bios upon clicking on a member photo rather than directly beneath.

Resources Page

Instead of having all links on one page, I created a screen where resources are organized by topic so users can easily navigate to the specific topic they are interested in.

Medium Fidelity Wireframes

At this stage, I focused on implementing the style guide, experimenting with visuals, and utilizing common UI elements for better usability.

Design Decisions

About Page

I incorporated student artwork directly from Issues to showcase work and unify the aesthetic of the magazine and website.

Resources Page

I used an accordion to organize resource links. When more links are added in the future, the user can choose to expand and collapse categories without excessive scrolling.

High Fidelity Wireframes

At this stage, I focused on resolving any remaining questions and making final touches to make sure my page was cohesive with the rest of the team. After we finalized the designs, we each prototyped our pages and connected them together.

Design Decisions

Universal Application

  • We chose to move the resources to the footer since the main priority of Descent is to showcase student work.
  • For the nav bar, we decided to go with gold because it had the most contrast with the black text. We also changed the shape to be a wave to reflect the organic visual aesthetic of Descent.

Resources Page

I chose to use iconography for the resource cards since I found they better aligned with the visual aesthetic of Descent's material.

Final Screens

Part 4

Development

Squarespace

With the final pages prototyped, we moved on to developing the website on Squarespace. While we were able to use CSS to create some custom styles we ran into technical limitations. As a result, we had to make a few improvisations for some of our designs as seen below.

Takeaways

01 Make Sure You Have the Right Tools

Squarespace had limited features for the design and interactions we wanted to do. In the future, I learned it’s important to do research in advance on potential tools to see if they are a good fit for the project needs.

02 Practicing the Art of Critique

This project reinforced that critiques are essential. Though critiques, I was able to get fresh perspectives on designs. Routine critiques also trained me to be conscious of my design decisions and be better prepared to explain them. In addition, I was able to practice articulating my own suggestions in a constructive and clear manner.

03 Combining Individual Ideas into a Cohesive Result

This project allowed me to practice combining individual ideas into a cohesive result. I found it helped to have regular check-ins and clear individual responsibilities. This approach provided us with significant individual freedom to pitch ideas, particularly during brainstorming stages, as long as final decisions were made collectively as a team.