BEST (Better Environmentally Sound Transportation) is a non-profit organization with a long history promoting sustainable transportation in Metro Vancouver. Their mission statement is “to activate better transportation options through initiatives, collaboration and leadership”. There are six different programs BEST runs own their own or with partners, that provide sustainable transportation solutions. The Bicycle Valet, their biggest program, provides safe and secure bike parking in Metro Vancouver.
We looked at various non-profits and impact-driven organizations websites to find out how they communicate their visual language. We drew inspirations from Ecotrust, David Suzuki Foundation, the Bloom Group, and Modo. A common theme that we found from these websites are the use of strong imagery to communicate their mission and actions. Some sites use bold colours while others have micro interactions and playful design to captivate the visitors.
There are two main user personas for the website. One represents the patrons, who loves to attend outdoor activities and would be likely to look for a program like Park Bus. The other represents the sponsors, who is a business person looking for a local non-profit that aligns with their values to sponsor.
We conducted a Gut Test with our client showing with various visual elements and design styles. We showed a variation of non-profit and impact driven websites that convey imagery, illustrations, colour palettes, composition and typography in different ways. Our client conveyed his likes and dislikes that helped us move forward with our design directions.
In order to inform our visual design directions, we were brainstorming for a Why and came up with one that’s close to their vision statement:
To build thriving communities through promoting sustainable transportation solutions.
Based on the Why and the gut test results, we decided to go with two design directions. The Vibrant Communities direction is a playful, vibrant, and dynamic direction that communicate BEST’s fun and down to earth personality. The Urban Action direction communicates a more grounded, urban, and mature vibe of BEST.
We created two mood boards that convey the moods of the two directions. The Vibrant Communities mood board brings a sense of playfulness, adventure, retro and lively vibe. The Urban Action mood board is more urban with darker colours.
The Vibrant Communities style tile is energetic with a colourful palette and fully rounded buttons. For this direction we picked Neutraface which has a development history of novelty and fun with vintage inspirations. The imageries are bright and happy. Urban Action is big and urban with heavy set type using Raleway and more muted colours. This direction used overlaid images of the city to have a closer connection with the landscape it’s suppose to be a part of.
Logo: We were still working on a new logo at this point so we placed the current BEST’s logo as placeholder.
Typography: We’re happy that the client decides to go with Neutraface for the header typeface even though it’s a paid typeface. We still provide a free version in case they change their mind, but we believe that Neutraface is the best fit for the brand and design direction. It’s playful, strong, yet still friendly. For the body text, we picked a free Google font, Mukta, for a clean sans-serif look to pair with strong Neutraface.
Buttons: We went with fully rounded corners, for a clean and friendly look.
Graphical devices: all the boxes have rounded corners since our client prefers less boxy look.
Preview: it’s a reveal, keep scrolling to prototype!
At first the client was not inclined to creating a new logo for BEST, since they have had it for a long time and printed it on many materials. We presented the benefits of having a refreshed logo that’s more fitting with the new visual language of BEST. The current logo has a lot of details and doesn’t have a modern urban vibe. We explored various options that represent the new brand and some that are still close to the current logo.
After a few rounds of consulting with the client, we landed on the logo below.
This logo represents BEST’s various programs and values through the four brand colours, using Neutraface typeface. We kept the bars from the original logo to represent transportation and to resemble the current logo. It’s a clean and modern take of what BEST is now.
As part of the design, we created image cut outs of transportation elements such as bike wheel, bus, crosswalk lines, with a vintage undertone through duotone treatments. We applied a gradient overlay on images for a modern and playful vibe as well. Last but not least, we adopted non geometric composition for a sense of novelty and playfulness.
Branded content: It would be a better outcome if we have more cleaned up content and brand photography to work with. We would love to use a video of Vancouver for the splash page to show various transportation options and city vibe but it wasn’t doable given the short timeline.
Setting grids: We had a vertical grid system from MidFi and adopted the 8px spacing rule while doing HiFi. It would have been more efficient and consistent if we were to use the rule since MidFi.
Project management: Since UX timeline and work quality can impact UI work, it’s better if UI team can influence UX decisions a bit earlier.