INTERFACE DESIGN
I have thrown in some UI designs I have done using Adobe Xd / Figma, without any explanation of the process, for the people who are not interested in it. For the ones who care, do scroll down :)
bf
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
My role: Competitor Analysis, Heuristics Evaluation, 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. 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
1
2
3
And here are some key frames from the Hi-Fi prototype.
1. Powerful CTA
2. Features relevant to commuter presented logically
3. Traffic alert before committing to journey option
4. Quirky Singlish usage contributed to higher enjoyability ratings
2
2
1
2
4
3
4
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
My role: Heuristics Evaluation, Content strategy, Wireframing
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. Long nav bar with ambiguous nomenclature
2. Hidden CTA
1
2
Redesigned website (desktop layout)
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
1
3
2
4
5
6
7
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. The ever-humble dropdown icon for progressive disclosure of information on limited real estate
2. Larger buttons optimised for touch interface
%20cropped.png)
1
1
1
2
The entire case study is in my Medium page.