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.