Tim Tan Huynh [UX]

Product design: That Ad

  1. Overview
  2. Assignment
    1. Exploration & Definition
    2. Prototyping & User Research
    3. Evaluation
  3. Redux
    1. Revised Defintion & Prototyping
    2. User Research
    3. Revised Prototyping
  4. Deliverables

Overview

I designed prototypes for an online archive of commercials. The project started as coursework and had various iterations, but it was worthwhile. It motivated me to practice usability testing and to become familiar with Figma.

Assignment

Exploration & Definition

The assignment itself guided my initial thinking. It asked for a collection of playable multimedia, but it offered freedom. I decided to design an archive of commercials. I started with the main value of my would-be product. Then I considered the user-types and their use-cases. I articulated their needs and the corresponding benefits of my design. This thought exercise helped me to visualize the general direction and specific features.

Prototyping & User Research

I prototyped the layout using Figma, which was a challenge itself. I didn’t have total comfort with the platform at the time. I actually made prototypes for earlier assignment (Version 1.1), but I wasn’t satisfied with them. As part of that assignment, I reflected on things that I would change.

For this assignment, I implemented those changes. I tried to make the layout more compact and look more luxurious. I didn’t have time to make lo-fi wireframes, but I did some hand-drawn sketches. Then, I tackled making medium-/high-fi prototypes in Figma. I inverted the palette of the previous iteration; it had a black background and white text. I also simplified the palette to use one primary accent color and a secondary one.

The battle against perfectionism and uncertainty was never-ending, but I made showable artifacts.

I had an informal show-and-tell session with classmates to get feedback. My main takeaway wast hat not all clickable text was obvious and that icons could be useful. Also, the layouts for user-defined collections needed re-working. I did a usability test with a relative who represented one of the intended user-groups. My main takeaways were the importance of being able to scan a lot of results and to re-organize my toolbar links.

Evaluation

Again, I reflected upon my design. Self-evaluation requires the courage to be honest with yourself. As part of my assignment, I recorded a presentation that outlined my project and my process.

Redux

Revised Defintion & Prototyping

After I completed my studies, I revisited my project. I wanted to improve it and become more adept with Figma. First, I articulated value/benefit statements that would make this hypothetical product desirable. With prior findings and reflections in mind, I made low-fi prototypes using Balsamiq. The higher-fidelity prototypes would be in Figma.

User Research

With more available time, I did more organized research. I made a research plan and usability-testing script. Then I set up Zoom meetings with people whom I knew and who represented different user-types.

The testing reinforced my initial assumptions and colleagues’ earlier feedback. I needed to condense lists, reduce menus, and introduce icons. Some task-flows were too complicated and needed overhauling. I also needed to enable bulk-actions like Gmail, despite my initial reluctance. Although beyond the scope of this project, I gained insight about search engines. The main search needed to be adaptive enough to make any advanced search obsolete.

Revised Prototyping

With more robust research findings, I re-did the prototypes in Figma. It was painstaking, but I learned how auto-layout and components worked. I also made icons, albeit simple geometric ones.

Deliverables

I’m more satisfied with the results, but there’s still room for testing and improvement.