Personalized Profiling Experience

Financial Planning Tool

Case study: Process work

Working in an agile environment, I had ownership of the end to end experience of the profiling / on-boarding function for a digital financial planning tool; seeing it through concepting, planning, testing, refinement, and into production with the support and collaboration of a talented team of experts. I worked directly with a design director, design lead, researchers, copywriters, and developers as well as business partners and other stakeholders.

The profiling experience walks you through a series of questions to simulate a natural conversation between a user and a financial planner to collect personal information needed for the tool to operate and return value to the user.

Role: Lead designer of onboarding experience for this product. Responsible for all aspects of UX and UI; planning, information architecture, wireframes, prototypes, overseeing copy and research, visual design, creating specifications, delivering assets, and performing design review of coded product
Tools: Sketch, InVision, Jira
Design Process :   Discovery   |   Exploration  |  Detailed Design  |  Supporting Development
 

 
Responsive-Hero-R.png

Discovery

Objectives and Design Principles:

Tailor the experience to our target user, developed and backed by research
Simplify a complicated process, strip it of jargon
Ask as few questions as possible and focus on one simple task at a time
Only ask questions in a way that users knows how to answer and provide guidance along the way

 

Personal-info-collage.png
 

Planning and Strategy

 

At the onset of the project I contributed to early vision work to help our business partners realize the product concept. I lead discussions and asked big questions to help define specifications and requirements for features and functionality. I also added my voice to strategy sessions that involved white-boarding and brainstorming with business partners, my design director and design lead, and other stakeholders. 

 
 
whiteboard-1.png
 
 

Exploration

Information Architecture and Wireframing   

During this phase, I did extensive work with information architecture, helping to inform the order in which we ask questions to best simulate a human conversation. This helped to improve the narrative and better orient the users. When laying the foundation I was focused on holistic problem solving, considering different scenarios, types of users, and edge cases. I created visuals to demonstrate concepts, diagramming and mapping out  various user flows. 

 
 
 

Wireframing

Once we had defined a structure as a team, I would start doing design research and exploration in that area, collecting references and creating fast visuals to test and present concepts. This involved a great deal of iteration.  We used an existing library of components wherever possible in an effort to promote brand alignment and re-use to increase the speed and ease of development.

 
interation--ef-collage.png
 
Screen Shot 2018-03-18 at 4.41.32 PM.png
 

Partnering with Research

We strived to base all of our work on a bedrock of research and data. This included designing for a target user defined by user research, 'Suzie'. I collaborated with the research team to help form studies to test hypotheses. This also involved helping to develop learning agendas and supplying prototypes or visuals to test. When research was completed I would work together with my team to assess the findings and developing informed solutions.

 
Greg-small-final.png
 

Prototyping

I was responsible for creating and maintaining interactive prototypes using InVision. This helped to test proof of concept and demo the work.  I also worked with a front end developer to create an HTML prototype of the experience which was used for testing, demos, and lab studies

 
suzie-photo-round.png
 

Developing tone

I worked closely with a dedicated copywriter to develop a tone that is familiar and friendly to appeal to our target audience. It was important for us to reach the right balance of comfort and trustworthiness to convey that they are in the competent hands of a knowledge rep brand they recognize, and that there is nothing to be afraid of when it comes to planning for their future.

 
 

Final Designs

Visual Design, Brand Alignment, and Presentation

Once we landed on a solution for a flow or individual feature, I would start the process of finalizing the designs. During this time I would work on visual design, lead review meetings with my design team, and get sign off from business partners. Last minute changes in requirements and scope demanded flexibility and attention to detail. In addition to working with my own team, I also met with other designers across different areas of Fidelity to maintain brand alignment. I was often presenting my work to large groups that included business partners and stakeholders.

 
 
 
goal-focus-page.png
Goal-Selecion-ipad.gif
 

Production

fandf-collage.png
 

Specs and Design Reviews

It was my responsibility to see my designs through development and into production. To prepare, I would use templates to create light specs. I would also provide visual aids to represent all use cases including conditional logic, rules, and requirements. I would deliver these with a prototype for reference and any necessary assets. I would also lead a demonstration with the development team to help them understand the requirements and functionality. When coded work was ready, I would review and send notes and host working sessions with front end developers to resolve any inconsistencies with the design. A keen eye and attention to details was key during this stage. I was vigilant about tracking problems through their resolution.

spec.png
 
photomockup-ipad.jpg