// INTERACTIVE DESIGN //
Interactive thought piece that looks into younger (Gen Y) and older generations (Gen X, Boomer and Silent) and how their banking behaviors have looked during COVID and some indicators of what will be like after.
Overall Objective: Create a piece of content that leveraged some data we collected previously from 2019 for an in-person event and repurpose this into an interactive piece around generational lending with a focus on COVID.
Role: Visual Designer, UX/UI designer
- Led conversations around design to art director, copywriters and stakeholders (B2B marketing team)
- Built and presented piece from conception / lo-fidelity and hi-fidelity wireframes to final piece.
- continued to maintain and make revisions alongside copywriter
view live site here:
Research and sketches:
Initially, we wanted to repurpose some data we had from 2019 for an in-person event that got canceled due to COVID. A lot of that data was centered around the profiles of different generations so my initial sketch had the generational data and the personas/personal data separated.
After some discussion with the team, we pivoted the design to be more focused on the generational stats and less on the persona/profile of the individual.
There was still plenty of data around specific individuals from each generation that we were able to repurpose so we included another profile that gives more color to each generation.
Design decisions / visual identity:
The characters of this piece were meant to stay consistent with one of Kasasa's blog pieces on generations that featured some illustrations created by another designer:
This blog generates tons of organic traffic - we wanted to capitalize on this and create more content that would stay consistent with the visuals across all our pieces that discussed the same topics.
This piece used some of Kasasa's new branding / brand colors.
Color-coded tabs to indicate which group is being featured.
Personal data is split to the left of the tab group, a second profile can be revealed when clicking on the "profile #2" card.
After learning a percentage of the site traffic coming to our content exchange site was from mobile users we began creating content for both mobile and desktop.
View mobile preview
Key Takeaways / User Analysis
Users were more likely to bounce between tabs at the top of the navigation regardless of if the buttons were greyed out to appear "disabled" vs. navigating back to the main screen via the close button and selecting from the default button states as shown in Fig 1.1 and 1.2
Additionally, it appears that users prefer seeing all the options in the navigation upfront.
Users on desktop navigated to the "Millennials" tab the most overall - however, on mobile, the "Millenials" information was hidden as the third profile requiring users to shuffle through "Boomers" and "Gen X" until finally landing on that information - user engagement dropped significantly on mobile after the first interaction as shown in Fig 2.1 and 2.2
This also led to less overall engagement with interaction clicks decreasing by 77% and time spent decreasing by an average of 1m30s on mobile overall as shown in Fig 2.3 and 2.4
Fig 1.1 Default button states
Fig 1.2 Disabled button states with only active button colored.
Fig 2.1 Desktop Stats (click to enlarge)
Fig 2.3 Desktop Stats (click to enlarge)
Fig 2.2 Mobile Stats (click to enlarge)
Fig 2.4 Mobile Stats (click to enlarge)
view live site here: https://www.kasasa.com/exchange/how-each-generation-handles-their-finances
User review on how our content is being used.
*Name omitted for privacy