Lifeline Extended Website
- UX UI Design / Responsive Website Design
Project Objective
Lifeline Extended, an auto service company, is creating its own website to showcase its values and services. They want the website to be attractive and align with their dedication to quality automotive solutions. The goal is to have a platform that reflects their expertise and customer-focused approach while attracting both current and new customers. This project highlights their commitment to blending mechanical excellence with digital innovation for a strong online presence.
Sitemap & Ideas
I've had multiple meetings with the company's stakeholders and teams to collaboratively determine the website's structure. After discussions, I've presented them with a clear site map outlining the layout of the website.
Mood Board and Ideation
Following discussions with the marketing team and the company founder, we have finalized the color palette, typography, and design style. For the website design, I'm planning to incorporate full-width images and videos, adhering to a dark theme to achieve the desired look and feel.
Challenges I Encountered During the Design Process
The project was originally expected to be completed within three months. However, due to a shortage of labor, the company couldn't provide me with enough content to build the website. As a result, the project was delayed... :(
After discussing with the stakeholders and company founder to maintain the project's direction, I proposed collaborating with their marketing team to design the pages incrementally, rather than receiving all the content at once.
.png)
Wireframes (First Draft)
During our meeting, I sketched out the initial low-fidelity wireframes on paper and subsequently completed the first draft of the design. To address content-related concerns, I temporarily used random images and lorem ipsum text to fill in the placeholders.
During our meeting, I sketched out the initial low-fidelity wireframes on paper and subsequently completed the first draft of the design. To address content-related concerns, I temporarily used random images and lorem ipsum text to fill in the placeholders.
Iterations
I held a meeting with the company owner and marketing team to assess the design. They provided several pieces of feedback as follows:
-
"We're still more interested in a dark theme design; could you explore using a black color scheme?"
-
"Perhaps we could incorporate additional sections on the appearance and service pages. You might need to consider adjusting the layout of these sections..."
-
"We're interested in featuring testimonials on the home page."
-
"Due to client feedback, we need to ensure responsiveness for both tablet and mobile versions."
Dark Theme
Using dark blue color to replace the white background.
Putting Extra Pages...
Taking into account the new requirements, I restructured the navigation and page layout accordingly. I'm pleased to share that the company founder expressed satisfaction with the suggestions I put forward.
Testimonials
In place of using images and text, I proposed the idea of incorporating videos as testimonials for the company.
Final Design
