The official go2gether BETA logo.
A flat, illustrated iMac computer serving as a frame for my mockups.
Elliott wants to find a carpool to work and finds five routes to choose from (1/3) He hovers over the routes and eventually requests a ride from Madelyn (2/3) He gets feedback that his request is sent and prompts him to do a new search (3/3)
Video not working? Watch on Vimeo.

PROCESS + FOUNDATION

This is the wireframing process of the homepage (1/4) I was asked to integrate a video, sign-up form, login form and featured reel on one page (2/4) I explored different layouts, trying to avoid clutter that could overwhelm a visitor (3/4) I looked at websites that had varying sign-up and login forms to find the best solution (4/4)

Sketching, wireframing and designing mockups was a never-ending part of the job. I've created six interactive prototypes with Marvel + Balsamiq, burned through five sketchbooks and toiled over four different visual iterations of the entire system as go2gether's UX/UI Designer. Above are some examples of wireframes of the homepage. Below is an example of the visual progression of the 'post a trip' function.

The initial form to post a trip uses conversational language to ask for input (1/3) Based on team feedback, we reverted back to using conventional form standards (2/3) In its current state, we simplified by reducing user inputs and visual embellishments (3/3)

Prior to designing all these different pages and functions, I needed to understand what factors would make or break a person to ride-share with other strangers. So I conducted guerilla interviews with drivers so I can develop empathy for their needs and behaviours.

An iteration of the profile page that displays information in modular and graphical ways.

As a result of the interviews, it was consistently said throughout that safety and trust were the main concerns for most drivers. Therefore, we implemented member profiles and a rate-and-review system so that carpoolers could familiarize themselves with someone beyond a name.

VISUAL LANGUAGE

All the specific hex codes for the colours used on the go2gether website.

A basic pattern library was crafted for go2gether. The sample above shows the use of colours as signifiers for actions to guide users through our system. Below demonstrates feedback given to a user when a button is interacted with as well as the iconography.

The feedback given to a user when interacting and/or clicking a button on the website. The official iconography for go2gether.

As our member base grew, so did the clients who wanted to get in on the go2gether action. I modified the default system and helped develop pattern libraries for client customization to merge both our service and a client's brand in a seamless way. Below is an example of a user wanting to post a trip and how it transitions from the default go2gether branding to Vancity branding.

The default go2gether page when a person wants to post a trip. The Vancity x go2gether page when a person wants to post a trip.

MARKETING + ILLUSTRATION

Out first major client was Simon Fraser University (my alma mater). I was tasked in designing posters and banners that would be plastered around campus. The following is just one notable example of a poster I made in which I was both illustrator and copywriter for.

The first poster I made for go2gether as their designer.

I also created graphical assets for our email newsletter for seasonal promotions, as well as illustrations for other aspects of the website.

A graphic I made for an email campaign that advertised our partnership with SFU Starbucks. A nameless little robot I illustrated that worked behind the screen for our users.

FEATURED IN

CBC, The Georgia Straight, The Huffington Post, News1130

ROLES

UX/UI Designer, User Researcher, Brand Development, Coded Email Templates, Graphic Designer, Artworker

SKILLS HONED

Branding (with a holistic approach), Sitemapping, Heuristic Evaluation, Guerilla Interviews, Journey Frameworks, Usability Testing, A/B Testing, Sketching, Wireframing, Prototyping, Iconography, Illustration, HTML/CSS, Collaboration with Developers + Business People

TEAM

Madelyn Jones, Alice Park, Elliott Ro

WEBSITE

go2gether.ca