Indellient Website

Overview

Indellient is a custom software development and professional services company. I was hired in 2018 to assist with a website redesign to provide a better insight into what services Indellient provides and establish a heightened brand presence. My role in this project was to lead the UX portion while working with a visual designer and UI designer to create mockups. I also lead the setup and code the website from scratch using HTML, Sass, PHP, and jQuery and managing the release process through GIT. The final design for the website resulted in a significant increase in website traffic and a better brand expression. I later went on to work on Bluerelay, ShuttleOps, and multiple small projects with various Fortune 50 companies within Indellient.

The problem we’re solving

Indellient being a professional services company, always relied on business development and sales to close deals and get new business. But, when the potential customers were directed to the website it never projected the real brand spirit of Indellient. It was totally out of touch with the experienced, knowledgable, and bold company that Indellient as a company is. Thus, not being able to create a great first impression that would play a crucial factor in gaining customers.

The solution was to re-imagine the way we presented ourselves on the website. That included the visuals, colors, and tonality of the content being used to paint a picture of what the company offers. A website with enhanced UX that uses a strong information architecture to guide the users appropriately through the website and create a lasting impression.

Constraints and challenges

This website despite being built from the ground up came with a few constraints that we had to consider. Here are some of them

One challenge was how to aggregate multiple lines of businesses/offerings that Indellient provided being a professional services company. The biggest concern from the stakeholders was that it would dilute the brand and wouldn’t show Indellient being a specialist in certain areas.
Moving from WordPress website to an HTML based website would take away control from marketers trying to update content. We combated that by using PHP includes, getting marketers to have a content release cycle and proofread before sending in updates.
On of the technical limitations being not to use any heavy frameworks, to avoid any extra setup/maintenance time. This was also done to accommodate the fact that we wouldn’t have a full-time resource for the upkeep of the website once I moved on to other projects. That way, anyone with basic HTML knowledge would be able to navigate through the code to make updates to the copy.

These constraints impacted our decisions throughout the project and acted as guard rails to deliver the project within three months.

Research

Goal: Extract and establish a narrative for the brand that is in-line with Indellient’s values and use it to create an intuitive user experience for the audience.

Before spending any time on competitors and design trends, we decided to use guerrilla research techniques to carry out the initial investigation. We engaged various stakeholders and employees to understand their views on the company and its offerings. I created a script to be used while interviewing people within the company, which included a broad range of tasks and questions. Some of which included

What do you think the company does?
What do you think separates Indellient from other companies?
How would you define Indellient in a few words?
For someone who doesn’t know Indellient, how would you describe Indellient to them
Can you access the sitemap for me?
Fill out a demo request for BlueRelay.
How would you get in touch with a salesperson to get a quote for your project or potential upcoming work

We chose guerrilla research techniques since it allowed us to gather information about things like general first impressions and find out if people understand our brand value(s). It also enabled us to recruit people to perform specific tasks and answer questions without any prior knowledge (mostly new hires). This investigation lead to the discovery of existing problems, some of which included:

Pain Points

- No clear distinction between offerings and in-house product (BlueRelay) which was not clearly explained on the website

- Inconsistent messaging on what the company does

- Uncertainty around the services that the company offers as a whole

- Structure of the website not clear enough

- Vague copy on the website leading users to have different perceptions of the company

Card Sorting

To fix the problems with the Information architecture I used the card sorting that I got to learn working at University of Toronto. I created 2 studies using optimal workshop and invited people from both inside and outside the company. One being an open-ended sort, which allowed us to get an unbiased view of how the the IA would fit into the mental model of a user with no prior knowledge of the company. The other one was a closed card sorting where I defined the categories that I seemed fit in the context of the website from our point of view. We aggregated the results to make. the new IA for the product. Below are some of the results from the open card sort.

Impact: These findings findings allowed us to make decisions more clearly as the project progressed. It helped us to make choices like using more vibrant colors, giving each line of business its own colour, and create layouts outside of the normal patterns.

Definition and ideation

After we started aggregating the research findings, we started creating a more defined design direction that we were going to work in. We set out to create a website which would have some loosely held requirements some of which were

The website should look Dynamic, Bold, Playful, Unique, and a bit edgy.
Should be responsive and accessible
Have visuals that are within the context of our content and used only where necessary
Photography that is original, meaning it contains people working at the company to add that human element and avoid stock photos
Use infographics and interactive elements to make the website more engaging for users
Use partner logos and testimonials as social proof to seem more trustworthy as a brand
Use CTA’s when needed and make them noticeable

To start off, our team carried out competitor analysis looking at similar companies in the domain and similar audiences (I wasn’t a part of this exercise). I participated in creating a moodboard using InVision to gather design inspiration for visuals, colours, and sectioning of content.

Feeding off the inspiration, we started brainstorming ideas lead by me and another designer with feedback from our creative director. We started off on the whiteboard sketching ideas and then translating the more solid well-recieved ideas into low-fi screens in Adobe XD using a mobile-first approach.

Final Design

After the Low-fidelity designs I took on a role to provide feedback on the Hi-fidelity designs as I setup the code base and development strategy for the website. I used HTML, SaSS, jQuery and Bootstrap 4 to create the app in the initial stages. We later had to incorporate PHP as the plain HTML website made it hard to make changes to frequently used components like headers. If there was a change/mistake in something like a header it would have to be done 12-15 times skyrocketing the time spent on troubleshooting issues. We used PHP includes in order to modularize the more frequently used components like header, footer, nav etc.

I collaborated with my multi-disciplinary team of Visual Designer, an intern, creative director, marketing manager, and SEO specialist to create the solution. Through a lot of hard work we delivered the website in 7 weeks of starting the development process. Some of the screens were as below,

Challenges and compromises

To deliver a successful relaunch of the website, we had to make decisions quickly and carefully. We encountered some challenges on the way, some of them were

The biggest compromise was made in choosing the frameworks we were going to use. We went with a simpler HTML website rather than a complex framework which made it easier to enable non developers to make changes
Despite being video and visual heavy, it was imperative to maintain high performance of the website. We had to figure out ways to compress visual assets on the website, and move the CSS and JS loaders not necessary during page load below the fold.
To launch the website quickly we had very few code reviews which led to major refactoring work later in the project as multiple people worked on it.

Takeaways and learnings

The website redesign being my first project in the company was of uber importance as it helped me establish myself within the company. I got to learn a lot technical and intangible things. Some of the highlights were:

I learned how to mentor other team members with little to no experience in coding. The amount of patience and trust it takes to let go and let someone else take the reins and run with it.
It is not important own every part of the project, especially when there’s multiple people with similar skillsets. Instead, let the other person with more experience lead certain parts they have more experience in and vice-versa so you can learn from each other.
I learnt how to delegate tasks and make well reasoned decisions when your team leans on your expertise. I was able to learn a lot of leadership skills owing to my manager giving me a lot of autonomy throughout the project.