Guru Orange

design with clarity and passion

corporate ID

Sage.fm brand & ux/ui

By Leave a Comment

Sage.fm online video conversation platform

Sage.fm is an online video conversation platform, connecting experts (Sages) with those valuing their advice (Seekers). Currently, the start-up’s focus is shifting from product development to sales and marketing, with a number of early customers using the platform already.

The Sage.fm brand is premised on two principles, of elevating the Sages and of creating a brand that is high-end but stays in the background.

Sage.fm logo | design by Eli Brassé
Sage.fm live conversation screens

The live conversation is, naturally, at the heart of the platform. The design enables browser-based conversations across all types of devices, while delivering information about time and money spent and more.

The profile and dashboard pages are bootstrap-based, mobile-first designs that aim at reducing visual clutter while delivering on the brand principles.

Sage.fm dashboard | design by Eli Brassé
Sage.fm profile page | design by Eli Brassé

See more at sage.fm

Raw Money brand, id & ux/ui

By

Raw Money front page | design by Eli Brassé

Raw Money founder Margie Stewart and I have collaborated on setting up this unusual new business over the last year or so now. Margie came to me with an idea for a brand new business, and has given me the opportunity to work with her on setting up the brand from the ground up. We started with a series of workshops to develop a brand and communications strategy in a collaborative manner, and took these outcomes into creating a set of core images to symbolise the concepts behind Raw Money and the Raw Money logo. We then moved on to using the core brand design on stationery, the Raw Money blog site, and materials used in client sessions, as well as developing a brand style guide and content style guide.

Taking its cues from Renaissance paintings, the image concept speaks to new life being created out of the ruins of the old. All images have butterflies – symbol of transformation – in them, as well as flowers, symbol of youth and the force of life, while many also have hints of mortality. The Sydney houses these images are superimposed on are a representation of wealth that lies dormant.

Raw Money subpages on smaller screens | design by Eli Brassé

Raw Money imagery | design by Eli Brassé

See the site at rawmoney.com.au

HepCheck 1 2 3

By

HepCheck 1 2 3 homepage

Hepcheck 1 2 3 was a project by the Eastern Sydney branch of NSW Health. It created access to and uptake of Hepatitis C treatment for people in Sydney who experience homelessness. It was a collaboration of NSW Health with a variety of non-government and government health service providers in the inner city of Sydney.

Hepcheck 1 2 3 was delivered by guru orange in collaboration with various organisations that are part of NSW Health and the NSW Health IT team in 2015. The project was discontinued in 2018 due to new treatments for HepC being delivered across Australia, taking treatment time from 1 year to 3 weeks.

We kicked off the project with a series of UX workshops with all stakeholders. We worked together with health staff from various organisations to deliver the content for the site, delivered the UX and UI design on both the front and back end, and collaborated with the Health department’s IT team to implement these. We designed a new brand for HepCheck 1 2 3 and built the front end website in Drupal. We conducted customer feedback and usability testing sessions. We wireframed the back end website and art directed the Health Department’s team. Lastly, we conducted training sessions for health staff.

Supporting documents:

Process document examples:

Following an initial workshop, the outcomes were condensed into flow charts using balsamiq.  See Early UX flow chart for backend

This was then turned into wireframes. See Front end wireframes (iteration 1)

The front end design, tailored to users with low language/literacy skills and poor access to the most current technology was then developed. Here’s an example of the information section in step 1. See Front End Design (chosen suggestion, iteration 1)

A screengrab of the working backend section during testing phase.