"My Profile" Wires

The business goal of this project was for the eventual final design to streamline their profile management flows that were in a state of disarray. There were dozens of different ways to change an address across their multiple different products, for example. Also, each product had it's own unique needs, so the final solution needed to have great enough flexibility to grow (and shrink) to the needs of each branch. And of course, the experience needed to work across the entire spectrum of devices. Working with hi-fidelity wireframes from start to finish, the end product left the stakeholders pretty satisfied!


THE PROCESS
Divider Icon Image
DAY 1 - WORKSHOP SKETCHING

The project was kicked-off with a day-long workshop with the client. We sorted through business needs and prioritized lists of features. What evolved out of it all were tons of sketches harboring tons of lovely ideas. The sketch you see here was one of the later ones I created that lead into the design phase.


EARLY WIREFRAMES

With this early concept, the goal was to really nail down a layout that would flow easily to mobile devices (use of small columns easily stack). Another crucial goal was to figure out a pattern for editing info that would be as streamlined as possible and provide a comparable experience on all devices.


FINAL WIREFRAMES

From initial wires to final wires, a few things changed. Chunks of information got grouped into categories to create better hierarchy and make information easier to find. Also, the navigation changed from tabs to a left side nav. The navigation change was primarily due to the fact that the tab nav element we were using for navigation at first didn't translate very well to mobile and we felt that it didn't make for the best experience. Such is life! Adapt and pivot!


INTERACTION

This animation shows the ultimate vision for the streamlined info editing pattern that was a goal from the onset of the design phase. I did my best to speak to it during design reviews, but sometimes words just can't convey what a quick animation can! I had a few extra hours left over before the final deadline and decided to whip this animation up in order to really drive home the interaction we were pushing for.

This mobile interaction experience was also a big reason we decided to have an edit option next to each bit of information rather than one edit button that shifted the entire page to edit mode. That would've made for a mighty lengthy page on mobile—and not the best experience, in our humble opinion.