Portfolio

Last Updated on

31/8/2022 3:19 AM

Demo

Teammates

My Role

‍Participant

⭐ Featured Skillset

Created a clickable prototype using Figma
Motion design by animating the prototype ⭐

Prototype

Background

After my interview with Accenture and before the internship started, the interviewer (to-be supervisor) mentioned that they used Figma to work on wireframes. Incidentally, DesignCourse held a challenge to design a music player mobile app (view details here). This was the perfect opportunity for me to pick up Figma by creating a clickable prototype.

‍

The Challenge

Create a music player mobile app that was comparable to current music players in the market. The difficulty was in the open-endedness of the challenge.

‍

Discovery / Research

Look at existing music players such as Spotify, exercise product critiquing and articulate design decisions.

‍

Insights

1. Not being able to play a track while viewing the entire album.

Spotify’s designers might have made this decision knowing that showing the entire album might draw away the user’s attention from the track which was currently playing/ increase cognitive load.

2. Not having a search bar in the home tab and only in the explore tab

Spotify’s designers might have made this decision to free up screen estate for more useful / valuable features such as user recommendations.

‍

Reframing the Problem

How can we create a music player which was more intuitive to use yet mitigating the downsides?

‍

The Solutions and MVP features

‍

1. Replace the “Good Evening” copy at top of homepage with a search bar. The copy did not provide much value and occupied a space where most people would assume where the search bar would be.

‍

2. Include gradient stroke around playing track. The gradient stroke would draw the attention of the user back to the playing track, allowing them to select essential controls, if need be, while being able to view other tracks.

Design Strategy

1. Atomic framework / design methodology to create reusable building block for UI elements. Prevents repetitive work and allows me to control overall design by changing just the base components.

2. Include animation to illustrate the actual process of playing a track, allows user to experience the intended effects rather than just viewing static screens.

‍

The Launch

Shared clickable prototype which was judged on livestream.

‍

Things that could be improved

1. Dropdown menu could be pulled down further

2. No need for image overlay of album since image was already big enough

‍

The Impact

“The first entry that animated one of these”

“Pretty solid otherwise”

Comments from Gary Simon, DesignCourse instructor. View the judging here.

‍

Reflection

Use of animation in a wireframe is effective in conveying ideas and convincing stakeholders. Is this a step above ahigh-fidelity prototype but less than an MVP?

‍

Appendix

Runners' Club

Aug 2020 - Jul 2021

Student Club | Publicity & Publications Subcommittee

As the Assistant Publicity Officer of the NTU Runners' Club, I had undertaken several design related projects. Starting with the official rebranding by creating a style guide for our club. From there, we used the style guide to redesign our logo, club shirts and social media posts.

Some notable accomplishments included designing collaterals for ruNTUgether and Race Bingo, university-wide events that the club had planned and executed while also advertising and publicizing our sponsors.

During weekly official run days, we Assistant Publicity Officers were in charge of photography and also managing the social media accounts. Additionally, we had the responsibility of leading groups of 5 (limited due to COVID) on the runs.

Welfare Services Club

Aug 2020 - Jul 2021

Student Club | Publicity & Publications Subcommittee

Designed two magazine articles, a longform investigative piece "Apart but Not Alone: COVID-19 & The Elderly" on Page 10-11 and an infographic "COVID 19 in Singapore: A Summary" on Page 32-33, as part of the 15th issue of the club's annual magazine "StandOUT". The magazine was published university-wide.

Designre

Aug 2020 - Sep 2020

Personal Project | Education & UI/UX Design

Designed and created Instagram posts intended to teach others about UI/UX design. Topics I have posted about include:

UI / UX are NOT the same thing
Why is UI / UX design important
What about graphic designers
What is the interface in UI?
How about aesthetics?
Brand Identity
Product Design

Accenture Collateral

May 2020 - Aug 2020

Graphic Design | Page Layout Design | Copywriting

Designed Changi Airport Group's quarterly newsletter and DIVA's product catalogue.

Due to non-disclosure agreement, please contact me for more details!

CCTeam Initiative

Aug 2019 - Jan 2020

Student Initiative

Proposed a project “Resumption” which aimed to reduce waste in hotels and raise awareness on responsible consumption in Singapore and Hong Kong.

Led team comprising former members of the United Nations Sustainable Development Goal (SDG) eTournament (see resume) from Taiwan and Hong Kong to ideate and create a sustainable development project lasting up to 6 months and funded for HKD50,000 . Our proposal for "Resumption" had garnered the approval of the reviewing committee over the other submitted proposals. The project was discontinued due to the Hong Kong riots and COVID pandemic which shut down tourism in Hong Kong and effectively stopped our proposal from being implementable.

‍

Project Proposal

Proposal Review and Approval

Challenge Submission

DesignCourse Challenge

Demo

Teammates

My Role

See more of my work:

OUIYO

Shopee's Power Trio

Where2Clean

Glass Creative Suite

DesignCourse Challenge

presend

MintUp

Others