FXCM is a large organization that deliver multiple products and services. The website navigation system plays a crucial role in how efficient users are able to allocate the information and accomplish tasks using a website.

 project main phases:

– Analytics Research

– UX Research

– Visual Design

– Development

During the weekly workshops collaboration between Analytics, Management and my Creative team, we defined the pain points of the existing navigation. The usability test result shows the change in the navigation system has different levels of impact on different groups of users. The main target was the new users, that with a best scenario would need to be converted into new accounts. Then we iterate on ideas, and finally I produce wireframes and UI elements through the final design and work with developers on implementation.

Research:

We collected data by requesting brainstorm sessions from small groups of colleagues who worked close to the end user: customer support team representatives, project managers, analytics team.

For me it was an interesting experience to step back and to look on the navigation that I knew for a long time with a new (approach , learning lens) and dive into research to define the right problem to solve. Below is the preview of the old look and navigation structure of the FXCM site.

We created a document with UX strategy improvements & recommendations where we outlined our main goal:

To produce system that could logically represent a wide breadth of content including company different products, features of the main platform, education, articles, etc.

By creating a site map and segregating the content, we understand and frame problem areas. It was important to include business requirements, constraints and politics. As for business requirements we were dealing with internal: business needs, goals and for external: context, competitors and best practices. We needed to translate business value into digital experience.

Some specific problems with FXCM navigation were:
– Bad information hierarchy on the navigation
– Mobile and Desktop preview consistency
– Looks old and outdated structure and design
– Too many main tabs
– Luck with intuitive flow

During our next collaboration workshops we simplifyed user-flows between pages by removing unnecessary pages, merged existing and adding new when needed. We created the content-based navigation with more logical intuitive flow and presents a big picture of the website structure.

Since navigation redesign includes all header components, we run A/B tests for main top navigation, reviewing the naming of the labeled as well as colors and location. It helped us train the muscle and know what worked in the end.

What we achieved and learned:

User-centered and task-centered navigation. The navigation must help users to be able to finish their tasks with minimum instructions.
Improve the efficiency. It is important to provide quick access to information and allow users to be able to complete tasks as fast as possible.
Increase the awareness. The user should be aware of the environment and the state of the tasks they are doing. users should always be able to answer the following questions: what are you doing? Where are you? What are you doing next? Also, users should be notified when a task status changes.

The website’s navigation structure is now rearranged based on a hierarchy of importance.

Once all of the planning and foundation was built, I was ready to work with wireframes for the core mobile and desktop experience.

But before I started the design process I went over my  “must list”:
– navigation consistent and logical
– aiding in the user’s wayfinding
– labelling accessible and clear
– helping the user decide what to do next
– design for users needs,
As well as updating artwork and to improve content discoverability.

Design

For me it was important to come up with a modern and appealing visual style that will shine a light on the brand personality, but at the same time will keep the clean look and feel of the existing site.

Colors, fonts, layouts are clear and prominent. I set the background deep colors with theme imagery and used a darker gradient for highlighting relevant links (hover effect). Also, large enough margins between the elements in a navigation box made them outstanding and easy to focus on.

It was important to apply FXCM header / navigation new structure on mobile first, since Google predominantly uses the mobile version of the content for indexing and ranking. Quick-loading, mobile-friendly sites will enjoy healthy rankings,

Development

And finally, I prepared all needed files, guidance, recommendations and materials to my developers team and worked with them on final implementation.

For the testing we apply new header / navigation to one of the main FXCM websites – UK and after receiving a usability test result, all FXCM sites were updated with a new navigation structure.