Interactive Design // Project 1

 03/04/2023 - // Week 1 - Week 14

Hasnol Rafiq Bin Hasnol Raduan / 0356767
Information Design / Bachelor of Design (Hons) in Creative Media / Taylor's Design School

---

INSTRUCTIONS

---

TASK:  Landing Page Design Prototype

Our task is to create a landing page for an existing website of our choice that we feel has a design problem. Our landing page will be the first page that visitors see when they arrive at the website, and it is crucial for making a good first impression. Our goal is to design a landing page that improves the user experience and addresses the design issues we have identified on the original website.

I decided to choose the website Lingscars.com, the UK's Craziest Car Leasing Website. Even though the website's unique selling point is to be design in the most unorthodox and unconventional way possible, it sacrifices a lot of design functionality which makes the website hard to follow. 

Figure 1 - Lingscars.com

I've discovered a number of design flaws that may be fixed to improve the website's user experience. There are too many elements competing for the user's attention on the crowded website. Users may find it challenging to browse the site and locate what they're searching for due to the site's overwhelming volume of information provided on a single page. The website's color palette is unappealing and disjointed, which might make it challenging for visitors to read and comprehend the information. Neon color schemes can be overpowering and uncomfortable to the eyes. Due to the fact there is no correct visual hierarchy on the website, it might be challenging for consumers to decide where to look first. There is no obvious hierarchy of priority for the design components on the website, which might cause confusion and disorientation. Users may have a hard time locating the information they want on the website due to its poor navigation. Confusion and dissatisfaction may result from the navigation menu's difficulty of use and the unclear labelling of the links.

    

Figure 2 -  Reference Websites (en.manayerbamate.com, drinkolipop.com, eat-curious.com)

I believe I can enhance the user experience of Lingscars.com and make it more aesthetically pleasing and user-friendly by resolving these design concerns. To help with that I looked at three websites that I believed were best in helping implement Ling's personality into the website but still keep its functionality.   

Figure 3 - Wireframes

I started by developing low-fidelity wireframes to aid in organising and planning the layout of the interface. In order to keep the brand's distinctive identity for my first wireframe design, I experimented with various curves and forms while getting inspiration from drinkolipop.com. To establish a deeper business-consumer relationship, the design included a header with pictures of Ling's automobiles and of Ling herself. As the reader scrolled down, they learned more about Ling. In order to establish credibility and trust, the wireframe also included a selection of automobiles that consumers could browse through and customer reviews.

I kept the same information structure in my second wireframe but concentrated on adding more captivating graphics to draw consumers in. The "Customer's Response" and "Dragon's Den" parts, which I considered to be insufficient enough to deserve separate sections, were combined. To provide more structure and unify the design, I got rid of the round elements.

In my third wireframe, I tried out a different strategy by attempting to have the website flow naturally rather than segmenting it. To make customers feel as they need make a purchase, I included additional automobile photos for them to browse. I switched the "Customer Response" and "Dragon's Den" parts because I thought viewers would be more interested in the brand's appearance on television.

My final wireframe, composed of the second and third wireframes, featured a solid selection of pictures and parts that flowed together nicely. In practically every area, I added automobile images for customers to look through, subtly reminding them that this was a website for car leasing. By using these wireframes, I hoped to improve Lingscars.com's user experience while preserving the distinctive character of the company.

Figure 4 - Landing Page Before Feedback

I created a wireframe to redesign Lingscars.com, incorporating elements from a second wireframe, including the use of images. The primary reason for choosing the first wireframe was that it effectively showcased Ling's personality while maintaining a structured and functional layout. In terms of typography, I utilized two main fonts: Oswald and Hipsters Rounded (a free font on Dafont.com). Hipster Rounded is a decorative typeface that reflects Ling's Cars, while Oswald is a simple font for easy readability. To create a cohesive design, I drew the color scheme from the header pattern. I also included a catchy pattern in the header to draw attention to the page and reflect the original website's border patterns.

As Lingscars.com does not have a logo, I placed the website name in the top left corner. To encourage users to browse and lease cars, I added a single CTA button. To prevent overwhelming readers, I only included the option to browse cars in a singular section.

The redesigned page presents concise information that gets straight to the point, with a CTA button to entice readers to lease a car or learn more about Ling. Throughout the page, I added various images of Ling to maintain the personality of the brand.

The goal of this redesign was to create a more effective means of communicating with a playful design while minimizing the overwhelming information on the original website.

Figure 5 - Final Landing Page

After receiving feedback from Mr. Shamsul, I realized that my original landing page design was not entirely suitable for a car leasing website. To address this issue, I made a few changes to the layout and design elements. Firstly, I removed any patterns that were too loud or distracting, as they did not align with the professional and functional nature of a car leasing website. Additionally, I replaced the font used on the landing page with Righteous, as it achieves the same playful and approachable effect as Hipster Rounded but in a more polished and professional manner.

Another issue identified in the original design was the inclusion of randomly placed photos of Ling, which were too distracting and not relevant to the purpose of the website. To address this, I removed the photos and instead focused on improving the content that would be most useful to potential car leasers.

I replaced the 'About Ling' section with a 'How It Works' section, which would provide a clear and concise explanation of the process of leasing a car through Ling's Cars. This would help potential customers understand the benefits and advantages of leasing from Ling, and ultimately build trust.

Finally, I improved the 'Customer Response' section by including actual comments from satisfied customers. This would help to build trust and credibility with potential customers by demonstrating the positive experiences of others who have used the service.

Overall, these changes were made with the goal of creating a more functional and effective landing page that would effectively communicate the benefits of leasing a car through Ling's Cars, while also reflecting the company's playful and approachable personality.

---

REFLECTION

Learning the fundamentals of a landing page proved to be fairly difficult at first. I was able to comprehend the different parts of a landing page, such as the header, body, footer, call-to-action buttons, and graphics, though, as I kept learning and practicing. Knowing these elements made it easier for me to create a useful landing page that is not only aesthetically pleasing but also simple to use. My awareness of the significance of designing for usability and user experience has improved. This means creating designs that are user-friendly and intuitive in addition to being aesthetically pleasing.