UI Evolution: Andiamo! Group

Websites have become very sophisticated platforms in the last several years. We’ve gone from simple html pages, to blogs, to database driven sites with mobile companions, to web applications, to all-in-one responsive sites. I like to explain to my clients that a website really doesn’t do anything for your business unless you plan on putting the time and effort into marketing it properly. I generally explain to my clients that a website is simply just another tool in your marketing tool box. If you neglect your tool, it becomes ineffective and forgotten.

When I first met with Andiamo! Group, they were looking to completely redesign their entire website. What they hadn’t realized is that what they were looking for was a whole different animal; an online web application, known as Software as a Service (SaaS). This undertaking was quite a large step to move from a simple HTML site to a complex database driven site with multiple input/output components. Andiamo! Group was essentially looking to build an online application which would also serve as their website.

Step One: Setting Goals

In any project, you will always need to start with goals. Setting proper goals will always be your gauge for knowing if you are headed in the correct direction, if your actions and efforts are on track, if you are working on the correct solution, etc. So, I will always take the time to interview the client and follow that up with a questionnaire just to follow up with a written statement which gets signed off on. This will be the project’s goal, and ultimately, the gauge for which the success of the project will be measured against.

Step Three: User Flow

Once I had all the user’s roles defined and the general idea of what was needed out of the system, I then needed to map out how both the front end and backend of the system needed to work. At this point, we are starting from scratch, so there is no system in place for us to base our ideas off of. We are defining roles and interactions from a blank slate.

Step Four: Process Map

Now that I got the user flow signed off on, we were getting that much closer to defining how the system was supposed to operate and what user actions would be taking place. But this definition would only be good enough to tell me which screens I needed to design, on the surface. This would include sign in screens, error pages, admin screens, content pages, etc. I still haven’t defined how the nuts and bolts of the application portion of this site was going to work and what it was going to achieve. So, I needed to map that out, and define any further interaction and screens needed. This is what the process map was for. This was a document which was the blueprint for the operation of this application and how it was going to tie in all the components for the interaction of the user roles. I believe this was the longest part of the process in that we went through several iterations before finalizing all details and interactions.

Step Five: Wireframes

Behind all successful websites are really well-planned wireframes. This means meticulous planning of the general areas of content distribution, page structure, organization and page layout. This process gives the client a really good understanding of how the pages content will be planned and designed before you spend countless hours on “designing” the look and feel of the site. With wireframes, I can quickly determine which pages will need templates, what are consistent elements needed throughout the site, which pages may been missed throughout the previous steps, and general content flow. The plus is that the client starts prepping content for the launch of the site. The plus for me, as a designer, I can start to forecast what I want the design to look like. The end result is a rough website designed in black and white with boxes and text.

Step Six: Screen Design

For a project of this size and this complex, the “design” seems to be the funnest and easiest part. This is also the part of the project which seems to move the quickest. Again, because I have worked so intimately with the client on what they want and expect out of the project, I usually don’t work past the first round or two for design before getting the look and feel approved. Once it is approved, I apply the same look and feel to all of the wireframes built out and designed for the project. Again, I am now going back to the wireframes and using those as my blueprint, or guide, for laying out and designing all of the graphics. Once I produce the templates, I get them signed off by my client and prepare my files for coding and development.