INTERFACE DESIGN

I have thrown in some UI designs I have done using Adobe Xd, without any explanation of the process, for the people who are not interested in it. For the ones who care, do scroll down :)

E-cycler

UI for an app that incentivises recycling and connects individual recyclers to big collectors

Data Visualization

Data visualization designs for trends and live observations

dfinder

UI redesign for an app to find nearby tuition providers

mytransport sg

Brief: Identify problems/opportunities with an existing app and provide a solution using a high-fidelity prototype

Duration: 2 weeks

Team: 3 members

Methods: Competitor Analysis, Nielsen's 10, Feature Prioritization, Wireframing

Background

 

MyTransport SG, an app owned by the Land Transport Authority (LTA) of Singapore, markets itself as a transport companion. The users of the app wasted a lot of time synthesizing decisions from the raw data that is presented or planning journeys in other apps. We had revamped the app to optimise the Information Architecture and UI to present only relevant information to users when they plan a journey.​​

Current app 

Yes. It does look like an app drawer with links to ALL transport info (and other apps) you can think of. Except all the info is stand-alone and not integrated.

Redesigned app

 

Easy to use UI elements with the option of bookmarking relevant items to be retrieved easily. Also, the app does the thinking now. The user doesn't have to go into a dozen sub-menus and come out of them and formulate the journey plan.

Here are some Mid-Fi wireframes with recommendations to be implemented for the iterations.

add text labels to icons to remove ambiguity

group filters and sort options separately

move the expand-collapse icon right next to the # of bus stops 

And here are some key frames from the Hi-Fi prototype.

powerful CTA

features relevant to commuter presented logically

traffic alert before committing

quirky singlish usage contributed to high enjoyability ratings

The entire case study is in my Medium page.

food bank sg

Brief: Identify opportunities in an NGO and provide solutions by revamping their website with a responsive layout.

Duration: 2 weeks

Team: 3 members

Methods: Nielsen's 10, Wireframing, Pin-up sessions

Background

 

Food Bank SG is a platform that bridges the gap between food surplus and food insecurity. They collect non-perishable food donations and distribute it to the needy via charities and community clubs. The users of the website are current food donors, beneficiaries, volunteers, people interested to become one of the above and just curious people.

 

The redesign strategy was to:

  • Make it easier for volunteers to sign-up and indicate their areas of interest

  • Include a volunteer portal. It is now easier for volunteers to see their events, get reports of past events, and see upcoming events tailored to them.

  • Make it easier for donors to make donations

  • Improve the overall navigation, information organisation, learnability and 'feel'.

Current website 

long nav bar with ambiguous nomenclature

hidden CTA

Redesigned website (desktop layout)

succinct nav bar

prominent CTAs in global header

relevance: upcoming events based on the volunteer's interests

reports of previous events give a sense of accomplishment

live counter inspires new visitors and instils a​ sense of accomplishment for current members

quick visual indicators

quick RSVP buttons

Redesigned website (mobile layout)

 

The content is optimised for single-handed usage by volunteers who use their phones on-the-go. We presented just the absolutely necessary info first with the option of expanding it. 

larger buttons optimised for touch interface

the ever humble dropdown icon for progressive disclosure of information on limited real estate

The entire case study is in my Medium page.