UX Portfolio | Leandro Cordero

UX / UI PORTFOLIO

Leandro Cordero

EDUCATION

• ARCHITECT DEGREE

2020 . Universidad Peruana de Ciencias Aplicadas (UPC)

• HTML & CSS PROFESSIONAL COURSE

2020 . Certificated by Platzi

• USER RESEARCH PROFESSIONAL COURSE

2022 . Certificated by Platzi

• UX DESIGN CERTIFICATE

2023 . Certificated by Google

EXPERIENCE

• FIVERR

JUL 2021 - DEC 2021 . Freelance UX Designer

• CREATIVA CORP

JAN 2022 - FEB 2023 . UX/UI Designer

LANGUAGES

SPANISH ................................................................. Native ENGLISH ........................................................... Advanced

SKILLS

PROACTIVITY & PROBLEM-SOLVER ASSERTIVE COMUNICATION

TEAMWORK & COORDINATION

LEANDRO CORDERO

Former architect and current UX Designer oriented by research and User-Centered designs

AGE: 27 LOCATION: Mexico NATIONALITY: Peruvian PHONE: +52 1 442 146 0937

EMAIL: leandro.cordav@gmail.com

KNOWLEDGE

DESIGN SPRINT

SCRUM

BUSINESS MODEL CANVAS

SOFTWARE

DESIGN THINKING

USABILITY TESTS

REPOSITORY: github.com/LeaCorDav

MS OFFICE TRELLO GIT

SLACK

JAVASCRIPT

WORDPRESS PHOTOSHOP ILLUSTRATOR

INDESIGN PREMIERE

FIGMA

HTML BOOTSTRAP CSS (Less-Sass)

DANTE

(2019-2020)

Context & Overview

DANTE was my first startup idea created while completing college and courses about “Entrepreneurship and Startups”.

I started as a solo founder in late 2019 and, in 2020, I partnered with 2 programmers to deliver our MVP.

DANTE was designed as a SaaS B2B2C to help companies and property owners (Clients) to find the best construction workers (“Dantes”) for their needs.

Project Vision

“Transform the contact & hiring process between client and construction/maintenance worker”

Tools

Word, Excel, Ppt

Role & Responsabilities

Founder & UX/UI Designer:

• Researching data

• Defining & prioritizing problems

• Finding possible solutions

• Shaping business model

• Wireframing

• UI design

Slack Trello

Figma & FigJam

Photoshop Illustrator

Research

Benchmark

User Surveys

User interview

Double Diamond Design Process

Analysis

Empathy map

User persona

User Journey

Design

Sketching Paper

Flow Diagrams

Wireframes

Prototype Testing

Ideate

Project Priority

Possible Solution

Production

UI Design

Moodboard

Style Guide

Initially, the biggest challenge, as a marketplace of services, was to find out the best way to create the greatest value for both Users (Clients and Dantes).

Benchmark & Competitor

To understand their need better, I did a research of similar competitors from different countries and wrote a report about:

Jobin (Spain) HomeSolution

√ Easy to post job offers

√ It uses categories and tags to define what service is required

√ It has a mini map to manually locate the place √ They have a payment gateway

...

- Client’s phone number is exposed to the interested workers. Should ask for the client’s prefered via of contact

- Doesn’t allow videos upload

- There’s not a “report worker/client” option

- There’s not a worker’s profile or portfolio

- Fixed comission doesn’t work for chep services

- Lack of contact channels for customer service

...

√ It uses categories and tags to define what service is required

√ They have their own educative blog with construction related topics. It may help for SEO.

√ Workers profile has: skills list, past-jobs photos, platform badges, reference prices, rating and opinions

...

Competitor Analysis

• How does it work?

• What is working good, bad and awfull?

• What does the users say on their reviews?

• Extra features they have and my new proposals

• Unattended business models to investigate

• Common design patterns and Interface improvements

HomeSolution (Argentina) Habitissimo (Spain)

- They have categories but doesn’t describe what involves each category which may led to confusion and errors.

- Tags are not optimized

