Portfolio

Last Updated on

24/8/2022 5:14 PM

Demo

Teammates

My Role

Team of One

⭐ Featured Skillset

Building a tech product from ground zero and transforming design to code⭐
Turn conceptual ideas into useful, valuable, and feasible products
Pitching the idea and creating slide decks using Canva
Propose learning objectives and goals
Wireframing and prototyping on Figma
Designed various artifacts using Adobe Photoshop and Illustrator
Developing the desktop app using React Electron
Tracking my design sprints using Jira
Pushing to production by creating the .exe file

Prototype

Try out Glass. Download the executable file and install in on your PC.

‍

Coming Soon...

Link to code base (pending approval)

‍

Background

As the COVID-19 pandemic worsened during my internship, there were more lull periods between working on Where2Clean and other miscellaneous tasks. This was when my supervisor invited me to start on a self-led side project.

I was naturally excited to work on it, but the greatest challenge came with deciding what to do. I could have done something simple such as redesigning collaterals, but I wanted to put what I learnt to good use and reinforce my learning – creating tech products from scratch using design think and agile methodologies, branding and design principles, and application of UI/ UX design concepts. These were the learning objectives I had set for myself.

‍

The Challenge

I was interested in helping my colleagues improve their workflow. The high-level goal is to improve productivity by using technology, e.g., removing repetitive tasks, enhancing cooperation, or improving quality of work.

‍

Discovery / Research

I mainly used the diverge-and-converge collaboration method.

During the first stage, I exercised divergent thinking by brainstorming and conversing with my colleagues. Some ideas proposed by my colleagues were a community bonding platform, a collaboration tool or an idea bank. However, this was an occupational habit or an error in the way I probed my colleagues. Rather than ideas, we first needed problems on which we could then discover solutions. To define the problems after receiving many ideas, I had to reverse-engineer the proposed ideas and identify the various pain points.

Community bonding platform – lack of cooperation and synergy between project members and tribe members. Collaboration tool – dissatisfaction with existing collaboration tools. Idea bank – lack of a central archive (inadequacy / inaccessibility) or sharing of ideas.

‍

Insights

There was an overall dissatisfaction with collaboration and communicating ideas between colleagues. Part of this dissatisfaction could be derived from having to switch between multiple tools and sites to complete their daily tasks and assignment.

Over multiple sprints that I had set, I had discovered that the problem was not unique to just my team. Others had also felt the same dissatisfaction from having to switch between multiple tools and sites.

Bookmarking was a way users tried to solve the problem. However, this did not work well as there were too many links to be bookmarked properly.

I had created a proposal deck to present my findings as well as the tech stack, development timeline and some potential future developments. Refer to the final slide deck + proposal deck below.

Slide Deck by Brandon Ho

Reframing the Problem

This begged the question; how can we:

consolidate the tools and sites which are used frequently?
promote collaboration and transmission of ideas?

‍

The Solutions and MVP features

Based on the insights, we had to primarily create a platform that consolidated tools and sites and include secondary features that promoted collaboration and transmission of ideas. There was a need to prioritise which features to develop. I focussed on solving problems that were the most significant yet solvable with my skillset, within the deadline.

To quickly push design to code within the short span of one month, I focussed on the users I was most familiar with – designers – and started building a “Most Lovable Product” rather than a mere “Minimum Viable Product”.

The wireframe was done on Figma and I had intentionally avoided user testing as I knew what the product needed to be as an intern who had worked in Accenture for close to 2 months. The core feature was a workstation which consisted of a single web process with a scrollable side bar that functioned as an advanced “bookmark”. The side bar had a sorting tool to categorise links and sites. The categories I included were “Quick Tools”, “Inspiration”, “Design News”, “Learn Design”, “Prototyping”, “Mock-up”, “Vector Illustrations”, “Stock Photos”, “Colours”, “Typography”, “Icons”, “Templates” and “Presentations” and they were preloaded with sites that I personally used.

I had also planned to include a screen recorder but quickly deprioritized that as it was not part of the primary feature.

Design Strategy

Anti-thesis of clutter by keeping the design minimalistic and simple.

I had created the high-fidelity prototype on Figma from the get-go as I knew what I wanted. This was to reduce development time to meet the deadlines. You can see the Figma sandbox below which contains the hi-fi screens.

‍

Because of the reduced clutter, interactable UI elements and important copy could be enlarged. These were important UI elements such as the buttons in the main menu, card sections in the side bar, clickable links and icons which required the action and attention of the user.

The copy had to be compelling, meaningful, and intentional, the reduced wordcount would reduce cognitive load and free up screen estate for images and icons which had more immediate recognisability.

I had also selected pastel colours which were softer, lighter, and most importantly, calming to the user. In a similar vein, I had used soft shadows and minimized the used of large contrasts to prevent distractions. This colour palette would form the basis of my design, including the brand logo, UI elements and slide deck.

‍

The Launch

I carried out a demonstration of the final product and presented my learnings in a slide deck to my supervisor. I had also sent the deck, codebase, and executable file to my supervisor and two other managers.

‍

Things that could be improved

Create a dynamic desktop application that interacted with a database

Allow users to adjust the workstation and create their own categories, with their own links.
Allows users to select pre-set profiles for different roles which populated the workstation with appropriate categories and links.

Create a site containing DIVA-wide related content and embedding it to the workstation.

Rather than a standalone site, a Confluence page or something similar could be used.

Create a new feature which allows for the curation of files, notes, and insights

This benefits user by allowing them to manage large amounts of information on a single platform.
The information could perhaps be organised into a PARA structure.

‍

The Impact

Glass' workstation allows for a single web process to run at a time but saves your log in details on the different sites you have visited. There was 10% - 50% reduction in memory usage which reduces “lag”.

‍

Reflection

Generally speaking, I will never know if there were any tangible impact as I could not follow-up with the team. It could potentially be useful if more work were to be done on it (I had included the things that could be improved in the final slide deck). However, this required additional work from developers and designers which might not be approved by management. I also hope that my project had inspired some colleagues to pursue intrapreneurship.

‍

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

Side Project | Internship

Glass Creative Suite

Demo

Teammates

My Role

See more of my work:

OUIYO

Shopee's Power Trio

Where2Clean

Glass Creative Suite

DesignCourse Challenge

presend

MintUp

Others