Project background and requirements

Founded in 2014, Wood Republic is a family run business designing and manufacturing hand-made plywood furniture. They offer a wide range of products and customisations, depending on their customers’ needs. Wood Republic employs a team of ten people and produces furniture for customers from Poland and worldwide. With the business and client base growing, they needed to make their site more robust.

I know the founders of Wood Republic personally, and I have always observed their online presence, website and online shop in particular. As they expand, I was eager to help them improve their customers’ experience.

My role

I worked as a team of one on creating the customer experience and designing the user interface. I built a custom WordPress and WooCommerce theme for Wood Republic, making necessary improvements for the administrators to maintain the site easily. After the main release, we do continuous design and development work.

Challenges

Wood Republic brand colours are black and white. I believed the website could benefit from expanding the colour palette and help users navigate through the site. I searched for inspirations in the company’s products and suggested a new extended colour scheme.

Although the website’s primary language is Polish and a vast majority of customers are from Poland, the business must serve the international markets and satisfy other clients. Hence the importance of the English version of the site. We had to find a WordPress plugin that would translate all content by default and offer the ability to modify if needed.

A large number of sold furniture are personalised items - products designed and manufactured by Wood Republic but with various changes applied (colour, location of shelves and partitions, etc.). The company needed to communicate better about the customisation possibilities to attract more clients and expand their market.

Furthermore, we had to introduce a standard format for displaying product photography to make the website look consistent and to decrease the site loading speed.

“We had the pleasure to work with Magda in creating the Wood Republic website. We received support and a creative approach at every stage. The end result is an intuitive website ideally suited to our company. We recommend working with Magda because it is not only a sensational person but also full of professionalism, patience and flexibility.”

Joanna, Community Manager

The process

Planning

Joanna and Kamila created a list of issues and requirements. It was a mixture of users’ and website administrators’ feedback on using the site, as well as changes that would make the website reflect their business goals and strategy.

Instead of modifying the existing WordPress theme, I convinced them that developing a new one would be the best approach. The previous setup was dependant on large plugins that negatively impacted the site performance. Besides, content for each page and post was created using a page builder. Creating pages for new products was taking a lot of time from the content managers’ daily routine. It could also make it very difficult to manage content if the builder support was dropped for their theme. Futureproof, sustainable websites reduce maintenance and support costs.

I broke down the issues into tasks and set up a Trello board for our design and development work.

Wood Republic wireframes on a mobile device

Pain points

Half of the Wood Republic website’s visits happen on mobile devices. Unfortunately, these users weren’t getting enough attention because the customer experience on touch screens was poor. I adapted the mobile-first approach, enhancing user journeys for larger screens.

Slow page load on the majority of pages resulted in people dropping their sessions. It has a massive impact on how trustworthy is the website. When we are talking about a website that takes users’ contact and payments details, trust is critical in establishing a healthy relationship. This leads to the point that most of the purchases haven’t been completed using the online shop. Although customisations are likely to be discussed via email or phone, shopping for the regular in-stock products should happen using the online store.

The Wood Republic has received feedback from its international clients that although the English translation link was available on the previous site, the content wasn’t served in the desired language. Misleading the customers affects the sales and influences on how people see the company.

Some parts of the text content on the old website was loaded using images. With sluggish page load and graphics delayed appearance, it wasn’t clear instantly what a visited page is about. Not to mention blind people who use screen readers couldn’t get the sense of the content they were trying to access.

On the other site, website administrators, like Joanna and Kamila, were the users who struggle with site maintenance. All content available on the Wood Republic website was added using a page builder. Unfortunately, they are not always intuitive, or at least the way they are set up differs per site. The Wood Republic team found that adding new content regularly was very time-consuming. In a busy workplace like theirs, it was a huge issue.

Branding

The Wood Republic has already been using Lato typeface in their branding, so we decided to keep it.

I was eager to introduce some vivid colours to the company’s dark tone palette. The Wood Republic furniture gave me inspiration. Their wall unit Raj has a combination of mustard and teal colours that complement the black and white shades.

The new colour palette passes accessibility AA contrast check, with dark text on mustard and teal only.

