Interview
Feb 08. 2019
Web design

Gil
Huybrecht

Growing through the power of Design

We felt extremely lucky talking with Gil. Lots of useful Design thoughts in our new talk:

My name is Gil Huybrecht, designer, skater & teacher.

I love helping brands, companies and organisations connect with their audience through good design. Good design is good business and I find that there is nothing more fulfilling than seeing a company grow through the power of design. In a minimalistic and customer oriented way I solve design problems on the daily for companies across the globe.

In my spare time I skateboard, and have been since I was 12. The main thing skateboarding taught me is that failure is a chance to learn from your mistakes and that you’re never done learning new things. Skateboarding is just the best.»

Website Redesign, the First Steps

Articles
March 17, 2020
Alyssa Ambers
QA Engineer
College Writers
Freelancer as a virtual assistant for College Writers, cooperates with different websites covering a broad range of digital topics as a seasoned content creator

Weak interface solutions is one of the modern Internet’s current problems. Users that see imperfections regularly may not notice them, but then they encounter another website that has a better design and realize that the first one was not that good. It is this fact that pushes major organizations to experiment with the design of their website interface and make a complete redesign. Does my website need a redesign? And what tools are used to create an intuitive and user-friendly interface?

Designer’s Style

The reasons why companies may consider redesigning their website:

  1. Absence of targeted traffic.

    Your site neither attracts targeted traffic nor attracts enough traffic. The lack of targeted traffic is one of the first reasons to change the current website interface.

  2. Changing the principles or business objectives of a company.

    Structural changes in the company’s business goals lead to interface redesign. Such changes are especially relevant in a situation where a non-commercial site has to occupy a niche in commercial sites field.

  3. The desire to accentuate the content.

    Websites are often created without the properly structuralized content. For this reason, a huge number of sites are not adapted for users and search engines. The search for the necessary content turns into a test. Content accentuation makes the necessary information easily accessible.

Evaluate your site by these criteria and determine the need for redesign. The process of redesigning is complex, multi-level work that requires a responsible approach at every stage. In the process of developing the first version of the site, you probably did not study the target audience, and the design was not excellent.

Redesign is a correction of mistakes and its distinctive features are:

  • the research of target audience and development of the user path based on the data provided by research,
  • the development of target audience-oriented content,
  • the development of content-oriented interface.

The process of website redesign has nothing to do with rebranding. The redesign implies changes to the structure based on the data provided by UX researches.

I think a designer should be very versatile and have a style at the same time

I think my own work is very recognisable because of the way I space things and because I try to go for the best, simplest experienced for the user. I think that’s much more valuable to have as a style than having a strong visual style.

Toptal is an network of the top freelance software developers, designers, finance experts, product managers, and project managers in the world. Top companies hire Toptal freelancers for their most important projects.

Every designer will at one point develop a very own style, it’s just really important to not try to become a unique design for the sake of being unique. Have fun, keep learning, have an open mind and a personal style will come on it’s own.

Dribbble and Behance

I personally think it’s something that’s super important. Sharing your work online is something that every designer should be doing. A hear a lot of people saying something in the lines of ‘I’m not good enough to share my work online’ or ‘when I can do something like that, then I’ll upload my work’. I really sucked ass at design, I got my dribbble invite via a buddy of mine at school. I was so stoked on being on dribbble, I really loved it with a passion. I think I can honestly say that being on dribbble made me the designer I am today. It’s like that saying, you are a reflection of the people you surround yourself with. By surrounding myself ‘digitally’ with the best of the best on dribbble I was so motivated to get better. It really helped me to become good at visual design.

GIL'S DRIBBBLE.

The only problem I see with something like dribbble is people that are building a following with no purpose, it’s just making pretty things that wouldn’t work in UX wise in the real world. It’s important to learn about ux design, copywriting, strategy and even business to bring the right solution to the table with your client.

Having a dribbble audience is also really good for work inquiries. Having the audience I have today is what got me into teaching online. That’s a route I want to explore more in the future.

If dribbble didn’t exist I think my life would look different today

The Grid System

My philosophy around the grid is the following: I think every designer should learn the ins and outs of grids in design (web or print or anything really) but I don’t think you should keep to the grid 100%. When you know the rules you also know how you can break them. I use a grid as a basis for my work, it makes it easier to align objects in columns, align objects with each other etc. When a designer uses the power of a good grid as a guideline instead of a restriction, great & new design ideas can happen. Then there is room for making something ‘original’. With original I mean a design that doesn’t look like every website template out there.

