Prototyping in an agile team
I prototype new module and add-on ideas to incorporate into PowerHub’s Lithium platform. Often, when a new feature is suggested, originating from internal or external feedback, the design team ideates how we might be able to bring it to life and quickly put together a basic prototype to be used as a visual point of discussion between the product and development team. These prototypes are used to whittle down ideas and expand on element and interaction details. Following the agile model, the design goes through multiple iterations from feedback, prior to and after release.
Our feedback comes from both clients as well as team members and we use all information to build requirements for new features or to improve on existing ones. The product team, which includes the design team, develop a user flow prototype to test our customer service representatives (and sometimes existing clients) before bringing successful ideas to the development team to configure.
Most recently, I have led design on the Plans module. It introduces a brand new and more visual way of interacting with tasks, an essential point of value for existing clients in renewable energy project management.
All of our competitors in renewable energy asset management uses similar Wordpress layouts with slightly different stock images. With one of the biggest industry conferences in North America coming up in our schedule, we wanted to launch a redesigned website, that’s different from those of our competitors, in a few short weeks.
Design Considerations: Research showed that more than 80% of our clients use desktop primarily but mobile was important in getting new business. Our website needed lots of adjustments in layout because it had been designed for desktop first and there were some issues in a mobile viewport.
Design Challenge: At the time of this design, PowerHub did not yet have branding guidelines in place and with a firm and fast-approaching deadline (conference date), it was important that design elements be flexible enough while supporting company values. Also, the accent color that is firmly in place (#84cf0a) is one that is not AODA compliant at AA-level against many of the lighter grey/white backgrounds and copy that we’ve used with it thus far.
Resolution: PowerHub’s software uses Angular Material Design, with some customizations. Its font-family is typically Roboto, but we wanted something friendlier for the website. At the same time, we wanted to build the company brand and with our logo being based on a deprecated version of Proxima Nova, we chose this font-family for the body of the website. Imaging values (natural hi-res photos of renewable energy) were already in place but we hunted for ones that were not used by competitors and after much testing and open discussions with both marketing and management team, we went with a darker green (instead of #84cf0a) that would be accessible and AA compliant.
The new site is a collaborative effort with the marketing team as well as our developers. It is grid based for a smooth transition between mobile and desktop. There continue to be styling changes to be made, as our company branding develops. I am currently working on PowerHub’s very own design system. It will still be very much Angular Material based, but we are in the process of finetuning our customizations and building our UI library. It is tentatively for release in late 2018.
PowerHub is a leader in renewable energy asset management and is often represented at industry conferences worldwide.
Closely collaborating with the marketing team, I design banners, handouts, and other print material for event use that aligns with business needs and company branding.
Design considerations: eye-level of audience (for the copy content), average table height (to avoid copy content if the banners were placed behind tables at conferences), as well as logo placement for consistent visibility.
Design challenge: lack of stock photography meant for large scale print designs. With some research, I did find images with a 300 ppi resolution (instead of the usual 72 ppi for web) but it was near impossible to find hi-res files at banner size (33"x85").
Resolution: PowerHub mainly uses real and natural images in most settings, with some vector illustrations to highlight key points so it was very important that I avoid a fully vectorized flat background for the banners. I used hi-res photos, that while too small in size, I gently vectorized to mask their pixellation when blown up to banner proportions.
We create videos on a regular basis. We have two series that are ongoing: a feature of the month for new releases and highlights as well as a how-to tutorial for current users.
I film and edit videos such as these, using Adobe Premiere.