Design
Design
I was brought onto the NerdWallet App team as a visual UI designer in February 2016 (splitting my time between this and a full stack product designer on the editorial pod during that time). I transitioned full time to the App pod in June 2016. There was one other designer on that pod, a UX designer.
When I joined in February, the team had been working with Beta users and a basic build which you see in the first image.
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 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.