My philosophy around the grid is the following: I think every designer should learn the ins and outs of grids in design (web or print or anything really) but I don’t think you should keep to the grid 100%. When you know the rules you also know how you can break them. I use a grid as a basis for my work, it makes it easier to align objects in columns, align objects with each other etc. When a designer uses the power of a good grid as a guideline instead of a restriction, great & new design ideas can happen. Then there is room for making something ‘original’. With original I mean a design that doesn’t look like every website template out there.

Colors

When it comes to colors I always follow one simple rule and that is keep it simple. Use of color can make a page look very easy to understand or very hard. My approach is to have one poppy color to draw the attention of the user. This can be for call to actions, important quotes or anything you want to attract the users eye to (these tie together with business goals determined beforehand). This way every primary call to action could have the same poppy color and the user will automatically know when they see the color it’s for a CTA. Secondary call to actions could be then ghost buttons, or buttons in a non poppy color like black, dark blue, …

Products, vision, teams, clients. How do you stay focused?

It definitely can be tough at times, and the balance is never perfect (but that's life in general eh?). There are really two coping mechanisms here that I typically lean on:

Where to Start?

You should start the process of redesign by conducting a research of your target audience. Here is the list of some powerful UX tools used to make a full-scale research:

User Interviews

If you have planned to redesign your website, you should focus your attention on the customers that use the site on a regular basis and know the flaws of your interface. The UX designer should conduct user interviews1, which sometimes can be of a challenge. The thing is that it is often hard for user to answer the questions about the specifics of interface interaction. This happens because users get used to the interactions with your website and it becomes like a routine for them – no specifics to describe, just the usual automatic actions When conducting an interview, it is important to receive the most detailed information from the user. One way is to conduct a contextual interview.

Bad UX. 7 Actual Designers’ Mistakes in 2020

The thing is that it is often hard for user to answer the questions about the specifics of interface interaction. This happens because users get used to the interactions with your website and it becomes like a routine for them – no specifics to describe, just the usual automatic actions When conducting an interview, it is important to receive the most detailed information from the user. One way is to conduct a contextual interview.

The design should provide the user with an intuitive and comfortable path to the desired content
1.1
million of computing -related jobs will be available

Contextual interview allows you to combine user observation and a classic interview form. During the user observation, you have to ask him to comment on the actions performed when using the website interface. During the contextual interview, it is necessary to questions, clarify them if needed, and record the answers. Help users to formulate their thoughts in order to get the most accurate information.

Finding Out the Users Personas

An important part of user-oriented interface creation is to work out the user “Persona”. It is a generalized representation of one part of the target audience, the users of which have similar views on your product. When creating a “Persona”, the UX designer should include the characteristics that are common to one group of your clients, according to the researches conducted before.

Design with FlowMapp Tools

Try free our Tools for successful management and development of web Projects

More

You should conduct a research of users personas in a team, because you can get to know your target audience and use that experience in further interface updates. A creation of “Persona” begins with defining users characteristics that should be obtained in the course of researches (e.g. user interviews, analysis of user reviews). Group the characteristics of “Persona” into clusters and analyze them. Then, exclude the characteristics that are useless for the business and group clusters that include common characteristics together. The clusters should be further personalized, made memorable and realistic.

Specify the information:

  • Name, age, gender and a photo
  • Description of activities
  • The experience of using your product and your competitor’s
  • The goals and problems your website solves

It is important to remember that it is necessary to create a realistic image – this will help the team to memorize the person they are developing interface for.

InVision's Instagram

Visual Hierarchy

I think visual hierarchy and spacing are one of the most important aspects of visual design and are a great skill for any designer to have. It can guide a user through a page the way we want them, it can make reading content easier, it can make a message super clear, the list goes on. When we are designing, there is always a commercial goal in mind. Therefor we need users on a webpage (or any design for that matter) to look at something first before they look at the next thing. When we study how users go through a page we can see for instance that they scan titles and when the title strikes interest the user starts reading what’s beneath the title. With visual hierarchy we can create big bold titles that grab attention or have a call to action in a vibrant color.

Gil Huybrecht’s commenting the project:
I chose my favourite pastel colors for the project to add softness to a clean design.
Big bold titles grab attention, sans-serif fonts convey the fealing of soft cosy furniture.
See on Dribbble

There are a lot of different ways to create visual hierarchy, the 5 most use ways are size, color, alignment, character & animation2. With these methods we can give a piece of content that extra bit of attention. I think what’s really key is to know when there is too much to look at, try to keep it as simple as possible, a person looking at your design should understand it in a really short matter of time. Get to the essence of what needs to be on your hero section for instance and rank those items in order of importance. The most important one grabs the most attention, the second items the second most, etc. This also comes back to spacing, every item or group of items needs it space around it. When 2 items that have nothing to do with each other are too close to each other, people could start to think that these belong together. It’s little things like having good spacing, good visual hierarchy and good balance that make good design, for me.

Just to remind you about the special promo from Stephen and FlowMapp Team at the end of the interview. Don’t miss it!

There are a lot of different ways to create visual hierarchy, the 5 most use ways are size, color, alignment, character & animation. With these methods we can give a piece of content that extra bit of attention. I think what’s really key is to know when there is too much to look at, try to keep it as simple as possible, a person looking at your design should understand it in a really short matter of time. Get to the essence of what needs to be on your hero section for instance and rank those items in order of importance. The most important one grabs the most attention, the second items the second most, etc. This also comes back to spacing, every item or group of items needs it space around it. When 2 items that have nothing to do with each other are too close to each other, people could start to think that these belong together. It’s little things like having good spacing, good visual hierarchy and good balance that make good design, for me.

Planning Tools

Before starting a design I have a workshop/meeting with the client where try to define the following things together. The primary digital business goal, secondary business goal, main emotional benefit for the future client, the most important features of the brand/product or service, we define the target audience and if needed the segments in the target audience, we take a look at the competition and what they are doing in the digital space, we take a look at how we can optimise landing pages to target certain users, we define what pages are going to be served in what way, we define the customer journey, etc.

InVision Studio

When a client comes to you, his design request is always motivated by a business or marketing problem, it’s your job as the designer to find out that problem and find the best solutions for it by using a well set up framework of questions. I’m personally not a big tool guy, a tool is a tool and it’s just a means to an end. It’s more about seeing the right problem and pairing it with solution like I said above.

Competitive Analysis

I personally think looking at competitors is super important. At the agency where I work we always start with brand strategy, this involves a lot of things, like personality, what, why, etc. One of those things is competitor analysis3. The main thing we do in brand strategy is take a look at the competition in the market and see how all these competitors are positioned. When all the competitors are mapped out, you can easily see where there is room in the market to do something new and innovative. Working this way can make a brand really powerful. The main thing I look at when we want to position a brand differently in the market is what the visual styles of the competitors are and we can do it differently. This also goes for copy on the website, how does the rest of the market speak to their customers? To they all speak in a similar fashion? Can we talk to them differently? These things are mostly backed and/or influenced by user research.

Content Development

You should develop the target audience-oriented content in accordance with the research data obtained. Content-oriented approach is one of the most popular methodology for website design and redesign development. In this approach, the content is the essence of your website. The design should provide the user with an intuitive and comfortable path to the desired content. Instead of developing a nice-looking UI that has poor layout logic, start developing content that is needed by users.

The design should provide the user with an intuitive and comfortable path to the desired content
85%
Internet users watch online videos

This approach saves you the time spent on iterations, if you have started the redesign with the development of UI. Target audience-oriented content is one of criteria that lets you build the information structure that is intuitively understandable to users. In its turn, the information structure will become a good basis of further UI development that will be aesthetic, authentic and intuitive for the target audience.

How to Evaluate Designer?

I think the most important thing that I look at is that the designer is actually solving a business problem for the client and not just focussing on the visual part. Visual design is super important don’t get me wrong but it’s just 1 aspect of the design process. I like designers that back their work up with some kind of strategy. Things like, what is the main goal of the website, what are secondary goals for the website, does the personality of the brand get reflected in the work and did the designer think about the target audience, is the target audience people that would mostly look on mobile, or desktop, all those kind of things are super important.

Stephen’s Workspace space in a trailer
Holabrief is the go-to platform for creative briefs, it makes it easy to get to the heart of the problem and help creative teams and companies do meaningful work together.

All of those things can result in work that is different from the competition and speaks to customers in a refreshing way. Btw, a really helpful tool to map out competitors and take a look at positioning is Holabrief, it’s an online tool of a buddy of mine and it’s made to make better briefings/ask the right questions to your client. They are now just in open beta, I see a lot of potential in it. To conclude, looking at the competitive landscape is a crucial part of the process. They are now just in open beta, I see a lot of potential in it. To conclude, looking at the competitive landscape is a crucial part of the process. I would say I would like to see a specialisation in 1 aspect and knowing a whole lot of other stuff. For example being really good at visual design but having a bit of UX and copy knowledge.

When looking at other designers portfolios I also really like when there is some personality in the website in the copy or design. Having a good feeling for copy is also really good to have. I would say I would like to see a specialisation in 1 aspect and knowing a whole lot of other stuff. For example being really good at visual design but having a bit of UX and copy knowledge.

Navigation Design

IA audits also lays bare problems in navigation design. Navigation design and architecture must cater to the simplest and most encompassing way content within the IA can be presented to the user. A common mistake is choosing a navigation design disjunct to the site’s content.

Building creative confidence: David Kelley at TED 2012

Smashing Magazine suggests that great navigation design considers what users look for in your site. How it’s presented though should depend on the depth of indexing and categorization used in the site’s IA.

A rigorous IA audit can segregate crucial categories – core content – and optional categories within a site. This helps in increasing ease in navigation for your core audiences while affording other niche users with good UX.

If you can find ways to establish an emotional relationship with consumers who visit your site, you will have a consumer who wants to buy from you.

Even if you are not a Toms Shoes, there are still ways in which emotional bonds can be established with visitors – through colors, through music, through augmented and virtual reality experiences, etc.

Clothing and eyeglass retailers, as well as resorts, provide such experiences for their customers. They can virtually try on clothing and glasses frames; they can take virtual tours of a resort. Even wine companies are getting into the act. A consumer can scan a label with his smartphone and be taken to the vineyard and the story of how that wine was crafted. All of these things play on emotional responses that consumers have to products/services – excitement, fun, inspiration, etc.

Working with Design Trends

I personally don’t pay too much attention to design trends, I do observe it, some are cool and some are not that cool. The fact of the matter is that a trend is never timeless and I feel like that’s something we as designers should aim for.  Each client project has their own brand attributes, the design should always reflect those attributes to speak to the right target audience. Therefor I think you should never use design trends for client work, it might work out in like 0,5% of the times if the trend coincidentally reflects the brand attributes of the brand. Not all design is client work, I find it super important to do design just for fun and to learn new things. If I see a cool trend, I’ll try to give a little twist and make something with it for fun. That’s sometimes all you need, a lot of design freedom haha.

Who are 5 Designers you admire?

Dan Kuhlken and Nathan Goldman aka DKNG — I’ve never had the opportunity to meet Dan or Nathan in person but I hope I’m able to at some point! Their beautiful illustration and poster work always causes my jaw to drop to the floor. They have the unique style that is so much more than an illustration: their use of muted colour, dramatic layout/weighting, and their ability to make you feel a sense of nostalgia (without knowing why) is simply amazing.

InVision Design Team — Okay this isn’t a person and I know this cheating… but I’m going to do it anyway. The team here at Invision consist of some of the most amazing designers I’ve ever had the honour to work with. I seriously can’t imagine a more inspiring crew of designers under one roof. Folks like  Aaron Stump, Charles Patterson, Pablo Stanley, Tom Giannattasio, Jack Daly, Joshua Oluwagbemiga, Steven Fabre, Martha Bergman, Caitlin Wagner, Lex Roman, Scott Savarie, Carmen Hernandez, Fran Perez…  and so many more… I feel like even 20 years from now I’m going to look back at this team of 30+ designers that we have and continue to be blown away. There’s so much talent in one place… it's a really special thing, and I feel honored to be a part of it.

Strategy

At the moment I’m really deep diving in everything related to strategy. Brand strategy, product strategy, … you name it. I think you can never have enough knowledge. At the moment I’m also learning a lot about business. Being able to speak the language of business can really help you out when talking to potential clients.

For anyone interested in this topic, creative strategy and the business of design is an awesome book to get started with it. Every book from Marty Neumeier  is also a must read. It’s more branding related, but doing ui/ux is also part of the branding spectrum in my opinion.

My favourite colors at the moment are pastels btw. Love how they can add softness to a clean design

While I’m learning I’m also enjoy the other aspect and that’s teaching. I got my courses on Skillshare on visual design but I want to start and do more classes, more ux minded maybe and higher level strategy  stuff. I think that can be really helpful to other designers to learn how to really solve a problem. I’m also building an email list and I’m going to try to send out some newsletters with stuff that inspired me, tricks and tips and some short articles maybe.

Don’t use too many images either because the email will be slow and they might not show everywhere. Don’t be predictable but also don’t make it too complicated. This is rather a tip for your communication style that can help you to build better relationships and improve your reputation as a professional.

Persona-Based Development

As such, persona-based development can lead to groundbreaking innovation in product design and UX throughout your project. You can create personas of different users with various backgrounds and lifestyle choices and then present those individuals to your coworkers to get a better feeling for who your target audience really is at the end of the day. In doing so, you will have a much more personal approach to the product design process and have an easier time identifying with your product’s users as opposed to one-sided UX design of yesteryear.

We’ve touched on “user-centric” design in previous sections, so the idea is worth exploring in greater detail when it comes to concrete product design improvements it can lead to. UX design has always been focused on pinpointing the exact wants and needs of individual users based on their behavioral patterns, product expectations and the likelihood of their conversion and brand advocacy based on those design decisions.

Principles of Human-Centered Design (Don Norman)

Lastly, whether you work on a service-based project such as a website or a product meant for shipping to individual users, it’s important to take continuous design facilitation into account. There might be bugs in your product which slipped by the QA team during production. You might want to add new features or expand on existing functionality post-launch. These factors should find their way into your product design and allow for additional refinement and building on the baseline product you’ve launched.

General Recommendations

Before you start redesigning your website you should consider the project’s budget in order not to use the excessive amount of methods. If the designer knows the budget, he can distribute it among different UX methods in a correct way. Some project may require more “contextual user interviews” with “user observation”, some may require a “usability testing”. In any event, it should be remembered that you should use empathy in order to understand the users to whom you develop the interface for. This is possible only if you research the target audience with UX methodologies and SEO data regularly.

Conclusion

In the course of this article, we have reviewed some simple actions and methods that may be implemented by an UX designer to redesign the website in a quick and efficient way. It should be understood that target audience research is not limited to user interviews and “Persona” creation. The amount of “UX research” methods is full of elegant elements that help designers to make their projects better and better. The main purpose of this article was to unveil some user-research methodologies in UX design and to understand some core principles of developing a well-structured website. The next articles will focus on powerful tools that an UX designer may use to develop an intuitive interface, and what tools should be implemented to keep the constantly changing user needs under control.

FAQs

  • I already have a website and it is structured in a wrong way. Is it worth creating a structure with new pages or should I restructure the old ones?

    This question cannot be answered without a complete analysis of the current site structure. We can conclude which of the options will be cheaper and easier to implt only after the analysis.

  • When is a tag cloud useful?

    This question is more related to SEO optimization. In order not to lower the current place of your site on a search engine query, you should ask a SEO specialist about the correct way to use the tag cloud.

  • How to properly organize the bottom level of the site structure if it has a large number of identical elements and they are added on regular basis (for example, online store product cards)?

    In order not to make the structure too complicated for perception in a situation when the amount of content is regularly updated, one should correctly catalog the content (upper level of the site structure). If you work out the principles of content organization correctly, you will not have any difficulties in adding new content and distributing the already existing one without messing up the structure with similar elements.

Article Sources

  1. CareerFoundry, Youtube video “How To Conduct User Interviews Like A Pro (UX Design)” , April 18, 2019
  2. Inviosn Blog, article “Visual Hierarchy”
  3. Smashing Magazine, article “A Brief Guide About Competitive Analysis”, August 30, 2018
  4. Nielsen Norman Group, article “When to Use Which User-Experience Research Methods”, October 12, 2014
You can share the article

Try FlowMapp

FlowMapp helps you create interactive sitemaps for web development and plan better UX with User Flow. But wait, there's more — create structure, invite team, add content, share with client. No fuss.

Improve your product!