Background
IndiVideo is software that creates data-driven, interactive, personalized videos and is the flagship software product of BlueRush. Up until 2020 the only way to use this software was to download a plugin that worked with Adobe After Effects.
Goals
Before the web platform, clients relied solely on BlueRush to create videos in After Effects and manage their videos deployment progression at every turn. There was a need to create a web platform that allowed our clients to create their own videos without needing After Effects, and furthermore to manage and distribute their videos on a self-serve basis. The platform design also needed to be responsive so that the platform worked just as well in mobile as it did in desktop.
My Role(s)
As brand designer, I created the initial set of brand guidelines for the product, including the logo, typography and colour rules and set out basic design principles.
As UX designer for the platform, I organized workshops with stakeholders which included our CTO, a team of developers and a product lead and motion designers to gather requirements and goals for each feature that was to be included. I would then create documentation covering customer journey , sitemaps, business rules and more which would inform the UI design.
As UI designer for the platform, I created a design system which was used to create initial designs and then expanded as more new features were added.
Some of the flows I worked on included:
Video creation within the platform from templates and other media
Customization of preview pages
Managing video deployment progression through draft, testing and then going live
Version control of each video
Integration with third party software (e.g. Hubspot, Brightcove)
Data file uploading and data point mapping
Sharing project access between Users
Distribution of videos via multiple channels (email, social media, webpages etc.)
Analytics design
User account management
Self-sign up onboarding process for new users
As copywriter for the platform, I created and managed copydesks for each section and feature as they were added which were then supplied to developers along with designs and other assets.
Functional specs, working with development team
I created spec documents for the development team which included User stories, flow diagrams, prototypes, interaction rules and more. These were created with input from the developers and the format of the specs evolved over time from text-based documents written in Confluence to using the Specs feature of InVision which included interactivity and more to give developers as much detail as they required.
——————————
Project lifecycle
Work on the web platform started in early 2020 and the first component went live in the fall. Work has been non-stop since and as each new feature was added, existing features were constantly being re-evaluated and updated with each release.
The Problem
Our Client, an alternative lender with products available across Canada, needed a new, clean, bright and refreshed website design, with updated content that was more relevant and consistent with their brand voice and tone.
The site needed to be responsively designed to work on all devices but definitely focussed on a mobile first approach as statistics showed that most of their customers used a mobile device to access the site and apply for one of their products.
Additionally, the application process for their site was outdated, confusing with inconsistent UI and language.
The Solution
New Technology
A new framework for the site was chosen to allow for faster load-time, better tracking and analytics leading to deeper insights as to how customers used the site which informed future updates and improvement.
Loan Application
First, the application process was assessed for pain points, then defining a new UX and journey through the application process, creating a new design system including typography scale, colour usage, form inputs (and other UI), and setting rules for UX throughout. Language was updated to be consistent with their latest brand voice.
Website
The same design system developed for the loan application process was used as a building block for the website update. A full content review took place, and recommendations were made on which pages to keep, to remove and what new pages should be created. A design language and style for the site was developed in sync with the new content.
Additionally, new tools were created to offer product recommendations to the customer based on their needs. Clear CTA's were easily available to start the application process.
Website analytics were constantly studied, indicating where improvements could be made, be it through language, UI, UX or a combination of all of the above. The new calculator/product selector went through a significant UX/UI redesign based on site analytics and instantly out-performed the initial launch version.
It was important that both the site and application felt cohesive in look and feel but also from an experience perspective so you, as a User and customer, never felt like you were being ported to other sites to complete tasks as before.
Designed for Scalability
Additionally, the design system needed to look good but also be simple enough that other branches of the business could be quickly updated in a similar style.
My Roles: Content Strategist, User Experience, Visual Design, Art Direction
Eyes Up is a consulting firm specializing in the financial sector.
They wanted an online application that would first rate the health of their clients retirement plan through a series of simple interactive questions that incorporated easy to understand research, then provide a rating result along with a personalized video that would enable the conversation on how improvements could be made.
"Retirement GuidePath" was created with these goals in mind.
The application featured:
- clean, intuitive and responsive design
- multiple interactive surveys to choose from
- a result screen, including a plan health rating and a personalized video
- data analytics
- content library management
- email creator
- flexibility to swap branding out depending on the client
- user account management
- user profile editing including a user profile photo editor
Working directly with a PM and the client, I helped to create the UX strategy and User workflows, wireframes, visual design and some copywriting.
Once the UX and site design was approved, I used a combination of Invision and Confluence and JIRA to work with the development team.
The personalized video production was done through our Montreal office.
The timeline from conceptualization, wireframe prototypes, visual design, development and testing through to going live took only 6 months.
My Roles: Content Strategist, UX, Visual Design, Copywriter
The Co-operators is a leading Canadian-owned multi-line insurer, offering auto, home, life, farm, travel and business insurance as well as investments.
They were looking for a way to offer tailored financial advice on insurance and investments, to each visitor rather than a standard brochure site, creating a personalized experience.
The financial balance site asked a few simple questions right on the homepage which brought the visitor to a results page of curated information on insurance and investment products, along with videos, articles and financial tools such as a retirement savings calculator. Each personalized results page used imagery specific to the visitors persona.
My Roles: UX, Art Direction, Design
Multimatic is an industry leader in the engineering and the manufacture of automotive components and systems. I have worked on their websites for over 4 years now, aligning their corporate and motorsports divisional websites into a cohesive brand.
My Role: Art Direction & Design
HotRun Inc. is a staffing firm specializing in the plastics industry.
Their immediate needs were:
- New, modern, responsive design
- Ability to update content without the need of a developer
- A new way to present job search on the site
- More opportunities for Candidates or Employers to contact HotRun during their time on the site
- Content audit and strategy
In talking with the client it was clear the primary concern was for a modernized, responsive site, a new look at searching for jobs or candidates and the ability to manage content on the site without a developer.
To manage the content, and not being a developer myself, I needed a simple solution that required no developing expertise. I settled on Wordpress and found a plugin to allow for visual site building while still allowing for code to be written where need be.
With that in place, I worked with the client to review their content and decide what was staying, being removed, new content and anything that needed to be re-written, and where this content was best suited in the new site structure.
The site design was started with these requirements in place with a new focus on job search. It's the first option in the main navigation and also the first interactive option on the homepage itself, connected to the main banner.
Most pages have a form the user can fill in to make contact with the site to explore opportunities.
The resources page uses FAQ style expandable accordions to tidy up lengthy content into manageable and scannable topics.
I worked with the client and their 3rd party provider, PC Recruiter, to develop a simpler and cleaner way to search for jobs, sort through options and apply for the right one. They provided some code that as easily injected into the site using Wordpress.
My Roles: UX, Art Direction, Design, Site Build in Wordpress, Copywriting
DUCA Credit Union is one of the largest in Ontario, with over 70,000 members. I have designed a number of landing page promoting various offers, this one being the Earn More Savings promotion. I wrote copy, art directed and designed the landing page, web advertising including social media advertising, newspaper print ads, direct mail pieces and DUCA’s first outdoor advertising in bus shelters.The promotion was a huge success and we revised the creative later in the year for a winter promotion.
My Roles: UX, Art Direction, Design, Copywriting
Steinbach Credit Union is based in based in Manitoba. They had an existing landing page promoting rates for savings accounts but it wasn't performing the best. The promotion was excellent, so a review of the UX and site layout was requested.
In redesigning the page, I moved the rates into the main banner area so they were immediately apparent when the page loaded on any device.
Secondly, the contact form was redesigned to be more user friendly and inviting.
Thirdly, I reduced the congestion of the original layout on the rest of the page to increase legibility and time to read.
I also created new web banner advertising layouts for them.
I worked closely with their development team to get the page designed and live in a short timeframe.
The new landing page design was success and has been re-used (with come client-led modifications) for a few different campaigns since.
My Roles: UX, Art Direction, Design, Copywriting
DUCA Credit Union is one of the largest in Ontario, with over 70,000 members. I have designed a number of landing page promoting various offers, this one being the Mortgage promotion landing page.
I created and pitched the visual concept, wrote copy, art directed and designed the landing page, web advertising including social media advertising, and outdoor advertising in bus shelters.
My Roles: UX, Art Direction, Design, Copywriting
Multimatic Motorsports is the Motorsports division of Multimatic Corporate. The first two screens are from the current site design, which was designed to mimic the Multimatic site as an extension of its brand.
The last few screens are a redesign concept of the site.
My Roles: Logo Design, Art Direction & Design
DUCA Impact Lab was created by DUCA Credit Union as a hub to research solutions to underfunded segments of the community.
I worked directly with the client to define the content strategy, wireframes and prototypes of the site.
My initial site designs helped the brand agency define the look for DUCA Impact Lab, and I worked alongside them to complete the site design as it went live.
My Roles: Content Strategist, UX, Art Direction, Design
The initial design brief was to tidy up an existing site design aimed at businesses, but I saw an opportunity to overhaul the section and drew up wireframes to show the client what we could do, which they approved. It was so successful, that we were asked to do the residential side too!
My Roles: Created Wireframes, Devised Site Usability, Art Direction & Design
I designed a website for Terian flashlights to use as a selling tool to get major retailers interested in picking them up so I designed an e-commerce style website with product information included.
My Roles: Devised Sitemap, Site Usability, Art Direction & Design
I designed this website, aimed at hockey players and other high performance athletes who don't have a lot of time on the bench to change entire skates when the blades become dull. With QuikBlade, you can simply pop out the blade on the skate and snap in a replacement.
I designed the website and also shot the skates photography.
My Roles: Art Direction & Design, Photography
This is a concept design for a friend who owns a film equipment hire business. His website and logo were in dire need of an update.
I redesigned the website, and updated the logo and pitched it to him. I was just a little too late as he had brokered a deal the week before for a new website. As it turned out, the new site design is pretty damn close to my layout.
My Roles: Logo Design, Art Direction & Design