Client: Genivity
Duration: 3 weeks
Role: UI/UX designer
Platform: Responsive website
Tools: Sketch, Principle, InVision
Deliverables: Style tiles, high-fidelity screens, prototype, UI kit, style guide.
Client: Genivity
Duration: 3 weeks
Role: UI/UX designer
Platform: Responsive website
Tools: Sketch, Principle, InVision
Deliverables: Style tiles, high-fidelity screens, prototype, UI kit, style guide.
Visual competitive analysis
Design principle
Wireframe evaluation
Mockups building
Testing & iterating
Interactive Prototype
UI kit
Style Guide
Genivity is a platform providing financial advisors with the ability to account for healthcare costs based on individual risk factors and other personalized information (i.e., state of retirement, retirement age, family longevity, etc.) when planning for their client’s financial future.
HALO (Health Analysis & Longevity Optimizer), the first product from Genivity, entails a healthcare cost assessment and a content-heavy report. After taking the assessment, where a client walks through approximately 13 questions related to their health, habits, and family history, a HALO report goes into detail about the cost of healthcare that will be generated.
Current HALO report
Interested in providing clients a more robust experience from the time they take the assessment to the time they review the report with their financial advisor, Genivity came to Designation for a prior UX engagement. That team helped them work out a set of comprehensive wireframes focusing on promoting conversation between clients and financial advisors. They now desired to see how our UI team could visualize the information on the HALO report and how the user engagement would be improved by incorporating microinteractions. As a team of three UI/UX designers, Bejoy, Vivianne and myself, we collaborated on competitive research, wireframe evaluation, and user testing, and individually created unique visual designs and each delivered final designs in the form of high-fidelity mockups, a prototype, and a style guide.
At the kickoff meeting, we learned that the Chief Technology Manager-Heesh Naim and the Product Manager-Ashley Flitter, were thrilled with bright, recognizable, informative interfaces which had good readability and visualized data. They hoped the redesign of the HALO report would improve its credibility, readability, digestibility, and be intuitive enough to inspire users to continue actions with their financial advisors.
The HALO team mentioned several times about wanting their report to be “printable” during the meeting. Currently it was produced as HTML file that then converted to a PDF when opened. On one hand, they wanted the HALO report to be reviewed and interacted online. On the other hand, they didn’t want to lose the ability to be printed, so that financial advisors could use it as a takeaway on hand when presenting to their clients.
The report audience was financial advisors/firms that serve the upper-middle class and the affluent. Generally, clients were well-established adults within the 45-70 age range. Attracting senior audience was deemed as crucial for HALO report.
Overall, the core challenges were providing a seamless experience for the advisor and their well-established clients with enough context and digestible data, promoting trust, and encouraging users to take actions with their financial plan.
With these insights, our team started visual research of direct and indirect competitors in the financial sector. We wanted to gain a better understanding of how other financial brands visually communicate their values to users and look for takeaways to help HALO stand out among the market.
We researched and synthesized nine brands. They were Turbotax, Mint, Oscar, Airtable, Northwestern Mutual, Riskalyze, Asana, Grow and Acorns. It was apparent to discover that they successfully targeted their audience by using friendly but professional design languages and appealed and engaged them with organized and visualized data information as well as microinteractions.
FRIENDLY & PROFESSIONAL. Competitors were using illustrations to convey the feeling of friendly while choosing high-quality photographs to build trust with users. We hoped our design should also delivery a professional and trusting aesthetic that invite users to act on their assessment.
ORGANIZED INFORMATION & DATA VISUALIZATION. Competitors were using graphs, icons, diagrams instead of heavy text content to present users with digestible information. We would focus on data visualization and helping user easily traverse through the conversation surrounding their future healthcare costs.
APPEAL TO THE TARGET AUDIENCE. Competitors introduced a generous use of negative space and sans serif fonts to increase the visibility and readability. Our target audience was mainly people in their late 40s and above. They demanded the good size typography for readability, negative space and color contrast for optimal visibility.
ENGAGING EXPERIENCE. The competitors widely incorporated microinteractions. They attracted users' attention and optimized their engagement. Therefore, our team aimed to provide an interactive experience that catered to our audience and prompted them to engage with the HALO report.
I was extremely excited about making meaningful data visualization and began to ideate how the HALO report could convey accurate and digestible visual messages and benefit users with a more intuitive interface. Both the HALO team and competitors focus on incorporating microinteractions into the platform also captured my interest as I was always keen to make a vivid interface to contribute users’ experience.
The first client meeting and visual competitor analysis clarified our visual direction. We listed out the adjectives that the HALO team was looking for and distilled all the learnings into three design principles that governed our decisions when choosing design languages.
We brainstormed and dig out core features of the HALO brand
Our design should invite people to use the platform and trust the information. By using a neutral palette, the HALO report should establish a relaxing, friendly, trustworthy, and professional interface.
Since our audience were well-established adults and in their late 40s and above, our design should allow people to focus on the important conversation centered around their financial future. The design approaches included a good usage of hierarchy and scale.
Our users should be able to digest information with ease and confidence. The HALO report contained an overwhelming amount of information, our design shall break down the information and present them in bite-size pieces through the use of spacing and data visualization.
These principles were in close alignment with the HALO brand value and tied to its goal. They also responded to the challenges we captured during the kickoff meeting. The HALO team approved the design principles satisfactorily. We started design exploration individually with confidence based on these design principles and developed style tiles as a communication tool instead of directly diving into interface design.
Blue represents trust, sincerity, reliability, and intelligence, and it was popular among financial brands. In my first exploration, I chose blue as the primary color, combining light purple to highlight important information. Flat icons were introduced to create a friendly looking and replaced heavy text by delivering the same information. I also leveraged graphs and diagrams to aid the user’s reading efficiency visually and simplified the user’s digest process.
Ashley attended the second client meeting along with Heather, Genivity’s CEO. She wasn’t a fan of blue and thought it was too cold, lacking personality and overused by too many famous brands like Facebook and Chase. She suggested to explore more light colors instead of dark blue. On the other hand, she did enjoy seeing the clear and organized layout and data visualization.
For my second exploration, I decided to use a warm color palette and applied many gradients to convey users a feeling of friendly, inviting, and pleasant. Heather liked the warm color but mentioned there was a difficulty in focusing as too many colors were introduced. Also, she didn’t prefer to see photographs with real people in the HALO report since that was too specific. Instead, infographics and illustrations would be excellent tools to present information. Again she liked the infographics as facilitators helping legibility and digesting large amounts of information.
My third exploration was a combination of the first two, showing both professional and friendly by using soft color and high-resolution photography which included images of smiling people. The color palette consisted of two distinct hues, purple were primary usage, emphasizing the professional. I used pink to call attention to precise elements. Heather didn’t like the color combination, as it was too soft and feminine to her. However, she did appreciate the generous use of negative space and the modular design in which she could anticipate the microinteractions.
Heather wanted our design to push traditional ideas of financial aesthetic and explore a more unconventional approach. None of my style tiles hit her target, but her detailed feedback gave us a better idea of the style elements that they envisioned for the HALO report. They liked the lineal style icons from Bejoy’s exploration, the three-dimensional graph from Vivianne’s style tile, and the data visualization from mine. I had a solid foundation from which to move forward.
During the kickoff meeting, the HALO team expressed their satisfaction with the wireframes developed by the previous UX team, so that we could solely focus on the visual design. I stuck to the current wireframes and started translating the first three screens.
I did a lot of internal iterations before the desirability testing and third client meeting to figure out a perfect color combination by avoiding blue and femininity. I also gently rearranged the layout for the landing page based on the wireframe to allow the CTA button show up without scrolling and enhance the visual and reading fluency.
I realized my audience much more appreciated the color combination of the last option. Thus, I tested the last one during the first round user testing-desirability testing.
The goal of desirability testing was to understand if our designs had addressed the core functionality and stayed true to our design principles. We tested with five users, three of whom were financial advisors, and one was a self-titled senior who was the HALO report’s target audience, and one graphic designer. All participants were booked by our client and tested remotely. The tests were conducted individually and each designer of our team conducted an interview with at least one of the users. Our guiding questions were all centered on the design principles, which would help us to understand if our designs were in line with them, as well as their trustworthiness, readability, and legibility.
User feedback was insightful and validated some of my design decisions. All users were excited about the bright colors and encouraged to continue reading after seeing the first screen. Besides color, I also collected a lot of valuable feedback about UI elements, layout, and negative space usage. The progress bar on top of each screen contributed to a better navigation; the visual hierarchy was well constructed by using negative space, the iconography was informational and easy to understand, the CTA buttons were intuitive.
It was worth mentioning, though we directed the users to focus on the visual aspect of the design during the testing, their quality of interacting with the screen was determined a lot by UX experience. I saw this as an exciting UX challenge and opportunity and took the feedback relating to UX seriously into consideration in my afterward iterations.
In the final client meeting, the HALO team was pleased with the visual aesthetics of my design. They enjoyed the color palette, linear iconography, sans serif typography, general use of negative space and the self-explaining infographics. They also raised some concerns relating to UX. To help the HALO report better implement my design I continued iterating and incorporated microinteractions by leveraging Principle, which further prompted user engagement in my final design.
I delivered a style guide and a UI kit to the HALO team to help future designers and developers to build off the brand for other platforms and deliverables. In addition, two sample pages of the HALO assessment were redesigned as a complement to the HALO team to help them better understand how the design could be implemented throughout its current website.
At the end of the project, we wrapped up two future considerations which were both desired by users and Genivity that were out of our time frame.
Responsive mobile design
During user testing, some of them attempted to open the prototype by smartphone. Offering an experience tailored to mobile devices where text was readable without zoom, adequate space was reserved for tap targets, and no horizontal scrolling was required.
Printable report
There was always a desire for print. Although we designed an interactive digital HALO report for Genivitiy by taking the “printable” into account, paper and screen were still two different media with different design theory. How to present the information on paper, which would only be shown up by clicking and hover in the interactive report, might be considered by Genivity.
Promoting both responsive and print designs would ensure users have the best experience when going through the report and the most consistent. Allowing users always seeing the most essential information would attract their attention, optimize their engagement, and finally encourage their action to on the HALO report.
This was my first client project at Designation as a UI/UX designer. I realized that talking about the design process thoroughly to convince the client of my design decisions was as important as presenting a comprehensive design. Via four client meetings and help from my design director and teammates, I was able to improve my storytelling skill and gained more confidence to “sell” my design.
The ability to design with infographics and visualize data was the most valuable self-development I pursued during the project. By being absorbed by the content of IBM design language-data visualization, I was able to create meaningful infographics and also realized that I was interested in data visualization. It was an area I hoped to focus on later projects.
My initial role was UI designer, but I also wore the hat of a UX designer. By conducting user testing and competitor analysis, evaluating existing wireframes and visualizing data and information I learned that delightful user experience could only be achieved by taking both UI and UX into consideration.
