Case Study: Transamerica

Transamerica -
Financial & Life Insurance Services

Component discovery, User research, Competitive analysis, Wireframeing, HI-Fi designs and Prototyping.

Project Overview

For this project I was tasked to design components and new user flows for Income planning page on Manage Advice side of the participant experience and complete new withdrawal page and process for Transamerica services users. The timeline for this project was 3 sprints for the Income planning and 2 sprints for the Withdrawal page. Each sprint is 3 weeks. For each task I started from discovery, competitive analisis and user research, objectives and scope, wireframing in Miro, high fidelity screens and prototyping in Figma.

Project Phases
  • Product Discovery
  • Competitive Analysis
  • User Research
  • Objectives snd scope
  • User flows
  • Wireframing and Low fidelity designs
  • High fidelity designs
  • Prototyping
  • Software Used

    • figma logo
    • ai logo
    • ps logo
    • miro logo
    • jira logo

    Define Objectives and Scope

    Started the project by clearly defining the objectives and scope of the project. What problem are we trying to solve, and what are the key features and functionalities required from the stake holders , product owners after a lot of collaboration and useful meetings.

    Insights and Pain Points:
    Questions:
    • In the budget planning categories are we adding more items for ex. (HOA, Property tax, Vision Insurance, Public transportation etc..)
    • Are we displaying the gap between Total retirement budget and Annual income goal?
    • Is the ability to revert any changes back to default percentages Item based or global for all items?
    • Are we adding an option for the user to select state of residency because of differences in taxes and expenses?

    Competitive Analysis & Research

    I performed competitive analysis and research process to understand how our competitors approach user experience design. This analysis provided insights into what works well in the industry, identifies areas for improvement, and helped me make informed decisions about the product or service's UX. Collected and documented user requirements and pain points that our product aims to address.

    Refining Budget Items and Categories

    Refining the budget items and categories is an ongoing process that requires attention and flexibility. A well-structured budget can provide the user with financial stability, help them achieve their financial objectives, and contribute to their overall financial well-being. It allows the user to gain better control over their spendings, save for the financial goals, and make informed financial decisions.

    Creating User Flows

    Created and optimized user experiences within the digital products by focusing on the user's perspective and goals, user flows helped to ensure that the design and functionality of the application align with user needs and preferences. They show the structure of the component and how users can access various content or features.

    Wireframes (Miro)

    Develop wireframes for each screen, which were simplified representations of the user interface and experience. Wireframes showed the location of buttons, navigation elements, text fields, and other essential interface component. After several iterations, I tested the wireframe flows informally with stakeholders and product owners who gave me feedback on different versions of the wireframes and green light to proceed and create high fidelity screens.

    Hi-Fi Screens

    With the findings that I have from the wireframes, the design evolved and become more refined I decided to go ahead and transition to high fidelity designs and started adding more detail to the screens according to the feedbacks that I have received. This includes refining the design, incorporating branding elements, and replacing placeholder content with real content using existing libraries and atomic design system for the visuals, colors, typography and interactive elements.

    Atomic Design System and Components

    The atomic design system that I was using was structured and systematic approach to design and development that helped me to create consistent, scalable, and maintainable user interfaces. Because components were designed and developed in isolation, they can be thoroughly tested for functionality and usability before being integrated into the final product. The build was organized in five levels, or "atoms," which can be combined to create more complex components. Starting from atoms and then molecules, organisms, templates and pages. The documentation that I made outlines the usage and behavior of each component, making it easier for team members to understand and work with the design system.

    Conclusion

    It was a challenging project to push me and my team on accelerated learning to pick up and apply the new concepts (Discovery, User Flows, Wireframeing, Atomic Design System, Customer Journey Mapping etc) of UX quickly, planning in advance to accommodate team dynamics and working as a team to complete the project.

    Designed by MSpasikj