InSight Out Consulting Inc. | UX/UI Case Study

Karen Bhela
Dec 27, 2018 · 12 min read

How do you gauge the talent and expertise of a service provider? Perhaps you will search for someone with prestigious awards or maybe search for someone with ample experience. Regardless of what you are looking for, if the professional’s website looks like it was designed in 1992 (like the one below), you probably won’t poke around for long.

Introduction

InSight Out Consulting Inc. works with the complex inter-relationships and disruptive forces impacting business sustainability and compelling business decision makers to think and perceive differently. Insight Out Consulting Inc. brings insights, clarity and ways to work creatively to adapt quicker.

Dawna Jones (the founder) is a speaker, author, strategist and educator. Her experience working across sectors and different dynamics have led her to deeply understand complex environments and how to grow within them. Dawna works to connect decision making leadership to restore ecological and social health led by business and consumers in partnership.

The goal of this project was to design a practical and responsive website for InSight Out Consulting Inc. to showcase Dawna’s unique services and resources.

This project was planned and executed by my team of four:

Photography Credits: Gabriel Martins

As the project lead, my role was to conduct user experience (UX) research and create a clickable desktop and mobile prototype based on our research results.

Business Goals

Increase revenue by creating more engagement on the website and encouraging users to utilize InSight Out online resources (i.e., podcasts, books, articles, videos and online courses).

User Goals

Easily find and view all her resources (podcasts, articles, blogs, books) as well as understand her techniques and qualifications as a consultant.

Project Goals

Create a portfolio-style website to display Dawna’s unique approach to change innovation and showcase her online resources and consulting workshops.

UX Design Process

Hypothesis

Current and potential clients are interested in accessing Donna’s resources and services but are unsure where to start looking on her website and often get lost during navigation.

Research and Discovery

The Challenge

The brief of the project was to create a website to showcase Dawna’s services and resources while keeping into mind the following:

  • Develop a website that offers education (videos, webinars, link to podcast)
  • Connect and acquire new clients
  • Page showcasing my books. Easy to see or download chapter content
  • Speaking topics and workshop topics with links to videos on YT
  • Must appeal to international clients and collaborators

Domain Research

There are millions of successful business in Canada. Every successful business has faced unique challenges, one of these challenges may include workplace conflict during decision-making.

To set the foundation for the project research, my team researched numerous local and international consulting companies to see what services they offered and how Dawna’s services might differ from the norm.

Based on our research, the primary distinction between InSight Out and it’s competitors is that Dawna Jones takes a holistic and intuitive approach to her consulting services to gain a deeper understanding of her clients and pull insights from her observations. Whereas her competitors rely on strategic tools, that fail when faced with anomalies and human-to-human conflict.

We investigated numerous consulting companies in Vancouver, BC and globally. The websites we explored include Tony Robbins, Lewis Howes gothamCulture, Jonas Altman, Dana James Mwangi, Matt Olpinski and Bryce Baldon.

Comparative Competitive Analysis

To help visualize and compare the websites mentioned above, we did a comparative competitive analysis (CCA) (Figure A).

Figure A: Comparative Competitive Analysis

We measured the number of headers and pages because it allowed us to visualize how our users are accustomed to receiving information. We measured if the company offered international services and free resources to better understand how InSight Out compares to its competitors.

The CCA allowed us to easily refer back to our domain research and understand the information we gathered with a simple glance.

User Surveys

After collecting preliminary research, we began formulating survey questions. The objective of our survey was to understand the pain points of our users when searching for a consultant and what might help resolve these frustrations. Below is an example of a question asked on the survey:

We deployed our survey to the Vancouver community using Reddit and Slack.

As we waited for survey data to be collected, we conducted a contextual inquiry by participating in one of Dawna’s workshop sessions.

Contextual Inquiry

Contextual inquiries put UX researcher in the field to observe the behaviour of target users in real time.

Location: RED Academy

Duration: 2 hours

The contextual inquiry with Dawna allowed us to gain a deeper understanding of Dawna’s business goals, the type of users who visit her website and Dawna’s methodologies. The meeting also clarified Dawna’s outlook on the services she offers; we learned that she prefers to be known as a “change innovator” rather than a “consultant”.

