The first visual design needed was for the styes of the elements in conversation.
I first experimented with speech bubble types/shapes and avatar styles and placement.
Next, I applied different color variations, Being that dark text on light background is most legible, it made the most sense for the advisors’ bubbles to be of this color variation and the users’ to be white text on color.
I applied the color variations to different variations of the avatars and speech bubbles.
Then I turned my attention to timestamps and text size.
A special message type that had already existed in the beta were “action plans” where an advisor assigns the user actionable steps to reach goals. I tried to visually separate these messages from the rest of the conversation flow.
Another experimentation in color, shape, and placement for actionable buttons that would appear when a binary answer was needed from the user.
This is what we shipped in April 2016 and remained constant in the build until the app was retired.
The Mobile UI Kit
The UI ket is where I was taking the visual language and style at the point of September 2016, when the product graduated from beta and launched in the Apple App Store. This reflects both features that were currently in the build and ones that we were aspiring to add and update.
This was NerdWallet's first mobile UI kit.