GrainGold — UX that improves the conversion to mobile in the furniture store
Entering the project with GrainGold, we took a bird's-eye view of the entire customer experience and decided to redesign part of the processes. For e-commerce, where 80% of customers buy via mobile devices, in the specific German-Austrian market, it was important above all to present the product precisely.
The main goal of the project was to improve the user experience of the online store, as well as optimize the store for mobile devices. The abundance of product information meant that mobile views were perceived by store users as unreadable and difficult to navigate. We also accompanied the client in the process of implementing product changes and supported cooperation with developers.
It meant changing the purchasing path -starting with the listing, through the product card. We are currently working on improving the shopping cart.
Organizing the interface for consistency and creating a System Design for its components.
Expert UX audit
Construction of information architecture
UX & UI
Product Analytics
D
Deployment support
Context of the project
The company approached us with the task of redesigning the online store, built on the IdoSell platform. GrainGold is a shop that mainly sells beds. We assumed that choosing a bed on the website, is a demanding challenge for the buyer. The bed combines the functions of comfort, style and health, it is also a key visual element of the bedroom, which also affects the quality of sleep. After analyzing the online store and user paths, we noticed that we needed to simplify the shopping process, clearly present the products, be clear about delivery and payment rules, and adapt the store in the mobile version to support conversion in this channel.
Zima has successfully designed a new design for our site that both improves and simplifies the UX of our platform.
Zima UX, UI & Design Strategy worked quickly and on time. The team met with us virtually.
For whom?
Recognize users of language learning applications, their habits and expectations. Who is our persona? Who most often learns the language on the phone?
- analysis and improvement of the purchasing process;
- consistency of information structure; good UX of the mobile site;
- implementation limitations of the platform and how they can be circumvented.
What has been worked out
Information architecture and new navigation (especially the mobile version), which allows you to navigate the store more easily and search for the furniture of your dreams.
New look of the store - the design has been refreshed, modernized, but maintained based on the existing brand identity. We have also built a new and complete Design System.
Facilitate the customer's purchase path: from product search, to product preview and purchase process.
Design process
The design was divided into phases:
The audit covered the navigation of the store, with particular attention to mobile navigation, the path of knowing the products by the customer (product card), the process of searching for the product and its purchase. At the same time, we paid attention to the needs of our client in the context of SEO, supporting in building thematic subpages and copy structure.
Innovation in everyday language learning is necessary
The younger generations are bluntly saying that the traditional method of teaching a language by reading and repeating does not work for them. They need more engaging experiences and a hands-on view of learning. Therefore, when designing the interface in Ailoom, we decided to eliminate unnecessary elements and focus on the conversation itself.
Changes to the product catalog
The first step was to redesign the information architecture and harmonize navigation.
The catalog of the GrainGold store was very extensive and required such a thought out structure so that the user could easily find the item they were looking for. In the desktop version, we focused on ensuring that the division into thematic sections is well reflected in the graphic layer and makes it easy to quickly find the category you are looking for. In the mobile version, however, we opted for a simplified, compact catalog.
Dedicated navigation for mobile version
The UX design involved simplifying the top bar, the so-called header, and changing the display of navigation. In this way, we have gained more space on the screen for the presentation of the product.
The cosmetic changes we made at the top of the screen: (reducing the logo, simplifying the header), gave the user more space to display products.
Taking into account the needs of users and the scheme of their movement on the site, we have developed a concept of the bottom menu on mobile, containing shortcuts to the most desired functions of the store:
- Product catalog
- shopping cart
- Favourite Products
- user accounts
Changes to the product card
When looking for the ideal way to present the product, we took into account that GrainGold's main source of profit is the sale of beds and corners, but the store's offer also includes so-called hard furniture, i.e. cabinets or tables. Therefore, the UX of the mobile site had to be a universal approach to the presentation of the store's assortment.
In the design of the product card view, we had to take into account such challenges:
- small screen space on mobile
- a multitude of details about each product
- different product configuration options depending on the type of furniture and the number of variants
- ease of adding to cart
- transparent display of product prices
Product Configuration
When buying a piece of furniture you need to specify many of its parameters - size, color or material from which it is made. And when buying online, all this must be selected even before adding a piece of furniture to the basket. The challenge arises: how to ensure that users do not get lost in the course of the purchase process and do not abandon the purchase?
To answer this need, first of all, we designed several types of configurators knowing that the process of buying a bed looks different than buying a wardrobe. Each type of product has a dedicated list of items to configure. In addition, we have a clear graphic presentation of the available colors and fabrics. We used icons instead of describing the options to choose from, and thanks to this the interface gained in readability and clarity.
Payment and delivery options have proven to be extremely important to the user
We have repeatedly analyzed and iterated the presentation of this information to investigate which payment version would work best for customers.
Visual redesign of the store
For several years of its existence, GrainGold has developed a brand image that we did not want to drastically change.
In the process of refreshing the design, we focused on its modernization, coherence and improvement of the visibility of the elements. We have also built a Design System, thanks to which it will be easier to maintain visual consistency in the future.
- Refreshed typography and colors
- Design systeem
- Graphic identity of the store
- Presentation of products
Supervision of implementation
When implementing the design, it was necessary on our part to cooperate strongly with the developers in subsequent iterations. We reacted to user behavior, but also to the challenges of working on a ready-made sales platform. We have developed a formula of weekly status meetings and constant communication with the client and the development team.
Our team worked in a design model
![This is what you need to know to make your medtech business work [+UX examples]](https://cdn.prod.website-files.com/665f016b950e89499f580acc/671b831663a2597f47c963f3_Grafika-nr-1_-tytul_-Innowacja-termometra--scaled.webp)
