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.

see the website

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.

  • 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

phase 5 - overlooking the implementation process

To address this, we held workshops to devise a solution for managing collages on the page. We developed a tool that enables the quick creation of visual assets and provided a scalable pattern for adjusting the number of graphics on the website. We plan to propose similar solutions for managing mockups.

We continue 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. Additionally, it became clear that the client lacked agile internal processes for managing visual assets such as illustrations, collages, and mockups.

phase 4 - documenting sections for CMS

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.

phase 3 - prototyping and user testing

We created prototypes for usability testing and conducted simple task scenarios with potential users. 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.

phase 2 - creating sample websites

Once the project was operational, we began the extensive process of designing most of the existing subpages. We periodically paused to enhance usability for certain parts of the website, even though these improvements were not part of the initial scope. For example, the structures of job listings and stock listings were completely redesigned and improved for better user experience.

details

My first task was to organize the project file, with help from a colleague. We saved and sorted the entire project, which had been neglected for a long time. We divided the large file into four smaller ones, removed outdated designs, and established an organized workflow with an approval process for working with stakeholders.

phase 1 - organising a neglected project

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

all projects

Strona zrobiona w WebWave.