(with Solution Set)
This project for American Express was the creation of a sales “Partner Portal” site. This project was particularly satisfying because it incorporated many dimensions of the Interaction Design documentation.
I started with breaking up the user stories into a Functional Distribution diagram. This provided an illustrated view of the requirements, the components that each requirement touched, and the relationships between it all.
From here, I created simple definitions of the different user types that might use the system as Personas.
I then created Process Flows for each of the primary use cases, so I could visualize the connection points between the potential pages, and understand the primary tools necessary in each of these steps.
The Process Flows provided a page inventory, which then led me to illustrate the relationship between the pages in a Site Map.
I then created wireframes for each page, defining the interactions, and possible alternate states of the various elements.
Finally, I defined the way the page elements collapse at different display-width breakpoints, so the page layout and user experience was optimized for both the mobile well as the desktop environments.