A few weeks ago we started our mini series on our redesign process for HotGloo 3.0. Last post was all about the research phase (Part2), followed by developing a strategy and coming up with a site structure laid out in a site map. Part3 is now all about wireframing.
Step6: The Wireframe Process
After breaking down the structure for the whole website in a site map we started to wireframe the new site. We agreed on splitting the process into two big chunks: the actual website and the account panel. Two complete different yet overlapping parts of HotGloo 3.0.
Marketing Site
The marketing site is the actual website communicating the application. Since we asked ourselves questions a visitor could ask of the website beforehand and clustered them into different interest areas, we had quite a vague picture of the page structure in our head. It was really important for us to introduce the editor in a very prominent way on the new landing page. The first time visitor should be able to understand what we are offering and how the offer looks like within a couple of seconds. He should also be able to get in touch really easy and find all the relevant informations clustered in areas.
The whole structure for the new site was divided by different interest areas. I’ve illustrated this step by highlighting the different interest areas we are using on the new landing page:
- Navigation
- Experience
- Call to Action
- Information
- Opinion
Account Panel
The account panel was a big challenge. We wanted to improve the over all user experience by developing a completely new panel, providing a better overview and an easy way to sort and group projects and people. We came up with the idea of designing a “Dashboard” including the “Activity Radar”. The activity radar is displaying all project relevant informations in a hierarchical order starting with the latest activity. We have different informations packed into the activity radar such as: Who opened a project and when did they open it? Who created the project and when? Who sent a note? When did they send it? What did they send? The ability to access a certain note with one click and much more.
Since account panels always differ regarding the current user state, we designed the whole account panel in an interactive approach. We laid out different user states for Owners, Reviewers, Editors – giving us the ability to testdrive the whole functionality of the new account panel, plus it helped us a lot to keep an overview of error and help messages, we needed to add and also to iterate on various account functions, like changing the account url, user information, up/downgrade functions etc.
Finally we exported the whole project to pdf and did a manual walkthrough to find out if we were missing some really important informations.
The benefits we experienced from wireframing the complete website upfront were:
- Getting a feeling of how the new site is going to behave.
- Working in teams and delivering feedback whilst the project is evolving helps to define things upfront where they can be changed quickly.
- Working on the copy upfront and experience how it behaves and how it differs depending on where you actually put it on the site.
- The wireframe can be used during the whole project workflow and function as a reference model when you need to explore something in detail or need to sign off something.
- Iterations during the concept phase saves a lot of time and money, because you can quickly update the wireframe and don’t need to change the code nor wreck up the design.
- Communicating clear and precise specifications to the designers.
- Helpful for the coding process afterwards because the user states were already defined, error messages and help messages in place plus the note function works like a charm if there are still questions about certain pages. You will exactly know what the person on the other end is referring to and can respond very easy.
Blogpost I released today over at the HotGloo Blog. Illustrates the wireframing workflow we've gone through when redesigning our app.