Part of the website update was establishing consistent imagery across the whole website. Joanna dedicated her time to creating product hero images for the desktop and mobile experience. The other product and blog images could use WordPress media crop sizes so we could use the current photographs but in a more uniform manner. I worked closely with the Wood Republic team, consulting them on the image sizes that I recommended for the web.

Iconography has been used by Wood Republic to support their website content. It’s been always accompanied by an explanatory text and also compliments the new updated design.

Wood Republic shop page on a tablet screen

Customer experience and interface design

Joanna and Kamila had a clear idea about what content should go on each page. They also wanted to reuse some of the existing elements which communicated well the company’s mission statement.

Presentation is vital when it comes to online stores. The Wood Republic has been putting an emphasis on its imagery since its very beginnings. Its image resources are fantastic. We chose to give prominence to products and office shots, at the same time providing breathing space to the photographs.

I worked on low fidelity wireframes for general page templates and user interface design for the parts of the website that receive the most traffic.

We agreed to minimise the number of banners with text over the photographs. It can negatively affect site readability. We also admitted that sliders didn’t necessarily serve the purpose if used as default auto-rotating components. They have an option to use either a single banner or a slider with two elements navigated by a user.

WordPress & WooCommerce

The previous Woord Republic website was powered by WordPress and WooCommerce. As they were satisfied with managing their sales online with these tools, there was no desire for an overall change of the site’s software and installation. However, assigning the website design and development job to me meant I need to take apart the former theme and its dependencies and evaluate what is essential for the site to work, or start from scratch if you prefer to call it this way.

We started with changing the hosting provider to the one that’s WordPress focused. It reduces the site maintenance time because they take care of the software updates.

At the same time, I evaluated all the plugins used previously. I usually question what is the user or administrator need to keep them. This approach allows me to maintain the website’s size under control and minimise the possible security flaws. It always poses a higher risk, the more external plugins you have activated.

I used the starter WordPress theme with WooCommerce boilerplate from the Underscores.

Development

Whenever I develop a website from scratch, I take the mobile-first strategy. I believe that targeting small screens from the start teaches us how to deliver company messages more efficiently. With progressive enhancement, we reveal more content as more space is available to use on the screen.

From my experience, developing WordPress themes for the last six years, I have an observation regarding WordPress as a content management system. I noticed that there should be a balance between giving the flexibility to update the site but also restraining the future web administrators from changing whatever they wish (which eventually could make the site ineffective and difficult to use).

Looking at the Wood Republic website from the project’s perspective, there was a need for different page templates to get across the right message depending on the context. I was considering developing custom blocks for new content areas. However, it will involve me writing instructions and recommendations for the Wood Republic team about each element’s location. I was worried that making all blocks available to use at any point will impact the site’s consistency. I was hesitant assigning custom fields (via the Advanced Custom Fields Pro plugin) to page templates, but because the Product edit view in WooCommerce still looks like the old WordPress editor, I decided to take that path.

During the development phase, when Kamila and Joanna were updating products using the new layout and fields, they have already noticed the benefits of not using the previous page builder. They both admitted that the editing process for them as web administrators got quicker and more intuitive.

When I was looking into the translations plugins, WordCamp Bristol 2019 happened. During the event, I had a chat with one of the sponsors, Weglot, who offers fast API website translations. We tested the plugin on our staging environment, and we very pleased that all pieces of text were interpreted by default. Translated content can be modified manually if necessary.

Testing and handover

I’ve tested the site using BrowserStact and the Google web.dev audit app. Any issues that came out were fixed, and we were all pleased with the final results. Through the development process, the Wood Replubic team had access to a staging site where they were able to test the new templates and functionality. Their feedback was addressed regularly, so there were no surprises when they started working on the latest version of the live site.

A website is never a closed chapter. We came to a conclusion to continue on making improvements to the site and plan usability sessions with customers from Poland and abroad.

Stay in touch

Do you need a user experience and interaction designer specialist?

Connect on LinkedIn

Magda Faizov

Wood Republic

Improved customer experience on a furniture shop website