LSH Auto: Website Enhancement
Client
LSH Auto International Limited.
Date
March - May 2018
Role
Solo UX designer working with 2 stakeholders
UI Tools
Illustrator | Photoshop | Sketch
LSH Auto International is one of the world’s largest premium automobile dealer groups, and one of the world’s largest dealer groups for Mercedes-Benz Cars. Back in March 2019 they approached us with the intention to revamp their current landing page’s banner to be able to display live news data, adding a “contact us” section within the each page’s content, as well as revamping their media page to align with other branches’ more modern style. By the end of May 2019 the website’s landing page and the News page were revamped through analysing existing websites and back and forth with the stakeholders.
Design Process
My first step was to identify the business goal, customers and potential new features with the stakeholders. Then, I did a research on the website and stakeholders to gain more insights. After having the needed information, I iterated on 4 rounds of design and finally delivered the project.
Research
Identifying User Goals and Translation to Functions
After discussing the scope of the project with the stakeholders, there were three additional features to the current website indentified as follow:
Update Landing page banner to support dynamic news
As the current website’s landing page banner would only support static images with a fixed slogan, the client would like to redesign the top banner to be able to dynamically display news from the “media” page as well as being able to play videos, allowing the user to be more engaged with the website by receiving daily updates to the company news.
Additional “Contact Us“ Section within page content
Currently the links to the company’s LinkedIn and Email are only featured on the header and footer of the website. However, in order to increase the user’s traction and subscription rate to the website’s newsletter, an additional “contact us“ section could be inserted to various page within the website’s content area.
Revamped “News” Page design
As the current website’s news page only offers a simplistic time/date filtering options and a continuous scroll news entry without any methods to quickly access the users’ desired article (i.e. the article takes up way to much space and could not be collapsed/expanded), the revamped “News“ page would feature a more refined filtering feature, an overview of the news entries in the form of grids with thumbnail and description, and a separate article page for each news entry to fully display its content.
Early Iterations
Landing Page + Social Media Wall
The redesigned top banner on the landing page would support a dynamic section that would show the daily featured news on the left hand side of the banner, while the company slogan would be kept on the right hand side of the banner.
The initial iteration of the landing page would also support a social media update feed section that not only projects the latest news on other region’s branches, but also features any social media updates on the respective platforms. However, as implementing the social media wall would be out of scope of the project, the social media feed would be scrapped from the current phase of the project.
The landing page have also seen multiple iterations to refine the top banner to be more simplified as well as making the header more matching to the company’s branding.
“Contact Us” Mid Page Section
It was decided while designing the “contact us“ section that it would be better to place it in the middle on the page before reaching the end of the page but not too close to the footer, in order to increase the likelihood of the user subscribing to the website newsletter.
As the design progresses, the frame for the “contact us” section within the home page is refined to a slanted paralellogram to blend perfectly with the shape of the slope on top and below the contact us section. The content within the frame was also refined to only show the link to LinkedIn and Email link.
Revamped “News” Page Landing
For the “News” page, in the initial phase I have came up with two separate style:
Grid view - Full width featured news, and news entries are arranged in grids (Details will be revealed when hovering over it). The filters were placed above the grids, and the “contact us“ section was placed below the news entry grids.
Grid view - 3 featured news placed in grids, and news entries are arranged in list of cards (Details are displayed directly within card and the card would be highlighted when hovering over). The filters were placed on the right of the list, and the “contact us“ section was placed below the filters.
Ultimately, the stakeholders have chosen the grid view over the the list view because it offers more freedom to the user to freely choose the amount of items shown in the page, as well as a more simplified layout as a whole.
Article Page
Within the news article page page, in the initial phase I have came up with two styles:
Single Column - The article content are arranged to fill the full width of the screen, and other related articles as well as “contact us“ block would be placed below the article content.
Double Column - The article content are placed on the left column, taking up most of the screen content, while other related articles as well as “contact us“ block would be placed on the right column.
For the finalised version, the single column approach was used in order to maximize the content’s coverage as well as focuses the user’s attention to the content instead of diverging their attention.
Final Deliverable
Web
Responsive Design
