Juan Rodriguez
Juan is a UX designer & Web developer who loves to create beautiful and functional digital experiences.
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.
- 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.
Starting the design
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.
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.
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.
Refining the design
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.
High-fidelity prototype
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
-
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.
-
Process
The current website was not organized correctly, which made it hard to contact Alisha.
-
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.
- 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
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.
- 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
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!