The information gathered and observed during the contextual inquiry played a big role in the formation of the website design.

Survey Results

We received a total of 32 responses to our survey. After collecting the results, we analyzed the data using multiple techniques.

The first method of analysis was simple: read and understand the results.

The survey results demonstrated that our user’s experience can be limited if the website has too much information, poor organization and a lengthy process to achieve the desired goal (Figure B).

Figure B

These results also help confirm our hypothesis (as previously mentioned); our users seek services and resources online, however, they are discouraged when presented with overwhelming and unorganized information.

Figure C

The results show our users rely on information directly available on the website to determine if the service provider is reliable. For example, 71.9% of users expect up to date information from websites that are reliable (Figure C).

Our research also revealed that the majority of users prefer to listen to podcasts from an external source, rather than on the company website (Figure D).

Figure D

To complement this initial analysis, we created an affinity diagram to visualize our research results. Affinity diagrams are utilized by UX researchers to group research/data into meaningful clusters for analysis.

Affinity Diagram

All of the data points collected from the survey and contextual inquiry were included in the affinity diagram.

The affinity diagram shed key insights into our research findings and allowed the UX team to easily extract valuable information.

User Persona

The affinity diagram illustrated above helped create the user persona (below) for this project.

User Persona

The user persona was a helpful tool throughout the design process and bridge the gap between research and planning.

Planning

The UX research set the foundation for planning the design and allowed me to identify user pain points and key features for the website.

The storyboard above helps build empathy with the user and creates context for the demand of the current website.

Figure E

As illustrated in Figure E (left), my team was able to identify the minimal viable products and create a simple user flow.

This flow was the second iteration after we eliminated the following features:

  • Community forum
  • Article subscription option

Feature prioritization and a content audit helped us eliminate the features above and focus on the minimal viable product and stay within the scope of our project timeline.

Content Audit

My team conducted a thorough content audit to evaluate all aspects of the website and remove redundant content, such as:

  • Paths that lead to dead ends
  • Duplicate information
  • Remove unnecessary educational information from pages other than the blog (to draw more attention to the blog to access this type of information)

We eliminated content to avoid overpopulation, poor organization and emphasize the primary purpose of the page without distracting the user.

Information Architecture

One of the primary methodologies in information architecture is card sorting.

Card sorting is a technique used by UX researchers to organize information into logical classifications.

Figure F: Card Sort

After completing the content audit, my team conducted an open card sort to determine what the top navigation options should be and what items will fall under those options (Figure F).

We completed a total of 4 card sorting exercises to determine what the top navigation will look like and how the site will be organized.

Information architecture laid the foundation for the design process and eliminated uncertainty about where pages will be located.

Design

The design objective was to utilize the UX research to foster simplicity and ease of use of the website and responsive design.

The user flow map paved the way for the first version of wireframes. Without the user flow, wireframing would have been difficult and time consuming because design variations are infinite.

Paper wireframe of the workshop page for desktop (left) and mobile (right).

After creating the desktop wireframe, we conducted user testing to test the flow of the app.

As we tested the desktop paper prototypes, we simultaneously began creating the mobile prototype to ensure our website will be responsive on mobile screens.

Website responsiveness is a crucial aspect of design because users access websites from a variety of different devices, such as laptops, phones, tablets and more.

Paper Prototype Testing

Testing revealed the flow was simple and the website was easy to use. Key feedback we received was that the “home” option on the top navigation was unnecessary because the user can navigate to the home page by clicking on “Dawna Jones”, rendering the “home” button redundant.

This feedback was incorporated in the digital prototype.

Prototyping

Using the feedback gathered from the paper wireframes (as discussed above), we created the mid-fidelity digital prototype (below).

Mid-fidelity workshop screen

As displayed in the image to the left, we left aligned all of the workshops to keep the form consistent.

Our paper prototype testing results also yielded that the “Contact Dawna” CTA (call to action) should not be placed under the workshop image because our users were not able to locate the CTA with ease.

