Getting a website out of old technology trap by a modern & simple solution

Summary

Mission

A complete refresh of design agency’s website to represent their maturity. Convenient, clear, yet jam-packed of new content – this is what me together with the client aimed for.

Outcome

I created a website based on a collaborative visual design & keep the website maintained by adding new content.

I provide the client with statistics and outcomes, so they could maintain their business better & discuss potential changes in the website.

Also, I count a happy client as an outcome as well 💜

Impact

Timeline
January–March 2019
Client
Klaipėda Design Center
„Klaipėdos dizaino centras“
Client
Front-end web developer
Visual designer
UX consulting
Tools
Adobe Photoshop
Adobe Illustrator
Adobe Dreamweaver
Adobe XD
Platform
Bootstrap 4

Testimonials

“Strong focus on results: visual cohesion was implemented & conformed on our feedback.”
Linas Dzimidas
Graphic Designer
“Ben worked very closely with the company’s designer and responsible persons to meet all requirements of us as a client.”
Alvydas Klimas
Agency Co-owner

Problems

  1. Problem #1

    Unresponsive design, ruining usability especially for mobile users, leading to frustration and less leads.

  2. Problem #2

    Clunky questionable design choices such as word clouds, tags or text-heavy pages.

  3. Problem #3

    No clear nudges for the user while browsing the website.

Role

I was hired by the design agency to develop a working website. It was based on a visual collaborative design between a graphic designer & me. There I had a stake in consulting usability & other design factors.

Goal

Building a website from scratch to reflect design agency’s needs & provide potential clients a more efficient browsing experience: convenient, clear, yet jam-packed of new content.

Research

Good questions

My approach is to ask clients good questions that provoke deeper thoughts in a conversation. The result is saved resources such as time & money, by just enabling meaningful problem solving mindset.

I had some questions about the old website version, such as:

  • What is your perspective on the need to redesign the website completely? What are your expectations for the new one?
  • What is your unique selling proposition? How do you see yourself represented through a new website?

The discussions were somewhat complicated, since I was hired for this project in a hurry. Instead of stepping back completely, I tried to adjust to stakeholders’ position and still provide my point of view as a UX professional & front-end developer.

Expert review

An expert review identifies usability problems & stengths. It can also be used to determine quality of visuals & copywriting.

Since it was obvious the site desperately needed a refresh, I did not document the process of reviewing. We did quickly discuss with the client what should definitely not be considered anymore & what could be improved for the new website, based on my observations.

Homepage. Hello, late 2000’s vibe!
About Us. A lot of text, duplicate menus.
Contact. Just a plain contact form.
Advertising space rent. Missing context & clarity what to do. Map widget did not load.
Services sub-page. Content could be presented in a more neat manner.

Summary

  • Lack of responsive design
  • No clear call-to-actions in any of the webpages
  • Generic visual design issues, such as incohesive typography or imagery
  • Questionable features such as word cloud
  • Absence of guiding user to what they want to accomplish with this website
  • Little emphasis on the fact it is a design agency with their own machineryI collected enough data to help establish a design direction together with stakeholders as well as think of first possible development steps.

Secondary website

Klaipėda Design Center had another website, which was focused on showing off museum & exposition projects. Having a second website might be redundant, but everything depends on goals of a business.

It was shut down in the middle of development of the new website. Because of that, I could not derive much research data.

Visit expo-kdc.lt.

Process

Initial mockup

A quick wireframe was made by the graphic designer to kickstart the design process. Already better than the old website, but I provided some feedback (regarding simple aspects of UX), such as:

  • Where the visitor should look at? There are too many focus points.
  • Why there is a additional menu button?
  • Icons for the Services section look neat.
  • Sub-category of Services page looks somewhat promising in terms of hiearchy.

Iterations

There were a couple of more versions created by the graphic designer. In fact, they are pretty close to the final design. Some feedback was considered, but I tried to understand the need why stakeholders and the graphic designer wanted to have a text-heavy homepage.

On the brighter side, the Services page and its content was clear & sleek, just as according to our goals. Details such as gradient use in graphics or amount of text would be discussed later.

The second mockup was already better, but I wanted to provide my flavor of design direction we could go in to completely minify and focus on content. Using Adobe XD I created a quick hi-fi wireframe to provoke a discussion of further content reduction that does not align with goals.

Since I did not hold main stake in visual design – only consulting – I had to be flexible in design decision making. Shortly after, my wireframe was discussed and it sparked some feedback. It has been redacted in illustrations.

Content such as banners or pictures to be used in certain pages & sections, typography, was considered as well before creating first version of the development website.

Most of them were a collaborative process between the graphic designer & me.

Development

This is the main part of the project that I was hired for. Since this website would not be updated often, I opted-in not to use CMS, but rather Bootstrap 4, so users could enjoy a lightning quick browsing experience while I would gain more experience using the framework.

Unfortunately, there was no final & full version to be converted into a real working website, thus the process was somewhat back-and-forth and wildly iterative.

Learnings: It would definitely help to have a final (clickable) prototype of the website for development hand-off. Again, dealing regarding certain solutions or decisions between stakeholders is crucial for running project efficiently.

Result

The first final version of a live website was finally created in less than a month. There were some small iterations done shortly after, as well as adding a sleek, non-intrusive GDPR-compliant cookie notice. Final launch of the website happened in early March 2019.

Always visible phone contact call-to-action
Clear to recognize offered design services
Finding an advertising spot, interactively
Easy to orientate navigation
Responsive & modern-web friendly

Testing

Testing phase for this project was minimal, though a couple of iterations were made.

The website was reviewed by employees of the agency as well as by some stakeholders’ acquitances.

The general result was positive:

  • users liked the visual simplicity, yet retaining Klaipėda Design Center’s easily recognizable visual identity
  • significant reduction in cognitive load compared to previous site – less text, unrelated images or other kind of content.
  • minimal friction due to super fast loading times

Learnings

  • A designer who takes expert position even in broader than design questions benefits the business with eye-opening solutions. Next time, I would try to negotiate certain questions differently & more in-depth.
  • It is crucial to understand that stakeholders might have a completely different way of thinking, even when the client is a suitable fit to work together
  • I highly prefer broader scope projects than just fully taking responsibility over development & some design consultation
  • Webflow would be vastly superior for developing such a website, but there was no budget allocated for that

Let’s connect

Let’s connect

Let’s connect

Ai Email Generator Spark Streamline Icon: https://streamlinehq.com

Write me an email

Get replied within 24 hours
Call to action
Click to copy address
Linkedin Streamline Icon: https://streamlinehq.com

Connect on LinkedIn

Foster meaningful relations
Call to action
Open LinkedIn
Hierarchy 10 Streamline Icon: https://streamlinehq.com

Discover other socials

From hobby activities to thoughts on design, tech, and business
Call to action
Open Linktree
🇱🇹 🇬🇧 🇷🇺 🇳🇱
Languages
Utrecht Area,
The Netherlands
Location