Grangarden_top_3.png

GRANNGÅRDEN

 

Granngården - Crafting an online shopping experience

ROLE: UX Designer
CLIENT: Granngården
MADE IN: The World Loves, 2015
DURATION: 3 months

METHODS: UX Analysis, Wireframes
TOOLS: Axure, Keynote, Excel

 

Granngården has over 100 shops around Sweden, an active online shop and an annual turnover of 1.8 billion Swedish krona. Granngården wanted to update their online shopping experience. In order to do so, I conducted an extensive analysis of their current site, identified the most urgent bottlenecks and redesigned the most crucial parts of the shopping experience. The redesign included desktop and mobile versions of a new navigation, landing page, product category and product pages, a basket, checkout and a store locator. 

Screen Shot 2017-07-10 at 08.24.46.png

Analysing the starting point

The project started with an analysis phase, where the online shop was audited to assess how well does their site correspond to the best practices of interaction design. Four areas were in the focus of the analysis: page structure, content, interactions and the user. As a result over 90 problems were identified within these categories. 

Granngarden_analysis.png

Example finding: Too many choices to get started

Among these finding, it became apparent that their landing page includes a huge number of links. Granngården had twice the number of links in their landing page compared to Amazon.com and other known online stores with an extensive product range. Providing too many links in the first place can confuse the user and prevent them from getting started with the shopping, when the main priority on the landing page should create a simple funnel leading to the product categories.  

Granngarden_desktop.png

Wireframing targeted improvements

In order act upon the findings identified during the analysis new wireframes were made for the most crucial parts of the site. The new wireframes included a new, simplified navigation with a prominent search, new landing page, product category page, product page, basket and checkout. The new design was adjusted for both, mobile and desktop screens. 

Granngarden_Mobile screens.png

Handing over to tech and design

The new designs were validated with the clients technical team before hand over. New visual design was created based on the wireframes and the new views were implemented on the site.