UI design projects

Marketing design system

An online brokerage underwent a rebranding; as part of this I was engaged to redesign some of their marketing sites, in the process laying some groundwork for a new design system to go with the new branding.

I redesigned two sites, creating common components in the process for reuse across mobile and desktop, with accessible dark and light modes.

6 images

Trading scans

An online brokerage was developing a mobile app for trading and wanted to integrate scans as a feature.

Scans are dynamically generated lists of trading instruments that meet specific criteria, reducing the need for analysis to find trading opportunities.

How could we help users to trade better through integrating scans?

9 images
Home page - mobile
 
Browse all jobs - mobile
 
Job detail view - mobile
 
Browse all jobs - desktop
 
Job detail view - desktop
 
Home page - desktop
 
Content page - desktop
 

Cars and Jobs

I was engaged by GNR8R to completely redesign and rebuild carsandjobs.com, a Canadian national automotive jobs and education site.

I was responsible for overhauling the design, structure and layout of the site. In addition, I was took charge of front-end development and directed an external team of back-end developers.

7 images
View instrument
View instrument
 
Create alert for instrument
Create alert for instrument
 
Edit alert condition
Edit alert condition
 
Alert notification
Alert notification
 
Alert triggered
Alert triggered
 
Manage alerts
Manage alerts
 
Create new alert
Create new alert
 
View alert history
View alert history
 
View alert trade history
View alert trade history
 

Automated trading

Traders are increasingly using automated trading, whereby the trader defines rules by which a trading platform automatically trades on their behalf.

Because of this, as part of their new mobile trading platform, a brokerage wanted to explore possible ways of integrating automated trading.

How could we empower users to become better traders through automation?

View instrument
9 images
Create alert for instrument
Edit alert condition

Prod Timer

In the absence of any tools on the market fulfilling their needs, EightyOne got me to design and develop a time management tool for OS X.

Specifically, they needed a simple yet powerful tool which would enable each of their employees and freelancers to easily track their time worked against any given job and upload timesheet entries to WorkflowMax.

Through ongoing discussions with the future users, I created wireframes and iterated functionality and layout to suit their needs.

The final application makes it easy for users to track just the jobs that are relevant to them, even when working with other applications. With just two clicks they can track time against a job. The application adapts to the user’s workflow with a range of display and behaviour options, and automatically resolves network issues so the user does not need to worry about the backend.

6 images
Wireframes
Wireframes
 
Functional development
Functional development
 

State Asset Wars

In partnership with Xequals, I worked a cross-platform mobile game called State Asset Wars. Inspired by the popular trading game Dope Wars, it puts a dark satirical spin on national and international politics.

On this project I spearheaded the UX design, wireframing and prototyping and the screens. Functional prototypes were user tested with friends and acquaintances.

I was also responsible for development of the UI, and providing creative direction on that front.

5 images

skeletonclock.digital

My second personal website, skeletonclock.digital was inspired in name and visuals by skeleton clocks - these are clocks where the ornamentation is provided by the innards and movements of the clock itself.

I designed the site as a stack of cards which is navigating using static arrow buttons and a set of tabs at the top of the page. Each card slides in or off from the side of the screen and contains a category of my works, which can be scrolled vertically just like any conventional page. I also included separate interstitial pages like plates in a book, as a canvas for interactive animations I had developed.

The whole site was built on the ASP.NET CMS Umbraco, with lots of modular JS/TS on the front-end to manage transitions.

3 images

AutoShow

The Canadian International Autoshow is an annual event held in Toronto, Canada. I developed a promotional mobile microsite for GNR8R in conjunction with AutoLife.

Initial visual designs were provided by a dedicated designer. Though lacking a back-end, I built the site to be dynamic, taking into account the user’s date/time and timezone to avoid showing past events and ended prize draws while the show was running.

Furthermore, I was solely responsible for the visual and UX design of the map function and shuttle timetables. For the map I designed an clickable floor map in an abstract modern style to blend in with the previous designs, while for the shuttle timetables I used public transport timetables as a reference for communicating times clearly.

6 images

AutoLife

AutoLife is a Canadian automobile and lifestyle site created by GNR8R as an antidote to pre-existing sites which were seen as having a singular focus, being very sales-driven and lacking in transparency.

I was brought in take over front-end development from an offshore team, and to develop the motion design of the site, build new features and maintain existing features. As part of this process, I created functional prototypes of the animation and features and consulted with dedicated designers.

Following the launch of the MVP, I took a greater role in the design of new features, leveraging and extending the existing design language to lay out and build new pages.

3 images

Red Rooster

From start to initial release, I was integral to the front-end development of an adaptive online ordering site for the Australian national fast-food chain, Red Rooster.

In the first phase I took responsibility for the realisation of the tablet/desktop UI, developing a custom touch-driven menu and user-flow, separate from the mobile user-flow.

On the basis of my performance, I took over as primary front-end developer on the second half of the project, being responsible for diagnosing and implementing all front-end fixes and enhancements.

3 images
Job tracking page
 

Prod

The production studio Prod required a new website as a point of contact with clients and potential clients. I helped them design and was responsible for implementing this site.

Due to the nature of their working partnerships it is not always possible to publicly present work they have done. So they decided to use the site to convey a sense of taste and open possibilities through the showcasing of interesting imagery. The site also included a secure area for clients to log in and view the progress of jobs for which the studio was performing work. For this I was responsible for both the UI design and implementation.

For this I implemented and laid out the functionality for displaying a different image and text each day of the week. And through the use of dynamic CSS and SVG graphics, I provided the means to coordinate the colour scheme of the site with the imagery, right down to the colour of the company logo.

4 images

Greedy Grunters

For a startup I was involved in (Spoink Games!), Hungry Piggies was redeveloped as a 2.5D Flash game designed to integrate with Facebook.

In this instance I was responsible for the bulk of the development work, as well as some UI design.

3 images