Trade4MSMEs Website Redesign

I collaborated with Trade4MSMEs, a joint initiative of the World Trade Organization (WTO) and the Institute of Export and International Trade (IOE&IT), to develop a new website as part of my work at Sparkjoy Studios. I helped them establish new brand guidelines, features, and user journeys for their website. I also worked on branding, content management, illustrations, and their new web designs.

⇠ Back to all projects

A Sparkjoy Studios project for Trade4MSMEs.

Client

Trade4MSMEs (trade4msmes.org)

Credits

Design and Project Management: Janani Ramesh and David Montie

Developers: Mike Mcnally and Suyeong Gong
Trade4MSMEs Team: Kathryn Lundquist, Emmanuelle Ganne, Hunter Matson, Xuting Zhou, Alicia Goujon, and Karen Holden.

Tools

Adobe XD, Adobe Illustrator

CONTEXT

Opportunity Space

This project was an interesting opportunity for Sparkjoy to collaborate with a group of professionals from the World Trade Organization (WTO) and the Institute of Export and International Trade (IOE&IT) to create a new Trade4MSMEs website.

Trade4MSMEs.org is a group that provides informative guides and resources to help micro, small, and medium-sized enterprises access global trade markets. Their team came to us needing help to improve their website's user experience and design.

BRAINSTORMING

Review of their 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:

Content:

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.

Design:

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.

Interactive Search:

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.

Translations:

Translate the website automatically to French and Spanish. Allow for new languages to be added in the future.

CONTENT

Organization of Custom Post Types

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.

Our Trade4MSMEs website architecture for the new website:

DESIGN

Designing an exciting new look 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.

Old and new logo designs:

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.

Mockups of different templates:

Once the wireframes were approved, I moved onto higher-fidelity mockups. Since the interactive maps weren't designed yet, I left placeholders to fill those areas up. Though the branding has a lot of colour options, we tried to make sure the text was always legible and used accessible colours and font sizes.

Old website homepage (left) versus new website homepage (right) designs:

Here you can see a comparison between the old/current website and the new site I designed.

At first glance, the obvious changes are the brand design. The new website is vibrant and eye-catching. It feels more inviting by using fun square graphic accents all around the website. The typography also follows a better visual hierarchy so that titles stand out more. This gives the audience a way of accessing information as it is laid out more clearly.

Once you look deeper into the content, you can see that this was also reorganized. The navigation was redesigned to clearly funnel businesses into their part of the site and policymakers into their own section of the site. We also added the Resource Library to gain access to all Guides and Resources in one place. You can also see a language switcher, which we added using Weglot - a premium automated translator that still allows you to edit translations manually for extra details.

The landing area is livened up using a slider and various animations for the two cards. The recommendation tool, announcements section, and interactive regions map also allows users to access all the information on the site from this single page.

Each page was given a lot of care and the design changes were made incredibly intentionally.

WAYS TO FIND CONTENT

Building interactive methods of finding content

After several rounds of discussions, the clients and our team landed on four main ways to access the Guides and Resources on the site. These included:

The header and footer navigation menus.
A Recommendation Tool on the homepage that can allow users to search any content and use a simplified filtering technique.
An advanced filter page where users can filter guides and resources by multiple different filter types such as the Resource type, Trade type, Topics, Audiences, Years, and Regions.
And finally, we created 3 interactive maps for the Goods in Businessese, Services in Businesses, and Policymakers pages. These maps would allow you to click on a pin and the website would scroll you down to the associated guides on that page.

The recommendation tool on the homepage:

The advanced search page filters for guides and resources:

ILLUSTRATION AND ANIMATION

Designing and building three interactive maps

The Trade4MSMEs' current website had two maps - one for the goods and services for businesses, and another map for the policymakers. However, there were several issues with the current maps. Some of the main issues included:

The design of the map looked too similar to stock images of progress maps. Trade4MSMEs wanted a custom-designed map that matched the rest of their new website's styling.
Users would find it very difficult to use this map as the goods and services pins were all on the same map. The numbers and asterisks did not make sense to a new user the way they did to the Trade4MSMEs team. We needed a clear way of differentiating goods, services, and policymaker maps.
Clicking on the pins on these maps would take a user to a separate page, where they would again feel lost and could not get back to the map easily.

The current website's goods and serives map:

My illustration iterations for the new maps using Adobe Illustrator:

Clicking on a pin on the map would scroll you down on the page to guide cards:

You can explore this page in two ways - either by using the map with illustrations, or by using the side navigation next to the cards. When you select a card on the map, the page will automatically scroll down to show you the guides for that section. If you want to see the guides for another section, you just need to click on the side navigation links. Each section has a different colour and scrolls automatically. Clicking on a guide card will take you to the guide single.

REVIEW

Project Reflection and Impact

Working on this project from start to finish was an incredible journey.

The project involved working with a large amount of content and data, which required careful planning and organization. Having so much content to work with can be challenging at first, but I have a big passion for organization and taking time to dissect how the content can be accessed by the user more easily. The architectural puzzle of this website was challenging but incredibly rewarding.

Additionally, completely redesigning and building a brand from the ground up was a lot of fun as well. The result was a stunning and functional website that showcases the Trade4MSMEs brand and mission. The website has also helped increase the visibility and credibility of Trade4MSMEs in the global market. The Trade4MSMEs team was incredibly delighted with our work and we could not be happier with the execution. Thank you to everyone who worked on this beautiful project.