Web design and development

Description: This was the second web design and development project I did for a client. A renovation of the website was carried out to improve the design and results.

Timeline: July 2023 - August 2023

Results:

• We improved the user experience through dynamic content filters.

• We reflected the brand identity and gave personality to the website.

• We implemented a form and configured a flow so that the leads reach the email.

"I want to thank Mauricio for his patience and also because he is very proactive. He was efficient in carrying out the website project, there were several meetings where the ideas that ended up in the new website flowed quickly. I am happy with the results."

Pilar Li García
Founder of Lista Inmobiliaria Perú
1

Project brief

Lista Inmobiliaria Perú is a company with more than 20 years of experience in buying and selling real estate in Peruvian territory. The design of the current website does not reflect the brand identity and they want to renew it. The project aims to improve the design so that it better reflects the brand identity, make the team's experience for uploading and updating products in the backend simpler, and improve online results.

2

Website audit

The first thing that was done was a review of Lista inmobiliaria's current website, as well as the website of its competitors. This way it was possible to make a benchmark and point out opportunities for improvement. We also carry out an SEO and performance audit to compare before and after.

See Analysis of improvement opportunities

See SEO and performance report

3

Objective setting

In the meeting with Lista Inmobiliaria Perú we defined the objectives of the project and talked about the problems they face. We were able to define 2 main objectives and 5 specific objectives.

Main objectives

  1. Increase visits and leads.
  2. Improve experience for internal customers.

Specific objectives

  1. Improve organization and navigation of the page.
  2. Give more personality to the website and reflect the branding.
  3. Make the upload and management of products for internal clients easier.
  4. Generate more trust in visitors.
  5. Facilitate content creation and optimize SEO.
4

Problem identification

Once the objectives were defined, we made a list of the problems identified in the initial meeting, as well as the problems identified in the analysis of improvement opportunities.

5

Idea generation

Based on the identified problems, ideas for the new design of the website were generated:


6

Information architecture

We continued with an analysis of the current information architecture and the new proposal, taking into consideration the objectives and the analysis carried out previously. The information architecture is the structure of the website and defines the hierarchy and order between the pages.

IA before

IA after

7

Layouts

After defining the information architecture, we work on the layouts. A layout is the structure of the elements that each page has within the information architecture:

8

Wireframes

Once we had clarity about the pages and the structure of the pages, we started the first designs in Figma. We design low-fidelity wireframes or sketches of each page considered in the information architecture.

9

Content definition

After validating the wireframes, we made a content map and worked together to define the text that would go on each page.

10

Branding

To continue with the design process, we defined the colors and typography that the new website will have, using the company logo and its current colors.

11

Mockups

Once the branding and content were defined, we move on to the last stage of the design, the mockups. A mockup is a visual representation with all the details of how the website will look once it is developed.

<
>
No items found.
12

Webflow development

Once the mockups and the final design were validated, the development of the website was carried out in Webflow:

Visit the website to see the final result

13

Results

• We improved the user experience through dynamic content filters.

• We reflected the brand identity and gave personality to the website.

• We implemented a form and configured a flow so that the leads reach the email.

"I want to thank Mauricio for his patience and also because he is very proactive. He was efficient in carrying out the website project, there were several meetings where the ideas that ended up in the new website flowed quickly. I am happy with the results."

Pilar Li García
Pilar Li García
14

Learnings

• Webflow does not include servers to host email services like other hosting providers do. When making a migration you have to take this into account, if the client has or wants to manage corporate emails, the solution is to buy a hosting service, apart from Webflow, to be able to host and manage it.

• Tutorials in video format work very well to train other people on topics related to web management. Compared to a training, it is easier to do and users have the video available whenever they need it.

• I learned how to configure dynamic filters for CMS elements in Webflow, this can be very useful in different use cases.

Schedule a free audit!

Mauricio Cornejo
Schedule a 30-minute meeting with me on Google meet, totally free!

What are you getting?

👨‍💻  Free advice on your situation to define your best options.

📄  SEO and performance report of your current website.

📈 Feedback

Get a FREE website audit!

You are not getting the results that you want,
let’s find out why...

I will send you a 10 minute video with 7 specific actions to optimize your results.

Get a 1 - 10 rating in:
🎨 Design
🔎 SEO
⚙️ Performance
Usability and accessibility
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.