InSight Out Consulting Inc. | UX/UI Case Study
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:
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).
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).
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.
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).
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.
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.
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.
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.
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.
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).
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).
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).
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.
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 stable 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%!
