Juan Rodriguez

Juan is a UX designer & Web developer who loves to create beautiful and functional digital experiences.

Case Studies

QuietCool Landing Page Case Study

The product:

This is a landing page design that was built for PPC purposes, which targets people who are searching for a whole house fan to save money on their monthly bills.

Project duration:

The duration for this project was a week.

Project Overview

The Problem:

The current landing page has many errors. It lacks a responsive design, Accessible & ADA Compliance, and information architecture.

The Goal:

My goal is to create a fully accessible, beautiful, and responsive design that effectively structures and presents the content in a way that facilitates desirable outcomes for both the user and the business.

My Role:

Lead web developer / UX designer

Responsabilities:

  • Research

  • Design a fully accessible responsive design

  • Develope the landing page for deployment

Understanding the user

User Research : Summary

My first step was to interview several people from different departments to get their perspectives on how the content made them feel. After, I asked if it was easy to understand the information provided by the company. From there, I was able to start creating some wireframes and content needed for the landing page. By interviewing different people I was able to create a more inclusive design that would help the user have a great experience while navigating the landing page.

User research: pain points

  • Information

    Not having the information organized on the landing page can cause the user to leave the landing page.

  • Process

    The landing page does not contain a defined area where the user can have the option to submit a free quote form.

  • Not Responsive

    By not having a responsive design, the user might not be able to view the content correctly from the landing page.

  • Support

    The user might not feel supported if the landing page does not contain the correct contact information necessary to call the dealer in case of any questions might come up.

Persona: Ted

Problem statement:

Ted is a homeowner who would like to save money on his electricity bill because he uses his AC unit a lot during the summer. He is searching for a better solution to his problem.

Persona User Image
  • Age: 50 years old
  • Education: Associates Degree
  • Hometown: San Diego
  • Family: Single
  • Occupation: Sales Associate

"Life is short, live it to the fullest!"

Goals

  • Save money
  • Help Family Members
  • Pay home

Frustations

  • Having to pay for unnessesary bills
  • Not having the right information about a subject

Bio:

Ted is a person who is outgoing and loves to help family members when they are in need. Ted enjoys saving money in any way he can. When Ted is interested in a saving money he wants to have definitive information that is going to help him achieve that.

User Journey Map:

1. View Website on a device

Task List:

  • Use the closest device like a phone.
  • Open the browser
  • Search about Whole house fans

Emotional Adjectives:

  • Worried
  • Excited

Improvement Oportunities

  • Make sure my device has enough battery.

2. Click on the dealer’s Ad

Task List:

  • Click on the top first ad.
  • Make sure it's the closest dealer for me.

Emotional Adjectives:

  • Confused
  • Lost

Improvement Oportunities

  • Be prepared to be confused because I don’t know anything about the subject.

3. Get more information about the product

Task List:

  • Make sure that they’re a reliable dealer.
  • Check if the company is bonded.
  • Check the benefits.

Emotional Adjectives:

  • Focus
  • Worried

Improvement Oportunities

  • More information about the company itself.

4. Check pricing

Task List:

  • Make sure that they have the lowest prices.
  • Make sure the prices are well displayed.
  • Check if they have any type of promotion.

Emotional Adjectives:

  • Hopeful
  • Worried

Improvement Oportunities

  • Do a full search on how many other dealers are in my area to compare prices.

5. Request a quote

Task List:

  • Make sure that the website has SSL protection.
  • Check what the company does with my information before submitting information.
  • Fill in the information need to get a quote.

Emotional Adjectives:

  • Excited
  • Worried

Improvement Oportunities

  • Check reviews about the company before committing to talk to the dealer.

Digital Wireframes

Creating a clean design allows the user to browse with confidence, and builds trust between the user and the owner of the website.

This is a wireframe design with a phone

Low-fidelity prototype

By having a low-fidelity prototype, the project team can preview how the design of the landing page might look. Also, this would be the perfect time to obtain any suggestions from the team before designing the mockups.

This is a low-fidelity design with a phone

Usability study: findings

A usability study helped me take notes on how the user was taking in the information displayed on the landing page. By doing a usability study, I was able to go back into the design and make adjustments accordingly to the findings.

Round 1 findings

  • 1. The user did not have an option to submit a request form at the bottom of the page.
  • 2. The user wasn't able to call the dealer if they had more questions.
  • 3. The form fields from the request form had specific questions needed to submit the form. The user didn't have the information necessary to complete the form.

Round 2 findings

  • 1. Some of the content was not displaying correctly on the landing page.

Mockups

