The Ling's Cars website is a classic example of a terribly designed website according to industry best practices. However, in spite of Ling's peculiar site design, she manages to have a successful business with many seemingly satisfied customers. People even seem to enjoy the site, probably because of the strange and unique character of its contents.
Nevertheless, I set out to understand what made the site successful and what could be improved through employing usability best practices. I began evaluating the Information Architecture in order to determine how the site should be laid out to optimize the user experience.
Then, using Draw.io, I made low-fidelity wire-frames to illustrate how much easier and more pleasant the main tasks that users would need to accomplish could be, which were completing a lease for a new car on desktop and using the site search function on mobile.
For the above screenshot, which represents Ling's new home page, I wanted to prioritize only three main actions that would be crucial to both the user and to Ling, which would help make it much easier for everyone to accomplish their goals. This would still allow plenty of room for her distinctive creative content and design elements while helping focus the user experience.
The buttons are large and inviting and include a clear priority order, with the top button being the most likely selection and the bottom being the least likely of the three. This priority of information architecture is based on my presumptions about Ling's target audience (that most users would want to lease a car but then start browsing rather than jump quickly to a quote), but further user testing and research would provide greater accuracy and insight into these kinds of decisions. Images could be included next to each button for illustration purposes, but would also drive clicks for the more focused users who tend to look for shortcuts and prefer efficiency.
Since this list of brand names would be more inclusive, the buttons are shorter but still clickable. Notice the presence of a page indicator in the form of bread crumbs. This feature assures that users won't be lost in the process of navigating Ling's site, which is more likely when no clues are provided, especially since her site right now is over-decorated and has numerous examples of repetition in terms of navigational elements.
The above is an example of a very basic mobile user experience flow chart or mockup. The reality in design is that quick, usable designs start best with low-fidelity work that gets the most important facts first, like how to efficiently present a prioritized path from beginning to end. This approach reduces road blocks to development that come about by over-focusing on a specific visual design strategy. Leaving the visual aspects for later helps the development team get started sooner with the best and clearest idea of what the user needs, which dramatically reduces costs by focusing on quicker design iteration. Although these designs are very basic, they allow for immediate user testing and feedback for arriving at the best UX much sooner than traditionally possible.
Feel free to jump directly to the next example of my digital work, the Enhanced Portfolio project, which is about this entire website.