ux design // creating with purpose
phone_cover.png

Project: UI refresh

user interface design

phone1.png
the starting line

the starting line

When it became clear that our financial portal UI needed an overhaul, each individual on my ux team was challenged to re-imagine how the tool could look and feel.

That challenge began with these wireframes, outlining basic functionality & information to be included.

in the mood

in the mood

I began by collecting inspiration from other websites, applications & designs.

After some experimentation in each style, I decided on a primarily minimal look, with colors drawn from my bolder mood boards.

UI, refreshed

UI, refreshed

My goal was to craft a finance UI that was engaging and friendly, yet still professional.

Besides limited use of those bright colors and a rounder (but still precise) typeface, I did this by removing the rigid card structure that existed in the wireframes, maximizing whitespace and opening up the layout.

mobile first

mobile first

Designing mobile first informed the layout of the site, so that cohesive groups of information could be easily seen by the user at once.

On this screen users explore how changing different variables might affect their estimated goal success. I added the vertical gauge to help users easily reference that changing success percentage as they experiment, without having to scroll back to the previous chart and lose context.

desktop second

desktop second

I then adjusted the layout to responsively scale up to desktop.

Key design elements are consistent across devices and across other screens, including the purposeful use of color and the removal of redundant information, particularly in goal navigation.

dashboardv2.png
hover + focus + invalid, oh my!

hover + focus + invalid, oh my!

Moving forward with this new design, the focus has shifted from the big picture to the smallest details. Developing each individual element and its various states will help ensure the vision and usability of this UI are supported from the ground up.