5 Key Elements of Website Redesign Process

OH! Design Studio launched redesigned website of Spacio, a real estate consultancy firm in India.

When this client approached us for website redesign and online marketing, their previous website was just over a year old. But the client had realized that the old brand just didn’t fit anymore –first signal that this website redesign was primarily for branding, not just for aesthetics makeover.

I’d like to share some aspects of website (re)design process for the purpose of brand building, which I think helped us bring out the brand character of Spacio on its new website.

1. Brand Strategy

Spacio did not approach OH! Design Studio for branding but for website design and digital marketing, yet we walked them through a brand process to find answers to questions like

  • Who are they?
  • What do they do?
  • For whom do they exist?
  • What is it that makes them different in Mumbai’s cluttered real estate market?

There were many one-on-one conversations and group brainstorming sessions with key stakeholders in client’s office. We developed buyer persona to better understand their target market and customer profile.

It did take time and patience, but an investment worth making.


How brand strategy improves website design process?

Easier decision making throughout the design process about site look and feel, content, navigation, types of images, etc. When in doubt, simply ask yourself if this element will support the intended brand image or would go against it.


2. Website Redesign Objective

When companies take up the task of redesigning their website, it’s always interesting to hear out their list of why they want a new interface. “Dependency on technical team to update content”, “dull / unprofessional look and feel” & “difficult to find information” are some very commonly described website challenges that I come across.

We reframed our question and asked our client:

“What brand perception do you want to create in your prospective customer’s mind through this website and what action do you want her to take on the site?”

For Spacio, if we had started with UI design right away, we would have probably ended up making it look like a typical property listing website, which was not in sync with the site objectives.


Why looking at the bigger picture helps when defining website objectives?

Website is a crucial marketing tool for every for profit and not-for profit organization. Website objective must align with the business objectives.To measure the success of a website (criteria of which includes visual design, UX, etc) is different from setting website objectives.


3. Competitor Analysis

We also looked outside client’s business – at its competition.

  • One interesting outcome was that competitors who were commonly referred to by our client during initial discussions were not even their competitors. Benchmarks were corrected.
  • We spotted opportunities to gain strategic advantage on new website.
  • This exercise also aided us in keyword research for search engine optimization of this website.

How competitor analysis is useful for website design?

It helps design team spot weaknesses in your competitor’s website. Those mistakes can be avoided in new design. It also helps identify what worked well for others. And always a new perspective.


4. Information Architecture

For each type of user on Spacio’s website, we then identified different flows through the site and what information had to be presented.

As a result, what we got was

  • Sitemap
  • Page Hierarchies
  • Navigation
  • Content Categories

We drew a similar diagram of their old site with relationship between screens to take a stock of what we already have.


Why is information architecture important?

Information Architecture (IA) helps us organize website content map relationship between different screens.It gives us a high-level overview of the site’s components. IA helps us understand where we are as users, and where the information we want is in relation to our position.


5. Wireframe

Instead of directly starting to design each screen in detail, which is by the way a time consuming activity and hard to discard, we then created rough sketches and outlines for all screens for client’s approval.

 


How wireframe helps?

Wireframes will solidify the layout and basic functionality of features prior to spending the time to make it look good. In turn, you will be able to more confidently design your website without the need to make major changes further down the road.


 

Share on

Leave a Reply

Your email address will not be published. Required fields are marked *