- Unnecesary features in profiles (e.g. cover photo)and too many text allowed

...

√ Easiest to post job offers. Looks like a survey and the client is fully guided.

√ You can search specifics profiles and contact with them without posting a service

√ Best worker’s portfolio structure

√ They have a forum with clients questions and workers can solve them. It helps creating community and improve hiring opportunities. √ ...

- Client’s phone number in the job offer is obligatory and open to anyone.

- The forum has bad SEO. It could create more leads if solved.

...

User Survey

To get feedback from local people, I created a survey, posted it on sites frequently visited by potential users (such as various Facebook construction groups) and sent it to potential Clients and potential Dantes I knew.

At first, I wanted to know everything about them but something I learnt from that experience is to resume my surveys only focusing in what matters for the task (in this case, my MVP).

This investigation revealed that:

“Dantes” were from 20 to 50 years old (very large gap but it shows that workers can use tech if it represents a revenue for them and interface has to be easy-to-use for older people)

Potencial clients were from 24 to 33 years old (millenials are open to use technology for these kind of tasks)

Most “Dantes” were independent workers and performs different jobs (useful for marketing target and future features)

Most “Dantes” has 2+ years of experience (they have past-job photos to show)

Most “Dantes” doesn’t have a formal education (institutes adversiment as possible revenue and future colaboration with them for other business models)

Potencial clients and “Dantes” prefer to pays or be paid via bank transfer or cash (considered for the business model)

User Interviews

I have met various construction/ maintenance workers due my previous job and I took every chance to have a chat with them and understand their persons better.

I tested an structurated interview for Juan Carlos and an organic interview with Jose Luis. I tried to listen actively and focus in “What he says & How he says it” to go deeper into that interesting data.

• Work experience: 2 years part-time and 9 months full-time.

• Client acquisition method: family, friends and ex-clients recommendations.

• Clients might be strict with deadlines.

• Most required service: Closets and it takes 1-2 week aprox.

• Highest paid job: S/7K gross income for 3 closets in 2 weeks.

• Frequent clients: 4 persons.

• He’s planning to formalize as an enterprise to work for corporate clients and provide factures.

• He knows other construction workers.

• Education: Doesn’t have formal education for his job. He is open to take courses if it’s appealing for him but hadn’t done it yet.

• Clients always require his portfolio.

• Working location: Doesn’t mind.

Link: drive.google.com/file/d/1loovSX1M7AuKP4Q71UVJRn6Ihz4A2R3v/view?usp=sharing

• Work experience: 17 years as employee and 2years as independent.

• Education: Has formal education as Electrician but also learns new skills from short/mid-length courses.

• He works everyday and rest only if there’s no work.

• Working location: Prefers nearby jobs but doesn’t mind if it worths it.

• Most required service: Liquid porcelain jobs and it takes 3-5 days aprox.

• Maximun unemployed time: 2 straight weeks.

• Highest paid job: S/900 net income in 1 week.

• Favourite payment method: bank transfer.

• Work conditions: 20% of the total cost in advance.

• Frequent clients: 0 persons.

• Client acquisition method: Facebook Marketplace and ex-clients recommendations.

• He prefers giving a quote from home (requires measurements and photos/videos)

• Clients always require his portfolio.

• He knows other construction workers and often hires them for specific jobs (S/70 per day + lunch)

Link: drive.google.com/file/d/1eZwmcO8npvqJTQgnirA09FMZIoLKxVBa/view?usp=sharing

Juan Carlos Carpenter & Furniture Designer (Phone Interview)

Jose Luis Electrician, Drywall & Liquid Porcelain Master (Presencial Int.)

Dante

33 y.o. Construction Master Lima, Peru

Married, 2 kids

S/2,400 per month

User Persona

About

Dante is an independent Construction Worker with 15 years of experience who works every needed day per week.

Dante haven’t studied in any institute, he learnt all his skills through years of practice. Although, he likes to stay updated learning from courses. He knows that staying updated provides him more job opportunities. He relys on family/colleagues/ex-clients recomendations and social networks to find new jobs. He’s used to technology at an entry level, mainly for entertainment and work (mainstream social networks and bank apps).

Personality

Thrifty Hard-worker Independent Multitasking

Motivations

• Provide good life conditions to his family

• Being an expert at his craft

• Be his own boss

• Less work uncertainty

Objectives

• Find new jobs easier

• Find better paid jobs

• Establish a construction company

Needs/Barriers

• Doesn’t know a way to reach more clients

• Needs more frequent clients

• Lack of formal education limit his job opportunities

“Being my own boss and having lots of clients are important for me. I want to be recognize for my excellent job.”

How might we provide better job opportunities to Dantes?

How Might We’s

How might we provide all the needed job info to the Dantes?

How might we reduce the search time for Dantes?

Brainstorm

Create jobs marketplace

Jobs mapping

Add key filter per category

Capacitation events open to all Dantes

How might we assure Dantes job quality?

How might we give recognition to Dantes?

Create community features for networking between Dantes

Show key info from listing Investigate key info needed by Dantes and guide Clients to answer while they post

Create Dantes profile with online portfolio and ratings

Online capacitation videos

Create Dantes badges

Show Dantes soft skills tags from ex-clients opinions

“Dante of the month”

Reward their good ratings

+ -

Investigate key info needed by Dantes and guide Clients to answer while they post

Prioritization Matrix

Add key filter per category

Create Dantes profile with online portfolio and ratings

Create jobs marketplace

Show Dantes soft skills tags from ex-clients opinions

Show key info from listing

“Dante of the month” Reward their good ratings

Jobs mapping

Online capacitation videos Create Dantes badges

Capacitation events open to all Dantes

Create community features for networking between Dantes

TECH EFFORT/EXPENSES - +

User Flows

Now, the biggest problem was how to start designing.

As part of the methodology, I came up with User Flows designed for each scenario and each User. I had to iterate some of those with the feedback of my team about user fluency or code efficiency discussed in out meetings.

Sketch

Low-fidelity sketches to diagram the principal functions through the different scenarios and user flows.

Validated and tested with my programming team.

Usability Test: Guerrilla Testing

Before diving into High-Fidelity wireframing, my team and I did some usability tests using the Guerrilla Testing methodology.

We approached possible Clients and possible Dantes with an iPad and Mid-Fidelity Wireframes I prepared similar to the sketches. Using the “Share Prototype” feature of Figma we obtained some valuable feedback on our prototype and workflows.

Outsourcing

While doing the tests, I hired Maryorie Porta - Graphic Designer for the logo design and the color palette.

After some meetings, we finally choose the one that best transmitted our values:

• They needed buttons with more info (e.g. “New” -> “New Offer”, “Pending” -> “Pending Posts”)

• “What is the “Feed” for?”. We explained it and changed the section name to “Recommended Videos”

• Message/Notification functions were in the opposite side. They were used to see those functions in the right side of the screen as they’re used to Facebook interface.

• Clients would like to upload videos of their issue in their post and Dantes would need it to undertand better the problem and give them better estimates. (We take it out that feature in Mid-Fidelity Wireframes due extra cloud storage space needed for MVP, but it seems to be needed)

• ...

Construction Worker - walks through your door - helps you with a smile

Design System

Typography

Monda Bold Headline 1

H1 MONDA BOLD 36px

Headline 2 Headline 2

H2 MONDA REGULAR & BOLD 24px

Headline 3 Headline 3

H3 MONDA REGULAR & BOLD 18px

Headline 4

H4 MONDA BOLD 14px

Paragraph 1

P1 MONDA REGULAR 14px

Paragraph 2

P2 MONDA REGULAR 12px

Buttons Bars

Tabs

Dante Market

Landing Pages

Dante We wanted to test the interest on Dante and Dante Market (another complementary business model)

Short Sign-up Form for clients, deliver and provider

Short Sign-up Form

What can you buy with Dante Market?

Why you should use it? (Benefits)

What kind of services does Dante?

How does it work?

CTA Our Mission and our Story

Map w/ nearby Dantes gives App activity feedback to Clients

Forgot password?

Cover Photo/Video

Notifications: New interested, quote received, reminders...

Active/Saved Posts

New Job Post

Inbox: Shows Post Title & Miniature, Last Message and Seen/Unseen feedback to User

Suggestions for good Title and Description

Attached photos, videos, pdfs and others if User needs to add more info

New Post: Categories

New Post: Info Register Notifications, Inbox & Menu to the right as Interviewed Users are used to

Suggest house reparir/renovation videos to motivate Clients take a service

Menu w/ icons to guide users and highlighted important options (Platform Video Tutorial & “Become a Dante”)

Job Location and Minimap to ensure correct info with User

Max Dantes able to apply before pausing the post. Some Clients just wants 3-5 options to choose

Quote Deadline & Starting Date as some Clients are strict with dates

App

Most Important Job Info: Category, Title, Ubication, Starting Date, Quote Deadline, Max Applications Allowed

Carousel w/ caption for extra info for each attached

New Post: Posted

Carousel of Interested Dantes. Clicking pops up Dante’s portfolio. This helps to choose better between contestants.

Payment Conditions/Execution Time/Extras.

Dantes can explain something else here for clients take it on account Dantes only have to fill info, we structurate it into our templates. Items List + Unit + Price and Total Cost

Acceptance Checkbox to ensure User’s confirmation

Quotation Modal

Users only have to upload info, we structurate it into our templates. Portfolio Template: Title, Date, Multimedia Carrousel, Opinions & Ratings from past-works

Dantes Portfolio Modal

Quotation Acceptance Modal

Last Confirmation Modal before send Client’s contact info to the Selected Dante

Opinion & Rating Modal

Dantes Profile: Overall Rating, Name, Bio, Services Offered

Dante’s clients can qualify them from 0-5 stars, upload multimedia, write a short opinion or report Dante

KNIT

Context & Overview (2021)

In 2022, my very good colleague and I combined our taste for functional physical product designs and created KNIT, a Furniture/Interior Design Studio which was my second entreprenurship.

To positionate us online and create a portfolio, we needed a landing page and I was totally in charge of that task in parallel to my other responsibilities.

Role & Responsabilities

Co-Founder, Architect & UX/UI Designer:

• Information Architecture

• Sitemap & User Flows

• Wireframing & UI design Tools

Prototype Overview

https://www.figma.com/proto/ ziEFDmG9IGmSrNFAICL277/Knit?nodeid=325%3A14&scaling=scale-down&pageid=0%3A1&starting-point-node-id=382%3A352

• CLICK to Scroll Down

• DRAG to Scroll Up

Figma & FigJam Photoshop Illustrator

Prototype

Scrolls to main sections for easy navigation

Miniature expansion to show more info w/o breaking diagramation

Strong words/ phrases to emphasize the message

Miniatures to sneak peek the content

Showing the faces behind the brand creates confidence/ closeness with clients

On click photos maximization allows user take a detailed look of the item

Vertical scrolling helps to fit multiple items into the diagramation

List the steps structurates and guides the user through the process

Cards helps to structurate content and diagram the page better

MY FINANCE

(2022)

Context & Overview

As UX Designer at Creativa Corp, we landed a job for a “personal finance” mobile app as the client was in an early stage of his MVP.

The client’s deadline was 1 week, so we used the Design Sprint methodology to deliver a testeable prototype in 5 days.

Role & Responsabilities

UX/UI Designer:

• User Research

• Sitemap & User Flows

• Wireframing & UI design Tools

Prototype Overview

https://www.figma.com/proto/ hmTroxBWi8h2fzldYF8JYb/My-Finance-App?nodeid=0%3A1&scaling=scale-down&starting-point-nodeid=411%3A757

Figma & FigJam

Photoshop Illustrator

Day 1

Research

• Interviews

• How Might We

• Priorization

• Long-Term Goals

• Critical Questions

• User Journey

Design Sprint Design Process

Day 3

• User Test Flow

• Storyboard

Day 2

Day 4 Ideate

