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 :)

dfinder

UI redesign for an app to find nearby tuition providers

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

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.

1

2

3

1. add text labels to icons to remove ambiguity

2. group filters and sort options separately

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

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

2

2

2

4

1

3

4

1. powerful CTA

2. features relevant to commuter presented logically

3. traffic alert before committing to journey option

4. 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 

1

2

1. long nav bar with ambiguous nomenclature

2. hidden CTA

Redesigned website (desktop layout)

1

3

2

4

5

6

7

1. succinct nav bar

2. prominent CTAs in global header

3. live counter inspires new visitors and instils a​ sense of accomplishment for volunteers

4. quick visual indicator to see where help is most needed

5. quick RSVP buttons

6. relevance: upcoming events based on the volunteer's interests

7. reports of previous events give a sense of accomplishment

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. 

1

1

1

2

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

2. larger buttons optimised for touch interface

The entire case study is in my Medium page.