This project aimed at redesigning our company website to make it minimal and seamless.
I was responsible for improving the look of the website and ensuring that its user experience is more intuitive and seamless.
Being assigned to this project shortly after joining Mitigram, I approached it with a fresh perspective. Like a first-time user, I had limited knowledge of Mitigram and its offerings. I advocated for website changes that would enhance user understanding of Mitigram's products and facilitate their interest in requesting a demo.
This workshop were conducted by Bold before I joined this project. But from what I understood, this was to gauge a brand design position of our company and conduct a visual audit of our website.
This too took place before I joined Mitigram. Bold presented 2-3 concepts to us which exemplified the design and mock-up touch points. They wanted to gather our feedback and the preferred choice of concept direction.
The provided fonts were a great match and I believed they would work well for the website.
Other Trade Finance websites typically use blue as their main color. After thorough discussions and considerations, our internal team made a final decision. I personally voted for this color set because I believed it would distinguish us from competitors. With additional team members supporting the same colors, we chose them as the official Mitigram colors moving forward.
As part of my responsibilities, I created a mood board of images that met specific requirements. This included showcasing potential users such as corporates, bankers, traders, and professionals benefiting from our products. Additionally, I selected images depicting the interiors and exteriors of financial buildings to represent financial institutions, one of our target user groups. After careful consideration, a selection of images from Getty was made and filtered to be used on our website.
Bold provided us a Figma file with the wireframes of all the different pages of the website. The senior product designer and I looked through these wireframes to ensure that all the necessary information is being displayed in the appropriate pages and that the flow between the different pages is consistent and intuitive. Based on the analysis that we conducted, we made the corresponding changes to the flow and information architecture of the wireframes.
In another Figma file, we received the designs of three pages (Home, two of the Solution pages) of the website. Keeping the updated wireframes and the three designs as our reference , the senior product designer, head of digital marketing and I were tasked with designing the rest of the pages of the website with the required content and the images that we had previously gathered. We ensured that the UI is intuitive and the flow between different pages is seamless. I put together the design for the following pages:
Once we had designed all of the remaining pages, we reviewed each other designs and made some further changes to the structure. Once the designs were ready, their implementation was carried out by our front end developers using Joomla as their content management system. Here are screenshots of a few pages of the old website compared to pages in the redesigned website:
People spent more time on the redesigned website and there were also a few more users requesting for demos compared to earlier.
If we were not short for time on this project, I would have pushed for extensive user testing to be conducted with the wireframes and the designs.
I gathered so many insights and faced a few learning curves during the course of this project. Out of all the insights that I have gathered, I feel like the following ones are my main takeaways:
Better communication and handoff with the developers
During the design handover to the developers, few big changes were made to the designs which lead to extra hours of implementation for the devs. In the future, I would love to have a freeze (as much as possible) on the designs, so that the development work can be initiated whilst keeping the designs as a reference.
More confident in voicing out my opinions
Since this was the first project that I was handed, I was a bit intimated to be fully surrounded by professionals with years of experience under their belt. This made me feel a bit nervous and worried that the feedback that I provided was wrong and did not make sense. But I learned, especially towards the end, that all feedback was appreciated and valuable in this project.
Working in a large team
Gaining experience in collaborating with diverse team members possessing various backgrounds and skills will prove valuable for my future projects.
By enhancing the old website for our potential, we achieved the goal of improving user satisfaction and engagement. Our user-centered design approach resulted in a successful redesign that addressed the identified problem areas.