• Benchmark

• Quick Demos

• 4 Steps Ideation

Decide Prototype

• Prototype Structure

• Look & Feel

Interviews

How Might We’s

We started asking and understanding the problems that the proto-user had with their personal finances.

Some of those pain points were:

A lot of time consumed using Excel or similar softwares to manually place their expenses.

They didn’t know how much they could save per moth.

They usually forgive to pay some fixed monthly expenses on time.

They didn’t have a way to quickly overview their investments portfolio

They didn’t have a way to quickly overview important news that affects their investment portfolio

HMW make the expenses input faster/ effortless?

HMW incentivize their saving habits?

HMW help them pay their bills on time?

HMW showcase their portfolio for a quick overview?

HMW inform them about important economic news?

Long-Term Goals User Journey

“Five years from here, this is going to be the main personal finances app for control and analysis of people’s wealth”

Critical Questions

• Can we assure that our system will be easy to use for everyone despite their financial education?

• What is our main differential from other finance control app?

• How are we going to spread the importance of financial education?

Sign-up as new user Fill a short form to know him/her better

Set up his/her fixed expenses/incomes

HMW inform them about important economic news?

“Five years from here, this is going to be the main personal finances app for control and analysis of people’s wealth”

HMW showcase their portfolio for a quick overview?

HMW make the expenses input faster/ effortless?

Daily updates of his/her expenses/ incomes and investments movements

USER Analyze their monthly financial situation?

Can we assure that our system will be easy to use for everyone despite their financial education?

How are we going to spread the importance of financial education?

HMW incentivize their saving habits?

Benchmark Quick Demos

Looked for other solutions outside competitors to learn new ways of doing things.

TradingView

• Different customizable graphs

• Related field news for each investment sector

Some Research to understand what other solutions are already offering and what users might expect from ours.

For this task, I analyzed Finerio, Fintonic y Spendee.

MercadoLibre

• Showing similar/cheaper options could efficientize their finances

Rappi

• Cards with stricking miniatures per category

Car Entretainment System

• Sliding categories inside cards

1. Notes

Took some quick notes of the most important things to remind

4 Steps Ideation

2. Ideas

Sketched some basic ideas that popped up to my mind from the notes Sketched 8 versions for the main screen using past ideas

3. Crazy 8’s

4. Solution

Sketched a possible final solution to take it to wireframes

User Test Flow

A sequence of screens to protype that are the most important steps for the user journey.

• Basic Log In screen with user ID (email or phone) and password

• First Sign Up screen to validate the availability of their login info and filter user that might forgot their login info

• Next Sign Up screens are meant to know the user, set up preferences and fill needed info

Storyboard

Home Analysis

• User can overview all the most important info as a Control Panel

• User can analyze all their info detailed here and make changes in their behavior as needed

• If user reminds that they already have an account, they have the control to go back

Prototype Structure

Some Wireframes to start landing the ideas into a midfidelity framework. Used columns and spacings to diagram the content.

Instructions into placeholders looks cleaner specially in small devices

Sliders provides feedback to Users so they know how many steps are ahead

Header with most important info

Analysis for each field and we can give personalized advices to Users and advertising from our sponsorships using that data

Country prefix feature helps us to structurate the info into database

Footer to navigate between Tabs and current tab icon bigger to showcase which is selected gives feedback to User

Scrollable graphics to showcase their data

Look & Feel

Made some itterations for the final product after a quick usability test.

TORTIRICAS

Using the content material provided and respecting the branding colors, their branding image and provide all the information to their consumers.

Mobile

Context & Overview

As Freelancer, I landed a job for a website for a local food business. The client needed a complete product to posisionate his business into the Search Engine and show a more professional website than what he had.

Role & Responsabilities

(2023) Web Developer:

• Sitemap, Wireframing & UI design

• Web development Tools

https://tortiricas-leandrocordero.netlify.app/ Overview

Wordpress CSS Photoshop Illustrator

colors, I developed a fully responsive website to endorse consumers.

Responsive Web Design Tablet

Leandro Cordero