a wealth of knowledge in a web app

Client:  Standard Life       Project Date:  2015
About the Project
Standard Life Canada wanted to improve the way their financial advisers conduct sales pitches.  Historically, advisors shared new Standard Life product information by showing powerpoint presentations. This approach was cumbersome as it involved opening and closing many different presentations throughout the same meeting.  A lot of these presentations were outdated, and the process to update them and distribute them was time consuming. Our challenge was two fold.  First, to organize the content, and make it interesting and digestible for use on a tablet.  Second, to create a content presentation app that would replace powerpoint as the advisor’s go-to sales pitch tool.
My Role
UX / UI / WIREFRAMING / ART DIRECTION
I helped organize the content with copywriters and business analysts at both Bluerush and Standard Life.  I worked as the senior UX/UI designer for project.  I worked on the main work flows, structure and functionality of the app, and I transformed these ideas into clickable wireframes for the client. Lastly, I also worked with the studio team at Standard Life to create the main design elements and apply the Standard Life brand to the project.
About the Project

Standard Life Canada wanted to improve the way their financial advisers conduct sales pitches.  Historically, advisors shared new Standard Life product information by showing powerpoint presentations. This approach was cumbersome as it involved opening and closing many different presentations throughout the same meeting.  A lot of these presentations were outdated, and the process to update them and distribute them was time consuming. Our challenge was two fold. First, to organize the content, and make it interesting and digestible for use on a tablet. Second, to create a content presentation app that would replace powerpoint as the advisor’s go-to sales pitch tool.

My Role

UX / UI / WIREFRAMING / ART DIRECTION   
I helped organize the content with copywriters and business analysts at both Bluerush and Standard Life. I worked as the senior UX/UI designer for project. I worked on the main work flows, structure and functionality of the app, and I transformed these ideas into clickable wireframes for the client. Lastly, I also worked with the studio team at Standard Life to create the main design elements and apply the Standard Life brand to the project.

always start with sketches

Below are some early sketches working through how the app’s main navigation would function.  There are two main modes of use in the app - presentation mode and pre-select mode (where the advisor would set up his presentation).  Both of these workflows had to be simply structured so that an advisor (who’s used to powerpoint) could use it with ease. 

The app was to have dedicated sections featuring content that reinforced specific financial ideas (investing in global markets, etc).  To navigate, the advisor would simply swipe through each screen. As the project moved along, the client wanted to incorporate more and more levels of content (text, graphs, visuals). The sections had to be interactive and have the ability to show a lot of content, but also easy to navigate.

It was a challenge staying focused on keeping the workflow easy for the user, while simultaneously rethinking how to intuitively display multi levels of content. 

next up – wireframes

The next step was to create click through wireframes so the client could understand the navigation, work flow and how the content was to be layed out and accessed. 

 The client team we worked with wasn’t used to building products for mobile so it was extremely helpful for them to be able to click through the screens as a normal user would and see how different elements react.

 The content and client needs were constantly changing, so I needed to use a tool that I could iterate quickly in.  I created my wireframes in Adobe Indesign, and linked the screens together using Invision. We created the wireframes with notes on the right side to explain complex functionality and so the client had an offline record of the app’s interactivity.

We tried to create some basic design “templates” that all of the content could structure into.

beginning a presentation

To start, the user would either open an existing session, or create a new one by selecting screens from the Chapters panel

To navigate from slide to slide, the user would swipe the screen left or right like a magazine page.
The user could also re-open the CHAPTERS tab to jump to a screen not in sequential order.

Individual funds were housed under the Products tab. The advisor could view the fundsor add them to their session just like chapters. Tapping on a product would open its detailed view (below)

There were multiple interactive elements on each screen, allowing the advisor to delve deeper into the information if the meeting called for it.

Overlay panels for talking points, saved documents, tools and help were always accessible

the final product

Finally, here are some screenshots of the app’s final design on the Windows Tablet. Standard Life didn’t have a brand guideline that was mobile or tablet specific , so it was a challenge at times to apply their current web standard guidelines to a touch interface.  I led a team of Standard Life designers to complete the designs.

related works

Want to see more?  Let’s go back to my  Portfolio