I started off our research process by having a one on one interview with Alex (client), where he deconstructed his entire business model so that we had a full understanding of what Transform Your Building was and how it operated. Transform Your Building had already conducted their own interviews and research data, which we were given access to. This research data was then used to create the user personas.
For the competitive and comparative analysis I primarily used Comfy and Wealthsimple among other sites. Key design inspiration takeaways:
• Delightful design elements (eg. OVG, Wealthsimple)
• Visual explanation of smart tech systems
• Video explanation
• Use of icons to illustrate smart tech (eg. Comfy app)
• Virtual Tour to explore a space
• Graph System (eg. Wealthsimple)
These were the User Personas that were generated based on all the interviews and research data I received from Alex.
Primary User Persona
The primary user is looking to build a commercial building and is interested in installing smart building technologies in that building.
Goals
• Financial benefits;
• Attracting brand clients with an aesthetically pleasing modern building.
Frustrations
• Not having enough knowledge about SBT and its benefits and not having enough time to figure it out
• Concerned about the cyber security risks
Secondary User Persona
The secondary user is an owner of a building and is interested in potentially installing smart building technologies.
Goals - Interested in smart building tech for:
• Financial benefits;
• Tenant satisfaction to retain and attract good tenants;
• Make his building a more valuable asset
Frustrations
• Not having enough knowledge about SBT and its benefits and not having enough time to figure it out
• Concerned about the cyber security risks
• Doesn’t trust SBT, prefers to stick with known vendors
Based on the research and personas the two major painpoints existing in the industry that I needed to address in the website were:
1. Ignorance of what SBT is and it’s benefits
2. Lack of trust in SBT and it’s vendors.
These were the user stories we created from the goals and frustrations present in the user personas.
Design a website that outlines what smart building tech is, how TYB is better than competitors, and most importantly how the installation of smart building tech benefits the customer. I had to achieve this while also conveying brand credibility and trust.
1. Virtual Tour — This feature was added to give users a visual idea of smart building technology and how it worked (so they would better understand the technology). It also created a level of interactivity on the website to keep the user more engaged right from the start.
2. An Interactive Calculator Graph — This feature was added to give the user a concrete number of what their savings would be if they installed smart building technology. This was a key factor in showcasing SBT benefits, and once again created a level of interactivity on the website to keep the user more engaged.
3. Categories Page — This page was crucial because this was the primary navigation page for TYB and all its vendors. By explaining all the different categories of technologies and their own unique benefits, I was able to give the user a proper understanding of the technology, and allow them to easily navigate to the vendor they desired.
4. Calculator Page — This page was a more complex and comprehensive savings calculator than the one on the Homepage. The functionality was the same as the one on the Homepage however offered more input options to give a more accurate output. The feature at the end was a submit CTA which would get a corresponding vendor to reach out to the user based on their input information.
Colours
• Blue and white were used as the main brand colours, they represent a professional, business mood
• Salmon-pink was used as the accent colour
• Orange was used for CTAs
Typography
The combination of a serif for the headers (conveys: traditional, established, trusted) and sans serif for the body text (conveys: modern, clean), helped to get across the mood of professional yet minimal/modern design.
Logo
The logo was not the primary focus of this project. I stuck with the company name in the existing URL (Transform Your Building), however I did create the logo shown above.
Two rounds of mid-fi testing were done with 11 different participants. Tasks users were asked to perform a number of tasks which were based on the user stories and the goal of the website. Tasks were centred around:
1. Understanding what Smart Building Technology is and what the benefits are
2. Trusting and being convinced to switch to smart tech vendors
3. Lead generation: getting in contact with a smart tech vendor
Problem 1: Users were unclear on what the “Explanation” menu was in the Nav Bar. The “Explanation” page was the page that covered what exactly SBT was and how it functioned.
Solution 1: I changed the “Explanation” menu to “How it works”. This was much more clear for the users.
Problem 2: Users were slightly confused by what the menu “Technologies” was.
Solution 2: Since TYB is simply an entity connecting users with vendors, I made this more clear by changing the “Technologies” menu to “Find a vendor”.
Problem 3: The “Calculator” menu was by far the most ambiguous for the users. This was the savings calculator (a more complex version than the one on the Home Page).
Solution 3: I removed the “Calculator” page (and thus menu) entirely as it was too unclear for the users what the functionality actually was, and also after testing I realized that the users didn’t want to submit info and then be contacted by a vendor, they wanted to reach out to them directly.
Problem 4: There were too many sections with too many CTA’s resulting in a convoluted User Flow. Users clicked CTA’s and then became somewhat lost on where they actually were on the site.
Solution 4: Display all necessary sections in detail on the Homepage and the remaining information will be put into two separate pages. Use CTA’s only when necessary.
Problem 5: There were too many sections in which I covered the explanation of SBT and it’s benefits. These sections were “Explanation”, “How Does it Work”, “Tour”, “Benefits”, “Technologies”. All of these sections somewhat explained the technology and touched on the benefits, this created a redundant overlap of information.
Solution 5: Cover the explanation of what SBT is and all it’s benefits on the Homepage. This was a more effective approach as the major painpoint I was trying to solve was user ignorance of what SBT was and its benefits. By displaying this information in its entirety on the Homepage I educated the user right from the start and eliminated the redundancy of having to repeat the information numerous times.
I was able to create a well constructed design that addressed all the pain points of Smart Building Technology I discovered in the research I conducted.
