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 Two: Define The Users Roles
After going through the interview process, I understood what the client wanted the system to do and how they wanted it to perform. Before I started mapping out a userflow, I needed to understood how many types of users there would actually be and HOW they would interact with the system. So, in order to do this, I simply defined how the site would acquire it’s users and categorized them all. In this case, there were front end users and back end users. The simple categorization ended there. Once I dug down from there, we started to define the roles and nuances of each user.
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.
Step Seven: Beta Testing and Launch
Once my developers can provide me with a testing link, I usually scrub through the site thoroughly and make sure everything is working as planned. I use the site as all the different users and make sure that all the specified features and links are working for me and that there are no dead links or bugs. Once my quality control is complete, I can verify everything looks good and send it off to the client for their approval. I always encourage the client to test the same way and encourage bringing up all issues and errors. Once they give their blessing, I can then launch the site successfully.
The process to create a site, or in this case online application, is long and tedious. Yet, the majority of time is not spent on design, but rather strategy, definition and planning. These are the key elements to design and develop a solid user experience. With Andiamo! Group, we saw an immediate adoption of the system since we had gone from a very outdated system to a nice feature-rich design with many more offerings. Needless to say, the client was very happy and we achieved the project’s goal which we had defined from the onset.
“We hired Marwan to rebuild our entire website from scratch. 100+ web pages later, he delivered an outstanding product with great professional attention, quick turnaround and differentiating creativity. He translated our jumbled ideas into an artful, streamlined web marketing brand that is serving us phenomenally. His ability to create a SaaS product to help us capture our candidate and client details was technology turning-point for our firm. He was always available to help when we needed anything and he explained everything in detail so that we could manipulate our website and continue to grow it as the business grew. We also asked him to create a logo and business cards that could speak to the important values of our company which he did, exceeding our expectations. His skills as a designer are exemplary, and his work ethic is beyond reproach.”Mark Gambirasi