Integrate Play Solutions - A UX Case Study
Our client is a self-proclaimed Toyologist and Playologist. While both of those titles are of her own creation, the services she provides and promotes on her website are well established and promoted by LEGO. The philosophies that underlay her services are utilized by industry giants, like Google and Microsoft. And the effectiveness of her mediation was felt by my UX and UI team first hand.
Despite all the promise her company has, her business was not preforming to it’s full potential. A possible reason for this is a lack of marketing presence beyond word of mouth. This is why she came to us, her website was not generating the number of e-mail leads she was hoping for, it was up to us to fix that.
Research
Client Meeting and Background
During the first client meetings we aimed to identify the Minimum Viable Product (MVP) that our client needed for her site. This was the thing that would inform all of our design decision going forward. Our client identified 3 must-have features for her site; a blog, an easy way to add videos, and to educate users about what our client does. Embedding a video and creating a blog are both features that are default to the word press platform, so all we had to do as a UX team was to provide a coherent and concise space to place information to best educate users about our client.
Before we could start organizing the site, we first had to understand what our client did for ourselves. We arranged a date with our client so she could bring her materials into our office and walk us through a mini session with us. While we waited for her to be available we conducted our own independent research on the philosophy behind her methodology. Lego Serious Play (LSP) is a communication facilitation method that is promoted by Lego to help businesses bridge communication issues between employees.
“LEGO® SERIOUS PLAY® is not:
- a fun ice-breaker exercise to start off a meeting.
- a tool for building organizational diagrams or for planning physical environments.
- anything that anybody says can be done in an hour
- about communication as persuasion, where one member of the team persuades others”
When our client walked us through an hour of an LSP activity, our research findings were corroborated. Additionally, it provided our team with a huge motivation boost by showing us how effective and professional LSP can be, despite only getting a 1/3rd of a full session. After the LSP session we felt confident that we had a firm understanding of what LSP was, so we launched into the next phase of research, what information was the most important to convey to users.
Domain Research and Interviews
To identify what kind of information is important for users we looked at two different types of sources, competitors, and the people who have or could hire our client. For our competitive analysis, we focused on what kind of content they had on their site. A few specific pages were common between all the sites we viewed; testimonial, contact, and background information on the offered services. We attempted to reach out to some of the owners of the sites but many of them were not interested in giving us an interview since we were working with their competitor.
After looking at the competitors’ sites we started to consider where else we could gather research from. We considered making a survey but decided that our user base was too narrow for that to be appropriate. We instead opted to conduct interviews with anyone we could find that could be considered a potential user of the site. We looked at the social media accounts associated with Integrate Play Solution (IPS) to try and reach out to anyone who has followed, liked or commented with any of the IPS social media accounts. Next, we attempted to get into contact with any past clients of IPS that were willing to talk about their experience with IPS. And finally, we asked anyone we know personally who could fit the role of a potential user of the site. Our resourcefulness, along with the contacts gracefully provided by our client, allowed us to gather an amount of information that was above and beyond what we originally expected.
“…follow ups are important, Testimonials and social proof”
In our interviews, we discovered that the common pages identified in our CCA were also highly sought after information from users and potential users. Social proof that IPS’s methodology works were very highly rated as an important piece of information to present, followed closely by a need to know about the details about what services are offered. Additionally, we discovered that the potential users for our site would usually need to present a case to higher up C-level managers before someone like our client could be hired to host an event. The information we present to our users must also be easily condensable to allow for easier presentation to our user’s higher-ups.
“The folks who are managing [the decision to hire people like our client] are the directors of people and culture… They report to our CEO. These are the people to convince at our company, and most companies like ours”
The interviews, taken together with our findings from the CCA, highlighted a couple key features we knew the site would need; A testimonial page, a page to educate users about the philosophy behind IPS’s methodology, a page to teach users about what services LPS offers, and a contact page.
Planning
When we started planning the layout of the site we took two things into consideration, the user’s goals and the business’ goals. Our planning for our user goal was heavily informed by our research, while our business goal was informed by both our client directly as well as digital marketing strategies.
Persona and User Goal
Alex is the director of human resources at her company, a local tech startup. Her team is going through some communication difficulties and she’s thinking about hiring a facilitator to help mediate their communication difficulties. Her company is on a budget so any decision to hire someone for such a task must first be approved by her higher-ups.
Upon discovering the IPS’s website, Alex’s attention must immediately be grabbed, this could be achieved by presenting IPS’s value proposition on the landing page. From there, Alex must be able to easily navigate to any other page of interest. The order she visits the pages in is not terribly important and so the option of where to go next is left open to Alex so she can prioritize gathering information as she sees fit. One of the next pages she may visit could be the “science of play” page, which would contain all the background information on the philosophy behind using play in the workplace as a tool. Next, she could visit the testimonials page where she could see how effective IPS’s services have been for other users. Finally, she could visit the services page to get an in-depth look at what is involved in an LSP session. After learning about what IPS is about she could request an info package in order to get a handy PDF that has all the information she just learned about so he can easily present it to her CEO.
Business Goal
The previous IPS website utilized a single scrolling page in order to present all of its information. For the new site, a multi-page flow was used so our client could utilize Google Analytics more effectively. It also allowed us to narrow each page to having one major call to action.
During the second interview with our client, she informed us that one of the most important things for this site to do for her would be to collect user e-mails so she could contact them and follow up on any displayed interest. The old IPS site used a pop-up to achieve this goal. This pop-up would appear seemingly randomly during a users visit to the site. We were concerned that this type of pop-up was disruptive to the user’s ability to browse and gather information. The client also inquired about the possibility for a pop-up to appear as the user attempts to navigate away from the site or attempts to close the browser. To test if these types of pop-ups would be effective to gathering e-mails we created a survey to test peoples attitudes.
In the survey we asked 3 question, testing the two pop-up types discussed above, as well as a 3rd way to gather e-mails, where users actively search out fields to fill in in exchange for information.
Despite having a low sample size a clear trend towards distrust for automatic pop-ups is seen. Based on these results the decision was made to have no automatic pop-ups on the site and instead collect all e-mails through fields users can voluntarily fill in themselves. In exchange for submitting their e-mail, the user would get a reward in the form of the PDF info package that Alex can use to easily present to her CEO. To compensate for the lack of prevalence an automatic pop-up would have provided the e-mail fields will be accessible on almost every page. This will be the major call to action for the pages of the site. For the 50% of users that would still be apprehensive about leaving an e-mail, IPS’s phone number and e-mail would be displayed on the contact page so users can get in contact with IPS on their own terms.
Design
Thanks to our well-defined scope and MVP we manage to keep the number of screens in this project to a minimum, this allowed us to really fine-tune what appeared on each screen, despite only have a few days to design them. We even filled in some of the pages content with the research we conducted from back in our research phase. We began our design process with a design studio where both UX and UI team members came together to create concepts of what we think the screen should look like. During the paper prototyping phase, we focused solely on the desktop-sized screens.
Based on our research we included the three main pages on the home screen such that they would be featured heavily towards the bottom. The value proposition for IPS would be placed near the top and directly under that would be our major call to action, a button that would prompt a pop-up where the user could enter their e-mail in exchange for an info package.
Other pages, such as the services pages, would contain the call to action as a static field on the page. This would be the case any time there was enough space to put the entire field down. At this stage in development, most pages were planned to be one screen long, by the time we move to digitizing the wire-frame it became clear that this design choice was not viable.
Various changes happened between the paper and digital wire-frames, such as the change from the page name “testimonials” to “accolades”. This was done due to a request from our client, as she wanted to also include media coverage on that page and wanted a word to reflect that. Testimonials was too narrow. The top bar was also rearranged so it would match the order of the navigation buttons on the body of the page. Once it became clear that we could not keep each page a single screen long we decided to put a footer on each page.
The mobile screen used a lot of the same elements as the desktop but rearranged to make use of the more vertical space. Some of the content on the mobile version was omitted, like the value proposition on the home page, to make more room for other elements. The top navigation bar was also made into a hamburger menu.
Once we made the decision that the desktop home screen did not need to be restricted to just one screen length it freed us up to make space for some extra information towards the bottom. Since testimonials ranked very highly in importance according to our research, we decided to add quotes and logos from IPS’s past clients to the bottom of the page.
The logos of past clients were left out from the mobile version of the page, but since the value proposition was so important we decided to put it back in. The hamburger menu was given icons and it was shrunken to half the size of the screen so that the user could still see what page they are currently on.
Some major changes also happened to the call to action for the site. Originally the call to action had an optional text field for the user’s phone number. Since the field was optional the decision was made to cut it so we would not overwhelm the user with unnecessary text fields. The word “company” was changed to “organization” in order to include non-profits. The text field for identifying the purpose of the user’s inquiry was also changed from an open field response to a drop down with IPS’s 3 services as selectable options. This was done to enable the possibility of a different service specific PDF to be automatically e-mailed to the user depending on what service the user selected.
Testing
The first rendition of this page had two calls to actions, request info would pull up a call to action pop-up that would be identical to the call to action text fields on the bottom of the page. Through testing, we found that users were getting confused on what button did what, causing them to click the ‘request info’ button for the wrong reasons or just to find out what it did. One tester commented that they thought they were requesting more information on the person who made the testimonial that was presented above it.
To resolve this issue we removed the ‘get info’ button and moved the text fields to take its placed since we had a lot of empty space on that side of the page. We also made sure to never allow two calls to actions to be visible on the screen at any given time, although some pages do have a call to actions on the top and bottom of the page to accommodate people who scrolled to the bottom.
Additionally, the name of the ‘testimonial’ page was changed again from ‘accolades’ to ‘praise’ since the word ‘accolades’ tested very poorly among users. A few users were not familiar with the word, so while the word did encompass everything we wanted it to, we decided to use a more commonly used word, such as ‘praise’.
Another issue became evident during testing of the mobile high fidelity screens. Some users were not immediately aware that they could scroll down on the mobile home screen. This might have been due to the use of white space causing it to look like it was just a single screen page. To resolve this issue small bubbles were added to the bottom of the screen such that one of the bubbles was cut in half by the screen edge. This simple change inclined testers to scroll down the screen with a much higher frequency.
On the services page we had the LSP workshop service appear first since our client identified it as the service she wanted to promote the most, however when clicking on the services button on the top navigation bar some users would look past the breadcrumb navigation within the page itself and not be aware that IPS offered different services. We added a drop down to the top navigation for the services button so users would immediately see that IPS has 3 services offered.
Future Considerations
While testing of the word ‘praise’ has not turned up any negative reactions, there is a concern that it carries a slightly religious connotation. This is the reason it was not chosen over accolades on the first revision. However additional brainstorming has revealed ‘buzz’ as a possible candidate to replace praise. This new word will have to be tested before it is considered as a viable alternative.
Due to the limitations of the Invision prototype we were not able to implement various ideas for user delight that we had in mind while constructing the site, such as dynamic movement of the bubbles the appear on the pages as the users’ mouse cursor moves past them. These ideas have been presented to the developers and will hopefully be present in the future renditions of the website.
