Groundlevel Insights
Who Are Groundlevel Insights?
Groundlevel Insights are an AI tech startup in Toronto, Ontario, Canada. They specialize in using a proprietary AI Software to help brick and mortar businesses gather consumer insights and stay Covid-19 compliant.
About the Project
For this project, my group and I were tasked with redesigning the current Groundlevel Insights website. Their current site is very content based rather than design based and they want something that is aesthetically pleasing to the eye and without sacrificing information content. On the new site they requested to have it match their rebranding as well as create a personable, fun and sympathetic feel to draw in users and new clients.
View the Before
Research
Research Process
In order to gain as much insight as possible into how to best redesign their site we decided on using 5 research methods which are as follows:
Deep Dive & Heuristic Analysis
Competitor Analysis
Stakeholder Interviews
Market Research
Basic SEO audit
Bellow are summaries of all the research we performed over a two week period.
Research Takeaways
After completing the research we found these to be the main points that we needed to implement into the new site:
The new design must funnel users towards a call to action/ product demo page
The website design should convey a sympathetic, personable & fun personality. It should appeal to multiple industries.
Industries can be siloed in order to improve relevant information discovery. This will help potential clients in finding exactly what they need, quickly.
The design needs take into account key SEO factors in regards to content, architecture, and efficient and effective crawling.
Ensure that Groundlevel Insight’s purpose and services are immediately understandable and accessible
Website elements should have good consistency to improve usability and good customer experience
With the research phase completed we moved on to planning the physical site.
Sketches, Concepts & Wireframes
Sketches
I started by sketching out my main ideas before settling on one that I wanted to move forward with exploring.
I really wanted to convey the personable feel that the client had mentioned during the research, so I went with a theme that brings in a conversation type of style to draw in users. Our client wanted us to keep things personable, fun, and inviting and the landing screen was the perfect place to start. This is where I started coming up with the idea of colour blocking for the theme.
The News and Contact Us pages changed somewhat throughout the process but stayed relatively similar to the initial sketches
My Concept
Once I had finished drawing out the low-fidelity wireframes, I got to work on transforming them to fit my proposed concept.
As previously mentioned, my sketches inspired me to experiment with colour blocking for my theme. Since Groundlevel Insights brand colours are so bright, I decided that it would be the perfect opportunity to try this style of website.
While the client thought for the landing page it was a little too fun, they loved the other pages and we ended up adapting them to the final design. Pictured are the Landing screen, News page, contact page, and the style guide I created to go along with it.
Landing Screen
In order to align with the GLI brand values I created a welcoming and personable experience with the chat bubble inspired information blocks. This draws the user in, as it’s almost like having a conversation down the page. The overlays at the bottom help users find the information they’re looking for fairly quickly
News Page
On the current news page there is no clear definition between articles. On my redesign, I chose to give each article a different colour block which helps in separating each article from the one below it. One thing that makes this page stand out is when a user hovers over an article, the opacity is bumped up to 100% and the “view article” button is enabled. This highlights the article that a user is focusing on, which tempts them to click to see more.
Contact Us
The Contact screen on the current site has a few issues with it. The first issue is that the error messaging can be somewhat aggressive and the second is that some elements are mis aligned. To fix these issues the team decided on making all the form fields mandatory, as well as we went with a grid layout for the rest of the page to keep things simple and clean. The bright colour pink shade used to frame the form draws users in to fill it out for any inquiries they may have.
Final Wireframes
For the final template, Groundlevel Insights chose to go with Vanessa’s concept. The asymmetrical shapes give the site a retro feel but in a modern and sleek way. We used splashes throughout to represent the movement that GLI’s product tracks and imagery of people to keep the personable and welcoming feel throughout the site. We drew up both desktop and mobile versions for all the pages at the clients request.
The pages that I was responsible for designing and adapting during this phase were:
News
Solutions
Contact us
Privacy Policy
Solutions Page
The current GLI solutions page is a mass of information. While there are defined pockets of information, there is nothing separating Covid-19 solutions from the others. Everything is grouped together and somewhat disorganized
On the new page, I grouped the Covid-19 solutions together as well as added a section for users to navigate to their specific industry to find more information. Grouping the Covid solutions separately from the rest not only allows the company to easily remove them at a later date but it also lets consumers find it quite easily. The separated industry pages allow the consumer to see how the product can be implemented in their business and how it can directly affect their bottom line in a positive way.
Contact us
As stated previously, there were two issues with the contact page, the first being the alignment of text and icons is off and the error messaging is quite aggressive if the form is filled out incorrectly.
The screen hasn’t changed too much from the original design that was drawn up. The movement in the asymmetrical shapes was brought in to add some visual interest to the page and make it cohesive with the rest of the site. We also highlighted the social icons as the client wants to drive users to their socials from the site.
News Page
When looking at the current news page, there is little to know definition of where one article ends and another begins, one other issue is that there is no clear indicator of where to click to view more of an article.
When redesigning the new page I wanted to ensure that users knew exactly where to click to navigate, as well as have a clear starting and ending point for each article. I used desaturated brand colours as the base to each article with disabled buttons. When an article is hovered over, the colours go to full opacity and the “view article” button is enabled for clicking. This not only gives the user a clear idea on where each article is but also lets the user focus on what they are currently looking at.
Privacy Policy
The current Privacy Policy page is a very long scroll with very little visual interest and no definition in the sections of the privacy policy.
In the redesign, I brought in the main GLI blue as the frame around the privacy policy and made the policy scrollable within the box. Another thing I did to make it easier to find exactly what you’re looking for, is bolded the headings for each section within the privacy policy, since on the old page the hierarchy was the same throughout.
Final Wireframe Video
Visual Design
In addition to my assigned site pages, I was tasked with creating any assets that were to be redesigned for the new site.
Those include:
The AI Chip image
The Data Journey
In creating these assets I used a combination of Procreate and Adobe photoshop.
AI chip
Original
The original AI chip image that GLI used was looked washed out, fuzzy, and didn’t pop the way we wanted it to with the redesign of the site since the brand uses a lot of bold colours.
New Image
Drawn In: Procreate, Photoshop
The new image uses the company’s main colour to align it with the look of the new site.
The company wanted a hand drawn look to the new assets so pencil style lines were used for the background connectors to add in a personable feel.
Data Journey
Original
The original Data journey that GLI was using was very tech centric. With it being included on the new website they wanted it redesigned to be more cohesive and in-line with the new site
New Image
Drawn In: Procreate, Photoshop
On the new image we went with using the splashes that you can see used throughout the rest of the website site
The Design Team
Ashley Olsen
Role: Team Lead, Lead Visual Designer, Researcher
Vanessa Devine
Role: Lead Researcher, Visual Designer, Developer
Portfolio: vanessadevine.design
Yomna Elazony
Role: Lead Developer, Researcher, Visual Designer
View More of My Work
Manitoba Closet
Manitoba Closet is a local woman owned business based out of Winnipeg, Manitoba. They specialize in selling keychains and can be found across different platforms.
InduCo.
InduCo. is an industry networking app focused on matching people with mentors from all over the world.