.png)
Website Revamp
(School case-study group project)
UI/UX Design |
Front-end web development
About
The website we chose to revamp is for a car leasing company that deals with luxury cars.
The website needs improvement due to its cluttered and overwhelming design. The homepage features distracting elements like flashing banners and auto-playing videos, making it hard for users to focus on products. Additionally, unrelated content and non-resizable images further hinder the user experience.
Key objectives
● Enhance Visual Appeal:
Create an aesthetically pleasing website design to make a strong visual impact.
● Facilitate Information Discovery:
Enable customers to swiftly locate the information they seek, fostering an enjoyable browsing experience and establishing trust as a reliable car listings resource
.● Optimize User Experience:
Ensure the website is user-friendly, with intuitive navigation, for easy car leasing exploration.
● Maintain Consistency:
Provide returning customers with a seamless experience, eliminating the need for re-acquaintance with the site's functionality.
Desired Outcomes
Tools
Voice and Tone
The desired outcome is to provide a website that's both visually appealing and easy to use. It should allow people to quickly browse, compare, apply for, and lease their desired vehicles.
Achieving this means maintaining a consistent design and intuitive navigation. Our aim is to create an impactful first impression and ensure a seamless user experience from start to
finish.
The website currently has an intense visual tone with excessive graphics and pop-ups. We aim to make it more professional, especially for luxury automobiles. The tone will be informative, user-friendly, and trustworthy, focusing on clear and concise language to highlight the benefits of car leasing.
-
Hand sketching low fidelity wireframes
-
Figma
-
HTML5, CSS3, Github
After card sorting and reverse card sorting session with almost 12 candidates we came up with a basic site map.
Card sorting session
Data Analysis
Sitemap
My design Solution
Later we were individually tasked to create a mood-board, Low-fidelity, Mid-fidelity and Hi-fidelity Design solution.
Final Group Solution
Now is the time to have one solution. After carefully reviewing the layouts created by all our team members and conducting market research, we have finalized our project layout. We incorporated several elements that we believe will be suitable for the web page. We utilized a matrix system to vote on basic elements and subsequently generated five designs to choose the color palette, employing a similar decision matrix.
My role and responsibilities in Final Project
We worked collaboratively on the website revamp project.
It was a great experience for me to work with a diverse team. I would call it successful teamwork. More than quantitative work, we as a team worked together QUALITATIVELY for our shared goal.
We all are from diverse cultural, educational, and professional backgrounds. But the shared goal was to make this project successful and I feel we achieved it.
Although we didn’t divide the roles particularly, each one of us took the initiative as per their expertise. As I have a design background I primarily worked on
-
UX design
-
Creating wireframes
-
Prototyping
-
Coding using HTML5 and CSS 3