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.
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.
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.
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.
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.