UX/UI Case Study: Preception
Introduction
How do you create a lead-generating website for a product that has previously never existed? That was our challenge when designing a responsive website for Preception.io: how to design for users that have an inherent distrust for the unfamiliar.
Before we begin, a little about Preception:
Preception is a cognitive training program, designed to enhance athletes’ spatial awareness and decision-making processes in a real-life team environment. It is a tool using portable technology to measure the “it” factor that coaches feel when discovering the most promising athletes, with no way to measure it…until now.
So what’s the catch?
Preception is still in its alpha prototyping phase. Our client’s goal was to gain more investors and awareness surrounding Preception, however we were unable to share any empirical evidence of its efficacy due to confidentiality reasons.
Business Goals and Project Goals
After meeting with our client, we were able to deduce the business goals for Preception: gain investors. However, because there was still much content we weren’t able to utilize, our project goal was to create a platform that garnered enough interest from users to reach out to Preception and contact the team.
We wanted to create a conversational site, where users could have enough questions answered to gain trust with the team. We also needed to keep enough mystery to allure the users into reaching out and learning more, and with the content limitations my team and I were eager for the challenge.
Research
Fortunately, our client came prepared with a plethora of previously conducted research. He supplied us with a comparative/competitive analysis done in the early stages of Preception’s ideation, which we then supplemented with our own research.
Preception’s competitors (listed at the top) are colour coded to correspond with the specific area of the industry that they inhabit.
There was a high density of competitors in two areas: sports psychology for individuals, and strength and conditioning for the elite teams. Preception fills the gap, conducting cognitive training for pro/elite teams.
Interviews and Surveys
Unfortunately, we were unable to get many responses from our survey. We had emailed sports organizations, posted to different Reddit groups for coaches and sports enthusiasts, as well as reached out to personal connections in the industry. Because of the very specific niche our client is in, it was difficult to hear from our targeted audience on a wide scale.
That being said, the 17 responses that we did get gave us some key insights:
We conducted 3 interviews with previous clients/current investors and asked them what were the main motivations that made them invest. We noticed that trust was a large factor in deciding to invest in Preception.
One investor mentioned that after reading our client’s book regarding the program, she was immediately swayed. She conducted her own research, and after meeting our client, developed a sense of trust with him and the product.
Another factor that came up was how original the idea was. As mentioned with the CC analysis, there was a high density of organizations focusing on different quadrants of the industry, mostly with individuals and in the sports psychology area. Preception’s program filled a gap that few companies were even aware of, and that intrigued investors.
“No other product in the market like this”
“This is cutting edge…nobody is doing it!”
“Show me what it does, the data and analysis, and the improvement of the player(s)”
After talking to our contacts, another factor came up consistently: in order to attract other investors, we needed to show them exactly how Preception works, using facts and data.
After we interviewed our targeted users, we knew our user goals:
Mood boards
During this project, we were also responsible for the UI portion. This was an exciting challenge, as we had previously focused solely on the UX elements in past projects.
Having worked closely alongside our UI focused peers, we had a solid understanding of the different aspects involved. During the planning phase, we met with our client a second time and presented our moodboards and style tiles to him.
With our design inception, we had to come up with buzzwords, colours, and feelings that we felt encapsulated the vibe of Preception. A mood board is an assortment of images that depict the feelings we are wanting to elicit for the website. This is also when we start playing around with colours and figuring out how we want the overall aesthetic to look.
Style Tiles
A style tile is a snapshot of how the pages might look when the high fidelity screens are completed. The colour scheme is more or less solidified, and you start deciding on different typefaces as well as any iconography or graphics. We presented two different design directions to our client, choosing between a more minimalistic look-with lots of white space and gold accents-and a more darkened tile, filled with dark blues and geometric shapes.
Our client liked the “edgier” feel of the dark blues, so that is the direction we decided to go with when designing our high fidelity screens.
Affinity Diagram
Now that we have all our qualitative data from the surveys and interviews, we are able to organize it into an affinity diagram. This helps us discover patterns and constants within the data, figuring out what is truly important to our users and how to combat these issues with our website.
This helped us visualize the different elements that were important. Moving into the planning phase, we now had certain features we wanted to incorporate into the site in order to bridge these different goals:
- Strong narrative
- Data
- Testimonials
- Team photos and brief descriptions of their roles (to increase trust)
- Contact form
Planning
Persona and Storyboard
Now that we had our research conducted, we were able to come up with a persona; a fictional user with goals and pain points based on our research.
Without further ado, meet Anthony!
Anthony Macdonald is a former coach of the UBC Thunderbirds, and is now an investor for various sports organizations. He is frustrated because his teams aren’t improving fast enough and are continuously losing games, and he’s having a hard time finding effective training tactics.
The below storyboard shows Anthony’s pain points, and how Preception would help him with his goals. Storyboards are a tool to help us gain empathy with our users and, like personas, help us keep the audience in mind when designing the interfaces.
User Flow
A user flow is the ideal way our user would move through the site; what information they would look for first, what pages they would visit and in what order, etc. Our user flow was fairly simple for this site, with five major steps:
- Enter homepage
- Read about Preception’s 4-step process: Observe, Orient, Decide, Act. The process they train their athletes to do in a more quick and efficient way, through rigorous training
- Read about the Preception On Demand System. This includes their main methods of teaching and evaluation: hardware, software, and analytics.
- Read about Preception’s performance metrics (i.e. What aspects they are evaluating when observing their athletes and analyzing their performance)
- Finally, after reading through the previous pages, they would confidently contact Preception to gain more information.
Design and Testing
Before starting our wireframes, we first got our team together and did a group exercise called “design studio.” During this exercise, each team member would take two minutes to silently sketch out their idea of how certain screens would look. After the time is up, the team takes turns to discuss their sketch and what they like and don’t like about each screen.
Design studio is a great way to make sure each team member is on the same page when designing the paper prototypes.
We wanted to try and keep our pages as simple as possible, which didn’t turn out to be too challenging considering we had a limited amount of usable content to begin with.
We ended up creating multiple pages, however, the home page was a long scroll that contained a brief synopsis of each other page (with CTA’s to encourage the user to “learn more”).
However, as we were testing the prototypes we found several elements that were confusing to users:
In the Performance Metrics page for the mobile screens, we found that it was not clear to testers that each line was clickable to read the description. We ended up making the lines more button-like to make it more clear to the testers that they could click on them.
The buttons tested much better with users as they readily clicked on them, however they were unable to see the insight which appeared at the bottom of the screen. To combat this, we made the buttons open up accordion-style so the information was easily accessible to the users (shown below).
In the Preception On Demand System (POD System) page, originally the idea was to create clickable icons which could then expand to show the descriptions of each element, similar to the data metrics system. However, through various iterations, the icons were never clear to the users that they were clickable, even after hi-fi testing and adding the colouring. To combat this, we ended up putting all the text on the one page and leaving the image as non-clickable icons (shown below).
Future Considerations
If we had more time with this project, there would be some things we would improve upon or add:
- More images and/or videos of Preception’s technology in action. We were unable to use them for this project, however we would add them in the future in order to increase trust with users, as this was something that came up as important during our research.
- Hard data. Our client had a few quantitative results from the testing he had previously done, but we weren’t able to add them at this time. Once more testing is done and the results are more stable, they would be able to be added to the website.
- The price of the product.
With these changes, we’re confident that we could increase users’ trust in the product and, in the process, achieve our client’s business goals and gain investors.
This website was a challenge to create due to the limitations in content, however through our testing and iterations we were still able to create a product that bridged the gap between our three goals: an intuitive and educational responsive website for our client to gain investors and awareness for Preception’s brand.