After conducting the usability study, I went back to the notes I took from the usability study. I noticed that most users agreed that it was unnecessary to fill out the square foot information and the story type. The user felt that the dealer would be asking those questions during the follow-up call. After reading all the suggestions, I when to the fidelity design and made the changes.

This is the horizontal mockup image This is the vertical mockup image

High-fidelity prototype

Figma Link

High fidelity mockup gif

Alisha Meyer Case Study

https://birthcultivated.com/

The product:

This website is an informational website that shows the services that a Midwife offers and performs upon services. Also, this website displays all design aspects, from being mobile-friendly to experiencing a better way to navigate throughout the website.

Project duration:

The duration for this project was a couple of weeks

Project Overview

The Problem:

The previous design for the website was outdated, and the responsive design Accessibility & ADA compliance were not present. The user was not having a good experience while navigating through the website.

The Goal:

The goal for this website was to create a more presentable design that would show the character of the midwife and what she is trying to present as information for her future clients.

My Role:

Lead web developer / UX designer

Responsabilities:

  • Research

  • Design a fully accessible responsive design

  • Develope the Website for deployment

  • Design part of the Logo

Understanding the user

User Research : Summary

Having a conversation with Alisha, she explained that the style of her current website was a little outdated and that she wanted to start having more marketing for her services and wanted to redesign her website. I decided to do some research on color schemes and gather ideas on what gives a warm and inviting feel to that type of content. With all the information gathered from my research on color schemes to layouts, I was ready to start designing and send design ideas to Alisha.

User research: pain points

  • This is an information Icon

    Information

    There was great information content on the website but was not layout correctly, this made it hard for the user to read her services, medical information, and recipes.

  • This is a progress Icon

    Process

    The current website was not organized correctly, which made it hard to contact Alisha.

  • This is an Icon showing a responsive device

    Not Responsive

    The images on the current website would go out of frame, which was making it hard for the user to view the content and receive the right information that Alisha was trying to provide to the user.

Persona: Nancy

Problem statement:

Nancy is encountering issues with not finding a website that is trustworthy and that it shows all information without having to dig deep into hidden links on their website.

Persona User Image
  • Age: 35 years old
  • Education: Master's Degree
  • Hometown: Murrieta, CA
  • Family: Married
  • Occupation: Stay at Home Mom

"Enjoy the time, enjoy your kids time fly by fast."

Goals

  • Home School
  • To give birth at home
  • Save as much money posible

Frustations

  • Not have straight forward information about home births.
  • Being scared about Covid-19 while being pregnant.

Bio:

Nancy is a mother of 2 with a third child coming on the way. She is looking for alternative options for giving birth to her last child. She would like to explore the possibilities of having her child at home.

User Journey Map:

1. Research

Task List:

  • Browse on google
  • Search for at home births

Emotional Adjectives:

  • Open Minded
  • Excited

Improvement Oportunities

  • Come prepared to know it will be a long research.

2. Select Website

Task List:

  • Click on birthcultivated.com
  • Read about the midwife

Emotional Adjectives:

  • Confused
  • Exited

Improvement Oportunities

  • None

3. Credibility

Task List:

  • Click on testimonials
  • Check for real customers
  • Check the Midwife's process

Emotional Adjectives:

  • Focus
  • Hopeful

Improvement Oportunities

  • None

4. Check pricing

Task List:

  • View packages available
  • Check the price
  • Select a package

Emotional Adjectives:

  • Hopeful
  • Happy

Improvement Oportunities

  • Check on outside reviews as well.

5. Request service / contact

Task List:

  • Click on contact us
  • Fill out the contact form
  • Call after filling out the form

Emotional Adjectives:

  • Excited
  • Happy

Improvement Oportunities

  • None

Website Design

Website Link

Full Website Design gif

August Oak Woodworks

augustoakwoodworks.com

The product:

August Oak Woodworks is a local cabenetry comapny that reached out to me to revamp their website and make it more modern and responsive.

Project duration:

The duration for this project was a couple of weeks

Project Overview

The Problem:

The previous website that August Oak Woodworks had was functional, but it lacked Affordance, and it needed a more Information Architecture design. These issues were a factor in why the owner of August Oaks needed a new revamp of their website.

The Goal:

By creating a more accessible user-centered design, the user will have a better experience with the website. The user will be able to view all content with a more adaptive layout.

My Role:

Lead Web Developer / UX designer

Responsabilities:

  • Research

  • Design a fully accessible responsive design

  • Develope the Website for deployment

Understanding the user

User Research : Summary

