CMS implementation and redesign of mBanks website

mBank, one of the largest banks in Poland, prides itself on its innovative approach to banking, reflected in its tagline, "a mobile icon."

Given this, there was a clear need for a refreshed website.

The old portal, once effective, had become outdated and difficult to manage. It was decided that the new website would be based on a CMS, and mServices was commissioned to design the new site and oversee the implementation process.

summary

• 100+ stakeholders

• 2 years duration

• implementation of CMS

• new types of graphic assets in design system

• improvement on the information

• architecture and sitemap

• fresh, up-to-date design

• improved accesibility

I joined the project during its most challenging phase, taking on a lead role after the ideation was complete. My task was to make the "great vision" usable and feasible within the given time and with limited resources. What I did:

• organized the workspace and managed the workload
• completed the design and created documentation for 40+ CMS components, including a guide for CMS users
• led a team of UX/UI designers in designing 120+ subpages for the website
• developed a prototype for mobile testing and implemented design improvements based on research.
• oversaw various branches of the project (five at one time) and ensured design consistency

my role - lead designer

details

challenge 1 - same content new website

One of the main technological and design challenges on this project was to create a system of reusable and responsive website sections to that:

a) all of the current contetnt can be transitioned to;

b) can be implemented in CMS;

c) will be clear and easy to edit by non-developers.

content stays the same!

nonflexible (expensive)

outdated design

not mobile first

fully responsive

based in CMS

modern look

new website

old website

challenge 2 - assuring flexibility

What I got was a new, accepted by stakeholders vision for the website - what I had to do - put it down on earth till sucessful implementation.

We had to be sure that the proposed vision took all of the needs under consideration and fill all of the gaps if nessesary.

In order to do it we defined a number of sections to be implemented in CMS and tested them creating new versions of numerous current subpages.

Some of the existing content had to be creatively translated to planned designs. All of the above was done with a colse cooperation and consultations with stakeholders from different bank's department responsible for different areas. 

challenge 3 - are users going to like it?

We had an idea for a system and had to test it with the users, so we started a round of usability testing.  Most tasks were completed successfully by users. However, the primary recommendations for changes were related to copywriting on the page and the bank products themselves. We discovered that users were mainly confused by elements beyond our control, which was a significant setback. 

Realizing that the final design would be judged on factors beyond our influence, we shifted our focus to the secondary user—the CMS editor—who would have actual control over the website. 

challenge 4 - it's going to have a life beyond designers control

All CMS components had to be thoroughly described in the documentation. As our focus shifted to editors, we aimed to create "foolproof" components with built-in limitations to ensure cohesion.

Our challenge was to design a website that could be managed by hundreds of editors, many of whom lacked design experience, while also accommodating the existing, chaotic website content within a new structure.

I created a detailed documentation with clear instructions for editors with examples of usage and mistakes that can be commonly made.

We continued to oversee the implementation, responding quickly and effectively to any emerging issues. Due to a tight deadline, the project manager on the client's (bank’s) side made several cuts from the initial design, impacting the overall website.

At one point, we needed to conduct a detailed audit to reconcile differences between the design and implementation, finding a compromise. 

Challenge 5 - implementation and quality verification

Challenge 6 - lack of internal processes on clients side

At the very end of the whole project it became clear that the client lacked agile internal processes for managing visual assets such as illustrations, collages, and mockups. 

To address this, we held workshops to devise a solution for managing collages on the page and proposed rules of how to create assets regarding business line and each product. We provided a scalable pattern for adjusting the number of graphics on the website. In mServices we also developed a tool that enables the quick creation of visual assets. 

Some distance to my work - even if not everything will go may way (even if I do my best) and some things will just be beyond my control and it does not mean that the project is bad or I’m a bad designer.

what I’ve learned

Turning a vision into real-life product that meets all of the expectations and fits between limitation.

the biggest challenge

Strona zrobiona w WebWave.