Benefit one

Product Design

From over 500 applicants worldwide, I was 1 of 15 accepted into the PASONA International Exchange program. I was placed in one of their sister companies, Benefit One. Benefit One is a B2B2C welfare company that provides rewards through a point system.  Their website, Benefit Station allows customers to redeem their points for various items such as a massage, Disneyland tickets, or a luxury watch.

Tools

Figma, Origami Studio

RESEARCH METHODS

Goal-Directed Design, Guerilla Testing, Rapid Prototyping

ROLE

UX/UI Designer

TEAM

Media Group

DURATION

June 2017 - August 2017

Background

Problem Statement

The mobile website of Benefit Station was overlooked and did not meet modern visual design standards.  Swamped with the desktop site, the web development team was unable to give the mobile version a proper design.

Challenges

Innovate

I had an extremely limited timeframe of 5 weeks. I had to design efficiently and iterate as many times as possible.

Get it done

I was working on the project alone, so I had to be able to provide reasoning for my design decisions to the rest of the team.

Approach

I took a simplified goal-directed design approach due to the limited timeframe. By following widely accepted homepage design principles and comparing to other ecommerce homepages, I was able to define the user’s main goals for it.

Research

Homepage design principles

comprehend

Users should understand the services and products the company provides.

navigate

Users don't want to stay on the homepage. They want to get to the products they are interested in purchasing, and so do businesses.

simplicity

Users should have a clutter-free design, especially on mobile devices where there is less screen real estate.

Problems with each principle

learnability

Specials and sales had flashy imagery without descriptions of the offerings. Users had to click into the offering page to understand it.

information architecture

The ordering of homepage sections didn't make sense. The search bar, a primary function for e-commerce sites was placed under the fold so users had to scroll down to find it.

cognitive overload

Eastern web design typically lathers the homepage with advertisements and eye catching imagery that cognitively overloads the user, and Benefit Station was no exception.

Design & Testing

Rapid prototyping

I started by wireframing in Figma, then working my way to high-fidelity prototypes with Origami Studio by the third iteration.  After each iteration, I gaining feedback by presenting my design decisions to the rest of the team.

Guerilla Testing

Since recruiting test participants would take too long and I wanted to get through as many iterations as possible, I conducted in-house guerilla testing to gain feedback from iterations 3 to 5.

Final Designs

SEARCH BAR

A web-standard, I placed the search function at the very top to help users find their product faster.

Location-Based Search

Location-based search options were scattered around the current design, so I grouped them together.

Category Search

With so many categories, it’s difficult to locate the correct one.  In order to help user’s find them more easily, I added icons and colors to help users recognize them more easily.

Popular Products

This section took up a lot of space, so I placed them into two different tabs.  This made the images clearer and easier to understand what the product was. I also added descriptions so users could understand what ambiguous images meant.

Specials & Original Contents

Since the current design only had images, I added an expandable decription box to help new users learn and understand the content without clicking on it.

Footer

The footer was condensed in size and all relevant links were consolidated here.

Learnings

Communicating Design Decisions

Since recruiting test participants would take too long and I wanted to get through as many iterations as possible, I conducted in-house guerilla testing to gain feedback from iterations 3 to 5.