Similar Selected Projects

What is the product?

AdStudio is a complex advertising management platform with modules like client portal, CMS, design editor and metrics dashboard. From ad design to metrics tracking, AdStudio simplifies the music ad management flow for diverse users such as designers, developer and marketing professionals. During my time at F#, I focused on creating a more human experience for the design editor to better serve ad designers inside the company and working for other clients. Although I cannot share all my work, below are some of the features I worked as the UX designer on:

Animation event feature

01

User interview

The product direction and primary features have already been established when I joined the creative team at F#. While existing and new features are on their way to be optimized and designed, graphic designers in the company had already worked with the product to implement ads. I interviewed them to understand their demand and suggestions to better shape the feature requirement.

02

User Requirement

We gathered all the user requirements through research and user interview and group them into high-level product features we can work on.

03

Competitive Analysis

After gathering as many insights and needs as we possibly could, we researched through other web design tools as well as content management systems with design editor features to determine the best practice. It helps me include all user requirements and get ready to build a minimum viable product.

Most of the practices are too complicated for our purpose so we scope down to come up with our unique solution.

04

Wireframe / Prototype

We created the mid-fidelity wireframes in Omnigraffle and used it to refine the interactions and user flow. All user requirement are mapped to one or more wireframes with all possible interactions clearly outlined. Some of the the key wireframes:

05

Visual Design

The visual design is for initial direction. Details like animation icons will be further polished before development.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

06

Microinteraction

Fast and minimal microinteraction is created at the end to communicates feedback of action and highlight changes.