In our mid-fidelity prototype, we moved the carousel of testimonies and the “Contact Dawna” form to be adjacent to each other in efforts to reduce the length of the page.

Delightful Design

User delight refers to any positive emotional affect that a user may have when interacting with a device or interface. User delight may not always be expressed outwardly, but can influence the behaviors and opinions formulated while using a website or application. — NN/g

I’m not sure what the threshold for a boring website is, but a website for consulting must be on the borderline.

I was responsible for delightful and emotional design for this project. To make the website more interactive and fun, I added spinets of delightful design throughout the website.

For example, instead of a standard “thank you” pop-up, I created a unique pop-up to reflect the branding of the website (nature) and Dawna’s approach to consulting (collaboration) (Figure F).

Figure F: Above is an example of how we incorporated delightful design for a pop-up after clicking on a CTA.

One of the primary findings from our research was that users become frustrated and impatient when they are unable to locate contact information rapidly. To ensure we accounted for this, we created a “Contact” page and included contact options on the footer of each page (Figure G).

Figure G: Contact page.

Using the mid-fidelity prototype, we continued user testing and began designing the high-fidelity screens.

Testing

We tested on 8 participants for the desktop prototype and 8 participants for the mobile prototype, for a total of 16 testing sessions.

The method of testing was structured; we identified the scope of the test and gave the user specific objectives. We took detailed notes on their interactions with the prototype (e.g., long pauses), noted all feedback and timed the digital testing sessions.

User Objective:

1. Select the following blog article to read: ‘Flipping negative stories about young people’

2. Select the most recent podcast to listen to from the home page

3. Contact Dawna about registering in Workshop #1

Desktop Paper Prototype Testing Results

Desktop Mid-Fidelity Digital Prototype Testing Results

We measured the time taken to complete each task for the digital prototype to measure it against the time taken to complete the same tasks on Dawna’s existing website: http://www.frominsighttoaction.com/

The results yield that our website design improved time efficiency for completing by 62%!

In other words, the new website design decreased the amount of time spent on completing the tasks by more than 60%.

Mobile Paper Prototype Testing Results

Mobile Mid-Fidelity Digital Prototype Testing Results

All feedback from desktop and mobile testing was considered before moving onto the next stage. The team made revisions, referenced research and retested throughout the testing phase.

Take a look at the high-fidelity desktop prototype and mobile prototype on InVision.

Or check out a video of a user completing the testing tasks on the high-fidelity prototype on YouTube!

UI Design

The final design phase for this project was completed by the UI specialist on our team, Hardip, along with input from the UX design team.

The UI design required a lot continuous feedback and retesting to create the final product.

Mood Board: Epiphany

The design inception was to foster a feeling of epiphany, emotional intelligence and healthy nature. This was achieved by using hero images with deeper meaning (e.g., mountains), gradient skies and vibrant colours. The sta­ble and serious typeface used gives a trustworthy and timeless feel to the website.

Below you will find the high-fidelity version of the screens discussed in mid-fidelity prototyping.

Future Improvements

There is always room for improvement.

The 3-week timeline of the current project did not allow for many features.

Future considerations include adding an international section to showcase how Dawna’s services are applicable worldwide.

Dawna invisions creating a community on her websites where international and local clients can connect. In future iterations we could build a community forum to keep professionals in the industry connected.

Lastly, Dawna is currently working on developing new website resources, such as webinars and VR/XR. Future improvements could include these additions.

Conclusion

The final product exceeded the business goals, user goals and project goals

Overall, the InSight Out transformation was a success! The team worked well and hard to create a simple, functional and grounded website to improve the experience of users and increase task efficiency by 62%!


That’s a wrap, for now! If you liked my case study, claps would be appreciated.

You can follow my work here, on Medium, Instagram & LinkedIn.

Let me know what you think in the comment section below, all feedback is welcome!

Thank you,

Karen Bhela.

UX Station

The best UX design case studies for your inspirations on UX processes, research and design.

Karen Bhela

Written by

User Experience Designer • Human-Centred Research & Solutions • www.karenbhela.com

UX Station

The best UX design case studies for your inspirations on UX processes, research and design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade