Year
Overseen by
Jon-Erik-Andreassen
2021
LingsCars
Web, Flowcharts, Informational Architecture, Wireframes, Design, User Interface
As part of my final University project, I chose a website and redesigned it using UX/ UI thinking to create a user centric experience. This is my case study for the project. LingsCars is an infamously poorly designed automobile leasing website based in England. The website is equally about Ling than it is cars and I wanted to create a design that would still capture her personality without disrupting the user journey of leasing a car.
The Problem
The goal of the project was to take a pre-existing design and improve the UI by using rules from Steve Krug’s book “Don’t make me think”, working on the aesthetic and structure, changing the informational architecture and working on the branding. For each of the steps I would progressively create new UI designs improving on the last.
The website I chose to redesign was LingsCars.com due to its wacky and quirky nature, whilst needing a lot of improvement in prioritising user needs.
Redefining the flow
Original Flow
One of the key problems with Lings Cars is the weird user flow, and how easily someone can get lost in the website due to its poor structure. After mapping out the original flow, I got an understanding on how nonsensical a lot of the pages seem, and without sorting them into categories it makes the site confusing. Another problem was the amount of unnecessary steps it takes to go from looking for a car to leasing it. Finding a car should be much quicker and easier.
New Flow
Improving on the original, I began categorizing pages as 'car pages', 'articles' and 'entertainment'. This helped clean a lot of repetition and makes the site easier to understand. I also introduced a profile feature which lets users enter information only once and allows for easier communication with Ling.
Informational Architecture
Informational Hierarchy
One of the biggest problems with LingsCars is how disorganised the information is on each page and there is no emphasis on good hierarchy making navigating each page a chore. By prioritising certain bits of information over others, I would be able to make the site a lot more navigable without compromising on any of the information. This is the hierarchy I applied to the home page.
Home page
Cars page
Cars page
Article Page
Car details page
Wireframes
After interviewing people and understanding what people prioritise on a car leasing website, I was able to organise the informational architecture and generate wireframes. This would help me when generating different visual styles for the website
Visual Exploration
Design
Capturing Ling's Personality
Whilst I've created some wireframes and sorted through the information to make it far more usable, an aspect that I haven't concentrated on is the branding. Ling's unique, quirky and fantastical personality shines through the site making it very unique. This personality is partially what makes the website so famous. I want t use design to capture this quirky nature, and not make the site look like every other car leasing website out there.
Colour
I wanted to bring more of a vibrancy to the colour scheme as oppose to just having a single primary colour.
Typography
Using google fonts will save loading time. I chose these fonts based on how quirky but legible they are. The all work together harmoniously to replicate a similar atmosphere as LingsCars, whilst maintaining good legibility and hierarchy.
illustrations
With the branding I wanted to capture the chaotic and quirky nature of the site without compromising the informational architecture and hierarchy.
Logo
After coming up with the branding I was able to start I was looking through variations and included the logos with the typeface. I explored many different options and managed to narrow it down. I decided to create a big and smaller version of the same logo, making it adaptable for different platforms.
Final UI
Next Project
Serene
Serene is a mental health platform with meditation, mental health journaling and articles all in one. This project was the summation of all the skills and techniques I'd gained throughout my multimedia degree. Combining that with my UX/UI skills from design this project marries both my creative and technical skills.