Product Redesign Wireframes
In the summer of 2018, I was working as a Senior UI/UX Designer for DFIN. I spent two days in a brainstorming session with approximately 60 of my peers at Donnelly Financial Solutions which included the CEO, CFO, Product and UX/UI Directors, key Product Managers, Lead Engineers and Sales Leaders, and Engineering. I had been previously tasked with doing an exhaustive competitive analysis of our main competitors’ features. With this in hand, we set out to create a wish list of the features we wanted to see in a completely re-designed Active Disclosure product. The dark graphic to the right represents only one of the 13-page document that I created by organizing the brainstorming notes we took earlier and shared with our Product Redesign Team. This was to be our guide to determining what features we would include in the “Most Viable Product” and what features we would hold back for future scheduled releases.
- ROLE
- UI/UX Designer
- TOOLS
- Adobe Illustrator
- Adobe XD
- Microsoft Office
- TIMELINE
- Requirements Gathering | 3 weeks
- Outlining & Organizing | 1 weeks
- Wireframing | Ongoing
Organizing Data
The data gathered during our group break-out session was supplied to me in the form of copious amounts of notes gathered in the form of a PowerPoint slide deck. I edited and reorganized the data content to produce a multi-page Word document broken down into organized content sections. This gave me a starting point to arrange content sections (essentially product features) into a large visual map of the product and all of its features (shown in figure 1.0 above).
User Flow Diagrams & Wireframes
The Account Creation feature is just a small part of the overall product design but it’s a critical step in establishing the User Experience. Here I show the steps in the user flow to accomplish this task. I used Adobe XD and a custom pattern library to allow me to rapidly generate ideas. I’m careful to ensure that I design snack bars to give the user a sense of contextual awareness, and task success.
I also take the opportunity to create mobile versions of the Account Creation wireframes at the same time. User Flow Diagrams like this are a low-effort solution for describing a process or simply getting an idea across.
Trusted by
