Lille Vinkel Sko

TEAM PROJECTSHIPPED 2020

As the In-house designer for Lille Vinkel Sko, I developed the visual design of their new ecommerce website. This was done together with an outsourced UX designer and team of developers.

The problem

As the longest running online shoe retail store in Norway, the time for LVS to update their website CMS from Drupal 7 to 8 had come, and with it the website also needed an upgrade in terms of usability and visuals. While the agency hired usually worked with templates for their ecommerce customers, I was able to take on the task of improving the UI to better represent the brand of the company.

My role

My responsibility was to bring the brand identity to the new site, and make sure the design spoke to the costumer base as well as the stakeholders. Adobe XD was used collaboratively.

Problem areas and solutions


Front page

Previous design

The original website design lacked flexibility in how the company could set up their banners. Often text would be added to jpg files, which was not accessible.

The header had a lot going on and was hard to navigate, with outdated links to facebook page.
Mobile
Desktop

Click to zoom ︎

New design

Drupal 8 allowed for adding buttons and text on banner images, making the banners more inviting and the site more accessible.

The header highlights the search bar, as users were shown to often search more than they navigate though categories. Profile and cart is simply linked with icons, and the hamburger menu is used both on mobile and desktop.

There was a focus on making the desktop version look more like the mobile, as 75% of visitors were shown to access the site on mobile.

Mobile
Desktop

Product page

Previous design

The product page was highlighted as one of the most important pages in the re-design project, as it had quite a few problem points.

The images on the mobile version were set up as a carousell, with no overview of all images.

The size availability would only be visible when user clicks and selects size in a dropdown menu.

The description of the shoes were long and hard to skim for information.

Mobile
Desktop
New design

In the new design the user can see all images at once.

Size selection is changed from dropdown to buttons, where the size not available is disabled.

The hiearchy of the product description is improved by breaking it down in sections. Shipping and return information is also added to an accordion underneath the description. This way the user will be able to read all they need to know before adding to cart.

The add to cart CTA stands more out in the new design, because it is the only highlighted color on the page, unlike the previous design.
Mobile
Desktop

Updated header

After the new website design shipped, there were many design updates that were added to the backlog, one of which was a new header.

Costumers expressed the wish to access catergories quick, and the buttons that were originally added under the top banner on the homepage were not noticable enough. Therefore the design of the header was changed to give better access, however this design has yet to ship.


Reflections


Because of time constraints, this project was rushed, with no budget for testing. As a result, several things were added in the already full backlog after launch. The project was also victim to covid complications as some had their working hours cut because of the lockdown. 

Overall, we did mange to improve the visual design and usability of the website. This new design will also bring in new costumers more easilyas it looks and feels more like a website you can trust, and follows design conventions of similar sites.