Trade4MSMEs Website Redesign
My design of a new website for Trade4MSMEs, a joint initiative of the World Trade Organization (WTO) and the Institute of Export and International Trade (IOE&IT).
Overview
At Sparkjoy Studios, I collaborated with Trade4MSMEs, a joint initiative by the World Trade Organization (WTO) and the Institute of Export and International Trade (IOE&IT), to develop a new website.
Trade4MSMEs is a group that provides informative guides and resources to help micro, small, and medium-sized enterprises (MSMEs) access global trade markets. Their team came to us needing help to improve their website's user experience and design.
My role involved establishing comprehensive brand guidelines, designing user journeys, and integrating new features to enhance the website's functionality. Additionally, I contributed to the content management and the creation of custom illustrations, ensuring a cohesive and engaging web design.
The Design Process
Working within a design and development agency, our project's process was heavily influenced by the client's budget. To meet our client's needs while ensuring the importance of UX research, we adopted the following approach:
Review of the existing website and areas for improvement
Our first step was to hold a discovery meeting with the clients, where we understand their needs and agree on a common goal for the solution. In this meeting, we discussed the main aspects to focus on. They were:
-
Improve the internal website functionality. This will require a restructuring of the 79 guides and 581 resources on the site.
-
Adding new content types and new templates for the 6 continent pages and 164 country single pages.
-
-
Some of the functionality challenges could be alleviated through design improvements.
-
Create new branding that is fresh and modern. This includes new logos, colours, typefaces, etc.
-
Create a web design that is more dynamic and interesting so that the content stands out.
-
-
Create a recommendation tool and advanced search page features.
-
Illustrate road maps that are more consistent with web design and use animation to find the guides and resources on the site.
-
-
Translate the website automatically to French and Spanish. Allow for new languages to be added in the future.
-
The current Trade4MSMEs homepage
Organization of content
The Trade4MSMEs site had a large amount of content that we categorized across a dozen custom post types, taxonomies, and associations.
I used Coggle to map out their current structure and discussed how to improve it with their team. After three iterative meetings, we landed on a clearly organized sitemap that would help users find what they need in multiple ways. We also introduced some new content types of Regions and Countries pages without compromising the user experience.
Designing an exciting new style for the website
Trade4MSMEs requested a refreshed branding and website design, as well as extensive work with animations and crafting a robust information architecture. I spent about two months with the Trade4MSMEs team to develop the designs for this project.
I first began by creating 3 unique style tiles on Adobe XD for their team to review with us. I then moved into creating a design system and logos using those styles.
Once the design guidelines were done, I was able to begin wireframes templates and creating high-fidelity mockups. We had a total of 4 rounds of reviews. Each review was incredibly beneficial to both their team and ours so that we could visualize how all of their content could be accessed in different ways on the website.
3 initial style tiles for client review:
Trade4MSMEs wanted branding that was modern, colourful and lively. With their current site, they were worried that the content felt boring without solid branding and colours that stood out. However, they still wanted to maintain colours similar to the WTO's green, blue, and red.
3 typography and colour styles for client review:
Along with the style tiles, I gave Trade4MSMEs options for the tones of the colours they decided on, as well as typography choices. With so much content to read on the site, we prioritized legibility and clarity. The team decided on the first option.
Logo Refresh
Once the styles were decided on, I used the new typeface and colours to edit the Trade4MSMEs logo. I tried to give the logo a slightly more modern feel by removing the light blues and adding just a hint of red for the "4". I also set the "4" lower so that the horizontal line of the number aligned with the bottom of the rest of the text. I removed the background on the globe so that the logo could work on different backgrounds as well.
Once the team was happy with the logo, I provided them with variations of the logo for dark backgrounds and also sent them the logo files in vector, png, jpg, and svg formats.
Designing and illustrating three interactive maps
The Trade4MSMEs' current website has two maps - one for the goods and services for businesses, and another map for the policymakers. However, there are several usability issues with the current maps. Some of the main issues included:
3
Clicking on the pins on these maps takes a user to a separate page, where they feel lost and cannot get back to the map easily.
1
The design of the map looks too similar to stock images of progress maps. Trade4MSMEs wants a custom-designed map that matched the rest of their new website's styling.
2
Users find it very difficult to use this map as the goods and services pins are all on the same map. The numbers and asterisks do not make sense to a new user the way they do to the Trade4MSMEs team. We need a clear way of differentiating goods, services, and policymaker maps.
The current website's goods and serives map:
