In the early phases of converting the design from pictures into a working website HoC told me that they wanted a mobile site as well but had not designed one yet. It wasn't long until I agreed to design and create a mobile version of the site for them.
The main task that I had to tackle was creating a design that complemented their existing design but on a much smaller scale, the design also needed to enhance user experience for mobile viewers. The colour scheme and image assests were the features that were to remain constant.
I began initially by drawing up some low-fidelity layouts to grasp a hold on the order of content. After a design that I liked emerged I began low detailed prototyping, taking into consideration the existing colour scheme and image assests.
Some deisgn decisions that I focused on was the navigation, the forms and the lists. The navigation was collapsed and initially hidden from view. A button was placed in the upper right corner of the screen and was marked with the generic menu icon. This allowed mobile viewers to touch the button in order to show the navigation. The navigation would then expand from the top of the page and the menu button would turn into an "X", allowing the user to close the navigation. Giving the user the ability to toggle the navigation improves the mobile user experience by not taking up precious screen space.
The next major design decision was choosing what happened to the lists. The desktop site made good use of the lists in order to display content and in some instances to navigate. As the screen size is much smaller on the mobile devices the lists could not remain displayed as ther were in the desktop version. The decision to remove the lists was discarded outright - the lists were simply to intregal to the site. The end result was that each list would need to be resized, centred and displayed vertically. While this did take up more space it created a more logical flow and doesn't clutter the user.
The forms also needed to be redesigned for mobile viewers. Forms were used on the desktop site in order format and send e-mails to HoC. I wanted to maintain that functionality in an elegant way that enhanced mobile users. After trying various combinations it was clear that simply re-arranging the current setup, similar to what was done with the lists, was the way forward. Keeping the same colours and borders kept the end result looking natural while retaining the look and feel of the desktop site.
One of the advantages on re-arranging the forms was that I could move the content on the page around with more extra space that was created. This allowed the content to be structured in a more logical way, with the imformation first and the enqueries after. I also had to remove or hide some information (like the google map) as it was not suitable for mobile display.
Working on the Harmony on Carmody website was a great experience. It was the first time I had worked on such a multi-cultural project. The outcome was overwhelmingly positive and I look forward to working with the HoC team in the future both to keep their website up to date and on future projects.