top of page
Image by UX Indonesia

Website redesign project

  • Analysis of the site interface (UI): Heuristic analysis of the current site

  • Benchmarking competitor websites and research;

  • Mapping stakeholders and site map

  • Building personas, designing user journeys, and drawing up a content guide

  • Creating wireframes, style guides, and high-fidelity prototypes;

  • Carrying out usability tests

  • Improving based on the data obtained in the tests

  • Handoff design.

Context

The challenge chosen for the UX/UI Design training program was to redesign the company's website. The aim was to update it and make it as modern, attractive and user-friendly as possible. 

​

The company in question is Fóton Informática. A thirty-year old company specializing in banking automation. The current website focuses on showcasing the products and services they offer, but also attracting talent, as the company is going through a growth process and needs qualified professionals to work on its clients' projects. 


​

Process

Objective
Improve the company's website, making it more modern. Use UX best practices to update the look and refine the content.

​

Activities

  • To reach the final version, I carried out the following activities:

  • Heuristic analysis;

  • Sitemap;

  • Mapping stakeholders and their interests within the project;

  • Creating personas and designing the user journey;

  • Benchmarking and researching visual references;

  • Designing a Content Guide;

  • Wireframes, Style Guide and high-fidelity prototypes;

  • Carrying out tests and user research;

  • Design Handoff.

​

 

Tools

  • Figma

  • Figjam

 

 

Phases of the process 

The process was divided into three phases using the Double Diamond methodology: discovery, ideation, and validation.

​

 

Phase 1: Discovery

The first activity in this initial phase was an in-depth analysis of the company's website interface. 

​

 

I carried out a Heuristic Analysis, based on Nielsen's 10 heuristics. It was necessary to understand who the site's users were in order to evaluate the experience and pinpoint the elements that needed to be improved in the redesign project.  

Definition of the site's target audience and their interests, in presentation. 

After identifying all the inconsistencies in the company's website, it was time to build the sitemap for the new version and map the stakeholders, detailing their interests in the project.

The sitemap built-in Figma

Finally, it was time to research the personas and their journeys within the new site and structure a content guide.

The content guide built in Figjam, to structure the tone and voice of the company.

Phase 2: Discovery

In the second phase of the project, I held a benchmarking session with the websites of six competitors. I evaluated ten aspects: consistency and standard, readability, minimalist design, visible contrast, breadcrumb images and illustrations, and the “work with us”, “about us” and “products and services” pages. 

The comparative table for the benchmarking of competitors' websites.

The next step was to carry out research to collect visual references. The data collected from the Heuristic Analysis, the benchmarking of competitors' websites, and the visual references, as well as the best usability practices, were used as the basic data for a brainstorming session to decide what would be used in the design of the new website to be developed. 

​

Only then, did I finish this stage of the process by structuring the first wireframes.

The ​first version of the wireframe for the home page, developed in Figma.

Phase 3: Validation

In the third and final stage of the project, I prototyped each page of the site based on the wireframes previously designed, applying the standards defined by the brand identity from the Style Guide. 

The high-fidelity prototypes of the website's pages, built in Figma

With the site prototyped, it was time to test it. A qualitative test was taken with seven users through videoconference interviews.

​

The Maze tool, used to carry out the tests, provided a series of data, analyzed together with the participants' feedback, which generated a series of insights into improvements that could be applied. 

​

These improvements were listed and evaluated within a quadrant that measured the value and effort required to make each one. From this, I was able to decide

The value x effort quadrant - Figjam

According to the value generated within the timeframe for delivering the project, the final decision was to make most of the improvements suggested by the users, except one that would take up a lot of time and add minimal value from a business point of view.  

​

Finally, with all the necessary changes made and the prototype finished, meeting the interests of the stakeholders, the project was shown to the company's marketing department and the directors for final approval. With everyone's endorsement, the design handoff was carried out and it moved on to development.

User testing

Methodology 

A qualitative usability test was conducted with seven users from four different professional backgrounds in three different regions of the country.

​

The number of participants was decided based on a study carried out by the Nielsen Norman Group, which reveals that tests with at least five people can already show 80% of interface problems.

​

Objectives 

  • Learn about user behavior

  • identify possible problems with the site's interface, content, and design

  • discover opportunities to improve the product through the data collected and users' feedback.

 

The test
There were three missions that users had to complete in order to test the usability and some of the functionalities of the new site. All the tests were recorded and, by sharing the screen, I was able to follow how each user behaved when navigating the site. 

​

Tools

  • Maze

  • Figma's navigable prototype


Through Maze it was possible to create missions for users to complete, although they could also browse the Figma prototype to explore the site and its content further. 

​

After the test, users were sent a link to complete an anonymous questionnaire in which they could evaluate their experience with the site. 

​

Maze provided both qualitative and quantitative data in regard to the test and by combining the data with the information obtained during the interviews, it was able to assess the success of each mission completed and how critical some of the usability problems identified were.

​

​

​

​

​

​

​

 

 

 

 

 

 

 

 

 


The heat map (qualitative data) was released by Maze after the tests.

​​

The heat map (qualitative data) was released by Maze after the tests.

Conclusion

I summed up the recommendations that came from the feedback and data analysis so that together with the team, I could determine what was most urgent and feasible in order to deliver a quality product to users on time. 

​

The main decisions were to improve the visibility of buttons, build more conversational features (so that the user understands what is active or not), and finally, reduce the amount of clicking and scrolling required to act. 

My role:

Work collaboratively with another UX Designer to build interfaces that comply with good usability practices

Conduct research to build a persona and content guide

Analyze data, investigate hypotheses and map journeys

Prototyping, carrying out and monitoring tests to validate prototypes

bottom of page