"Esri Redistricting is a Web-based solution for state and local governments, legislators, and advocacy groups to create political and geographic redistricting plans." The app is hosted by Esri and delivered as software-as-a-service through annual subscriptions (30 days free trial available).
Mockups in MS PowerPoint
First of all I want to mention that the project became a success only for the dedicated and hard work of so many talented people, my part was really only the literal drop on a hot stone.
Very early on I had the feeling that this project would benefit from higher graphical fidelity (maps, charts, colors were important) so I decided to use Microsoft PowerPoint to communicate the designs. Using my wireframe stencils to draw the UI elements we iterated through multiple versions and approaches.
Main Lesson: Use slide master layout as background
My biggest lesson was the need to create a new layout to the Slide Master which would serve as the background. This layout included the banner (logo, user information), the menu (ribbon) and the map area.
- Changes propagated to all slides (e.g. modify a label)
- Easy manipulation of elements on top of static background
- Remove source of errors (forgot to update a slide)
- Cleaner in general 😉
The last couple of weeks were pretty busy for me. We were trying to design an application that has potential to grow beyond national importance and get high visibility. Needless to say expectations are high. Time constraints aside, my focus was to extract the goal of the application and streamline the user experience, do I sound like a marketing person yet?
In order to get quick and accurate feedback from our client I wanted to create visuals as early as possible. That's when Microsoft Powerpoint came in handy. I created wireframe mockups and iterated through the slides via video conference which turned out to be not only useful but essential to the mutual understanding. The client was able to adjust their process, our project managers increased their knowledge about the domain and our developers identified potential issues with integrating our mapping software.
During the process of designing the wireframes I created my own set of Powerpoint stencils that covers all common interface elements as well as a set of small icons.
Just recently I started to redesign www.actress.at, the website of my sister who is an actress currently located in Berlin, Germany.
What better opportunity than this to put the wireframe stencils into work. After talking with her for some time over the phone I got a good sense of what her vision is based on the needs of job. Together with some photos from her agency and videos from youtube I created the following three mockups:
Next Step: XHMTL Prototype
Following the wireframes exercise we created a color palette and implemented an XHTML prototype which roughly took us 3 days. Screen snapshots fed another set of Powerpoint slides for the big demo and will eventually go into the design doc as well. So far, so good.
Help me to improve the stencils
I really hope the wireframe stencils will be helpful for your work (as they made my life easier). I am interested in your opinion. What is missing? What can be improved? Send me your suggestions, ideas, updates 🙂