oralecosntructionweb min

Orale Construction website
of portfolio

I worked for a period of three months to create the website portfolio as a UX/UI Design Specialist for Orale Construction a Miami Florida construction company that specializes in remodeling, plumbing, roofing, etc. …. the main value of this company is the Latin roots of the founder that allows communication in Spanish and English without having any language limitation. Perform user research, prototyping, and user testing in order to deliver the design to the developer ensuring quality delivery.

My Role

UX Designer

Visual Designer

Project Duration

three Months

Collaborators

1 Stakeholder
2 Developers

What are the opportunities for improvement?

The Latino community in Florida is one of the largest immigrant communities in the U.S. They carry out their daily activities, sometimes they need to hire a plumber or do a remodeling job, and sometimes they are limited by not being able to communicate effectively.

  • Latino customers need to communicate in their language without being affected by the language barrier.
  • The company needs to show the work done to generate a bond of trust.
  • Companies and customers need to have a way to contact in their language in an easy way.

The solution

Design a portfolio website to showcase each of the projects Orale Construction has worked on to allow the company to present the projects they have worked on, explain all the services provided, and contact clients. With opportunities for improvement in mind, we needed to: create a content architecture that was easy to navigate, read and interact with, and the contact sections always visible through the contact forms.

This process provided the opportunity to generate user research, competitive analysis, wireframing, prototyping, and the creation of a design system.

step 1q

Empathize

What are the company's goals?
What is the target market?
What are the pain points?
Who are your competitors?
What is your brand identity?

step 2q

Define

How to define the User Persona?
What is the problem?
How will the meetings be organized?
What are the deliverables?

step 3q

Ideate

Create Site Map
Start defining User Flows
Perform the Sketch process

step 4q

Prototype

Designing Lo-Fi Wireframes
Design Hi-Fi Wireframes
Create Design Systems

step 5q

Test

Obtain Stakeholder feedback
Conduct Usability Study
Validate the user experience

Design Thinking
Methodology

The Design Thinking methodology is a tool that fits perfectly to understand the company, user, and the digital product that is being worked on, using tools, tests, and deliverables that belong to the user research process, prototyping, and usability testing it is possible to develop a high-quality product.

In order to lay the foundations it was necessary to document the users and propose the first UIs for the web portfolio.

To correctly plan the project it was necessary to investigate the users and from this create a user persona that would lead us to generate a user journey map understanding in depth the flow that our user persona should follow, then plan the site map developing an information architecture that allows easy access to the information that the user is looking for, which leads to the creation of the first interfaces on paper or digitally and when completing the wireframe it is necessary to create a design system to deliver it to the developers so that they have the typography, colors, and elements that are part of the overall design of the website.

B. persona
U. Journey Map
P. wireframes
S. Map
persona orale constructions project min
Google User Journey person orale constructions
Paper First orale construction
InformationArchitecture orale constructions min

Design System

Color Pallet & Buttons
Header
Typography
Design System Orale Construction1
Design System Orale Construction3
Design System Orale Construction2
Design System Orale Construction4

The areas of improvement to connect
with Customers in the Latino community
are shown below

home-img-unmrma

Facilitating project information and service information in Spanish and English

To solve this problem it is necessary to think of creating a simple interaction that allows to obtain the information of contracting services in a fast way avoiding the language problem by applying a portfolio that has the possibility to switch between these languages and give the opportunity to write in the native language.

Show details and services performed
in the different projects
presented

In this section it was necessary to share in a precise and not very extensive way the information of the project so that the clients can better understand the services offered or provided to the public and can hire their service trusting in the experience and the ease of communication that this company offers to Latinos and English speakers.

carreras-area-img-unmrma
home-img-unmrma

Display individual services to facilitate
contracting

Each of the services provided by the company is shown in this section as it is necessary for customers to select and initiate the connection with the company to understand their needs, budget and start working on the remodeling project or a specific service.

Mockups

slider orale construction mockups1
slider orale construction mockups2

Aspects to take into account

It is necessary to make an analysis of the projects to be shown by the client so that he approves the information shown and provides the necessary technical data to make the copies so that they are understandable to the general public and provide them. Another point to take into account is that it is necessary to guide the client on how to make the photographs show the before and after in order to highlight the quality of the work.

What did I learn when creating the portfolio for Orale?

One of the most important learnings is that as a freelancer you need to adapt to the client’s schedule as they may have busy schedules during the week so it is necessary to contact them on weekends, likewise, it is good to guide clients to learn how to take pictures or even teach them a little about how to answer messages. In short, helping the client allows us to better understand their business and what values they want to share on their website.

en_USEN