My research started by looking at what August Oak Woodworks stood for, and this helped me have a better idea of what kind of design I needed to create. August Oak Woodworks is a family-owned local cabinetry company, and it wanted to have a hybrid feel of a small but mid-size company website. I started comparing the local competition designs and layouts. I realized that they all had straightforward website layouts, which helped them have a better click rate and closing when getting a quote for service. Once I had the needed information from my research, I was able to send designs to the owner of August Oak Woodworks.

User research: pain points

  • Information

    The information displayed in the previous design had minimal information on what services the company offered to the customers.

  • Process

    When the customer would request a quote from the website led to confusion because the customer didn't know the type of services August Oak Woodworks provided.

  • Not Responsive

    The website lacked a responsive design, which made the experience more challenging for the user to view the content correctly on their mobile devices.

Persona: Jessica

Problem statement:

Jessica has been trying to have a local woodworking company build cabinets for the kitchen and other projects for the house, but she hasn't found a trustworthy company with great prices and great designs.

Persona User Image
  • Age: 50 years old
  • Education: Associates Degree
  • Hometown: San Diego
  • Family: Single
  • Occupation: Sales Associate

"Don't go broke when you're trying to look rich."

Goals

  • Save money
  • Learn German
  • Live a healthy life

Frustations

  • Having to pay for expensive things that shouldn't cost a lot.
  • Not having a good website to browse in 2022.

Bio:

Jessica is a fashionista that loves to save money by buying reusable or restorable items. Jessica has two children and is happily married to her husband of 10 years. Her hobbies are photography and trying new restaurants around her community.

User Journey Map:

1. Research local woodworking stablishments

Task List:

  • Ads from the mail
  • Browse the local options
  • Choose a company

Emotional Adjectives:

  • Hopeful
  • Excited

Improvement Oportunities

  • Maybe have a QR Code on Mail ads to make it easier for the customer to visit their website.

2. Browse in the company's website.

Task List:

  • Look at August Oak Woodworks porfolio
  • Compare her style with theirs.

Emotional Adjectives:

  • Excited
  • Stressed

Improvement Oportunities

  • Make sure the images are separated by categories.

3. Testimonials

Task List:

  • Look for current testimonials on the navigation section.
  • Browse their rating on their testimonials.
  • Click on outside testimonials company icons.

Emotional Adjectives:

  • Focus
  • Happy

Improvement Oportunities

  • I have a clear structure on what companies have their testimonials. It seemed like the links were broken or not connecting correctly.

4. Contact company

Task List:

  • Clicked on the contact us link on the navigation tab.
  • Fill out the form provided on the website.
  • Look for other types of contact on the website.

Emotional Adjectives:

  • Hopeful
  • Focused

Improvement Oportunities

  • Have a message giving an expatation on when the customer will be contact with some information on their form submitted.

Website Design

Website Link

Nutfrusion

Nutfrusion.com

The product:

This website is an informational website that shows the services that a Midwife offers and performs upon services. Also, this website displays all design aspects, from being mobile-friendly to experiencing a better way to navigate throughout the website.

Project duration:

The duration for this project was a couple of weeks

Project Overview

The Problem:

The previous design for the website was outdated, and the responsive design Accessibility & ADA compliance were not present. The user was not having a good experience while navigating through the website.

The Goal:

The goal for this website was to create a more presentable design that would show the character of the midwife and what she is trying to present as information for her future clients.

My Role:

Lead web developer / UX designer

Responsabilities:

  • Research

  • Design a fully accessible responsive design

  • Develope the Website for deployment

  • Design part of the Logo

Understanding the user

User Research : Summary

My first step was to interview several people from different departments to get their perspectives on how the content made them feel. After, I asked if it was easy to understand the information provided by the company. From there, I was able to start creating some wireframes and content needed for the landing page. By interviewing different people I was able to create a more inclusive design that would help the user have a great experience while navigating the landing page.

About Me!

Hi ✌️ my name is Juan,

I have five years of experience in web development, using HTML5, CSS, Javascript, PHP, and MySQL. 👨‍💻 I enjoy designing gorgeous & responsive web apps with UX design analysis workflows. I'm currently obtaining Google's Certification in UX Design, and I'm excited to start working in the field of UX/UI design.

Interests

I love to record music 🎶 in my spare time, learning new technologies and photography when the sun is out. Right now, I'm learning React JS to create versatile web apps and use UX design to get the best experience for the user. I also like to play and watch soccer ⚽ with friends and family. Go, Barça!!!

Contact me

Let's get to know eachother. Leave me a message and I'll get back to you as soon as possible!