UX/UI Design

Mint Inc website

Redesign for a real estate construction company website

About the project

  • Duration
  • Mar - Jul 2021
  • My Role
  • UX Designer
  • UI Designer
  • Team members
  • Taciana Kolisch
  • Marina Pastore
  • Tiago Faller
  • Tools
  • Pen and paper
  • Figma
  • Deliverables
  • Annotated wireframes
  • Style guide
  • QA reviews
  • Live responsive website

Summary

Mint Inc is a real estate construction company in São Paulo, Brazil, which wanted to revitalize their website, aiming to improve its conversion rate by emphasizing users' needs and using a youthful and modern language, sympathizing with the brand's humanization and information on the properties offered. In addition to increasing reachability and searchability, by using lead generation and SEO for search engine rankings.

Discover

— BRIEFING

What does the Mint website need?

After the initial briefing meeting, where we were able to understand the client's goals regarding the website. We then performed competitor analysis to understand where improvements could be made.

Define

— BRAINSTORM & PERSONAS

Understanding the company values

We dissected the brand manifesto and based on it, two personas were created to help us in the website creation process, thus empathizing with our target audience.

Manifesto brainstorm & created Personas
— SKETCHES & LO-FI WIREFRAME

Structuring the website

We made a few sketches illustrating how to humanize the website while focusing on converting new users.

Here are some proposed solutions for the site:

  1. 1. To humanize the brand, Mint’s owners should be brought to the forefront, highlighting how the company came about, the quality applied to each project. In addition, they also fit the demographics they are targeting.
  2. 2. The projects’ portfolio should also have more information and photos so that customers can fall in love with the properties before contacting the company.
  3. 3. All pages should have a few contact options, to generate conversions in fewer clicks.
  4. 4. To generate more trust in the company, a testimonial section from current residents and numbers that prove Mint’s quality and expertise, should be included.
— HI-FI WIREFRAME

Interface creation

After the wireframe was approved, we worked on proposed changes and came up with the high-fidelity wireframe, we used the brand guidelines to design a youthful and modern layout.

At first, we just tested navigating through the application and noticing the user's impressions without a defined goal; however, it failed due to the lack of goal. We then ran the tests with a list of tasks and success criteria according to the doubts we had regarding the layout and flow.

Hi-fi desktop & mobile versions. Access Mint Inc Website (mint.com.br) for a full view.
— PROTOTYPE & USABILITY TESTING

Testing, testing...

Prototypes for desktop and mobile versions were created, with the client being responsible for testing and providing us a report with their observations. Once we received the report, we worked on an updated version that was approved shortly thereafter.

Production

— STYLE GUIDE + ANNOTATIONS

Supporting the developer

With the client's approval, we documented every screen, including annotations and how each element should behave within the flow, such as error/success messages, animations, etc.

In addition, we created a style guide to be used in future site updates, along with codes and assets to make the developer's life easier.

Style Guide
Wireframe annotations

Conclusion

The site was developed, tested, and fixed before launch. It is worth mentioning that we also implement SEO tools to improve the ranking in the search of the website by tools like Google.

We were very pleased with the results for being able to count on a team with great professionals.

You can access Mint Inc website here.