Thinking Ahead iPad App for Commerzbank
Thinking Ahead was Commerzbank's monthly in-house print magazine distributed in London and Frankfurt (see Graphic Design).
After print sign-off of the magazine, I would then translate selected articles from for iPad App version using DPS App Builder and InDesign. Using much of the material from the print version replacing static images with animation versions. The iPad App was then submitted to the App Marketplace where it was available to the public as a free download from App Store.
From print...
...to initial layout...
...adding functionality...
...animation and interaction...
...usability testing...
...to App Store
Comnet for Commerzbank
The overhaul of Commerzbank's intranet system 'Comnet' and the CMS 'FirstSpirit' was a successfully delivered project which utilised my experience as a UX and UI designer, webmaster, content writer, digital designer and project manager. It was a project which had its many challenges, was often frustrating but ultimately was a greatly rewarding experience.
Below the written walkthrough you'll find an animated video which in brief describes some of the issues encountered throughout the Comnet/FirstSpirit project including the final visual redesign.
Background
Commerzbank's intranet, Comnet, was launched in 2005 and connected all global branches of the bank. Primarily a comms tool with access to internal resources, information and news, giving employees the opportunity to connect and collaborate irrespective of location. Employees were to provide content which they would upload using the basic CMS, FirstSpirit (later, e-Spirit) via a WYSIWYG interface. By 2018 neither Comnet nor FirstSpirit had much changed. Employees were still obligated to use both systems but without a London-based webmaster, poorly translated tutorials and non-existent housekeeping, using Comnet hindered rather than facilitated employee productivity.
Project
In 2018 I was working at Commerzbank as a full-time senior designer (employed by Williams Lee as a member of the Commerzbank in-house creative studio) and also held a part-time position as webmaster for the British Society of Enamellers. When a request came from the HR department to visually refresh their Comnet page I was handed the assignment.
FirstSpirit and Comnet were new to me, however, after having spent time on the redesign and implementation of the HR pages it was obvious both were in dire need of management. The CMS was an architectural graveyard for thousands of dead pages, documents, links and media. On the frontend, without implementation of best UI practices, Comnet was impossible to navigate.
Once the HR Comnet pages were launched more clients came to me with similar requests, my work on Comnet grew exponentially. What began as request for a one-page re-design eventually became a dedicated webmaster role supporting London, New York and Singapore, smaller satellite branches such as Dubai and Hong Kong and cover for Frankfurt when required.
Example of page created in 2005 and
still in use in 2018
However, ultimately I wanted to get FirstSpirit and Comnet to a place where employees could once again use these tools competently and confidently themselves.
Approach
In order to implement clarity and UI best practice, a flexible approach was key. Taking a structured approach where possible, adopting a fluid approach where necessary and being very creative in between. Fortunately, I was able to bring solid experience as a UX and UI visual designer, content writer, developer and senior graphic designer to the task.
Commerzbank London had eight main departments. Each department required its own landing page and multiple sub-pages. I began by mapping the architecture for each department's section of Comnet. This enabled me to understand the overall flow and structure and how the pages related as a whole. With that information I was able to implement a more consistent user journey and visual design.
The below list, although not comprehensive provides an insight of how I generally approached the overall system as well as each department section.
Project tasks
One of eight departments mapped out
Project walkthrough
Please be aware that due to confidentiality agreements imagery is limited and only images of Comnet pages were released for use - therefore no images of the CMS, FirstSpirit are shown in this animation.
In summary, Coment was a project which required clear focused thinking, the ability to see the entire framework as it was and as it could potentially be. In order to achieve this, focus, enthusiasm and tenacity were necessary.
The project required exceptional design and technical experience, as well as the ability to hear and implement the clients' needs. Through positive relationships with my clients, I gained their support and was able deliver an outcome, which, in the beginning seemed to them an impossibility.
As project manager I intelligently used available resources and throughout was able to assign work to those designers who requested more hands-on experience in this area.
I was able to achieve an exceptionally good outcome for the bank's employees, so on a personal level, work on this project was incredibly rewarding.