UniHome
UniHome is a smart home application designed to cater for all technological skill levels.
Overview
UniHome is a smart home application that is planning on releasing a series of connected devices, intending to give customers control of their home.
With the implementation of the app, they want to appeal to a larger group of users by increasing the age to 25-50, with the understanding that this user base might have divergent technology preferences than their current users.
UX Design process
With a three week timeline for the completio of this project, we aim to use our time efficiently by utilising the same methods as a design sprint, altered to our needs.
The final results is a fully prototyped user journey, developed with introductory HTML and CSS
Proposal
UX Research
Profiling personas and use cases
Low fidelity wireframes
Hi fidelity prototype
Development
This is the proposed timeline for this project.
User Survey
We knew that there were already home automation apps out there, so we wanted to gain insights on how users approach smart home appliances and their attitudes to the technological space. This helps us understand their current fustrations to not only improve our product, but also look at their uncertainties to find out how to convert users to the smart home atmosphere.
We are surveying users from the ages of 25-40, because we are focusing on the interface.
The questions are created with multiple choice options to simplify it for the users that are not too familiar with smart home devices.
Full Survey
Initial reaction and usage of smart home applications
In our first survey, we asked generic questions to understand user’s fustrations with currently owned smart home apps, and also hesitations for those that do not have any.
We found that a lot of the user’s pain points were navigation issues and how easily accessible the application is compared physical switches. We then conducted a secondary user test based on navigation with questions based on the results from this initial test.
2. Accessibility and Navigation
We looked at what the user requests were for the navigation, due to time constraints we weren’t able to go too in depth, but rather focus on a single user journey.
As most users pointed out the convenience of visual design for efficiency while navigating the app, we also decided to compare three current applications. This gave us insight to how each app would perform visually and what users would be looking out for in an app.
3. User comparative survey
User Survey Conclusion
These are the main pain points and requests by the user to keep in mind for our design stages.
We found that there is such an emphasis on visual icons when a user wants to access something immediately, while also understanding that the complexity of current apps act as a barrier to users and their adoption to this technology.
60% of users thought that visual icons would help simplify the app. This is further proved when users were prompted to choose the best interface between three different companies. It was interesting to see that Google home was chosen by 70% of users, although google uses a lot more steps, they have the clearest icons shown
Comparative analysis
Due to navigation being the biggest pain point, we decided to conduct a comparative analysis using the least and most preferred app in the user survey. To look deeper past the visual icons and understand the user experience, we also drew up the user journey within the respective apps.
Google Home
User Flow
Looking at the user flow for google home, there are extra steps that need to be taken in order to use the app efficiently. This is helpful for users with multiple devices, the preparation to set up initially optimises the flow later on, but users with one or two devices would find the entire system complicated.
There seems to be an information overload because google as a company works as an entire ecosystem, so every item needs to be added into the application.
Pros
Cons
- Long scroll to see every individual device.
- No customization about how the front page is formatted
- Set colors that you can change your light to
- If a device is not linked to a room, you have to scroll to the bottom of the front page to get to it, you can’t access it through the quick functions.
- Error message is “Something went wrong”, further troubleshooting requires researching online
- Global settings to turn everything on/off
- Main function is available on the front page for quick access
- Allows you to group devices together to one area and control the whole room at once
- Tells you how many of the same devices is in one area of the house
- Quick functions have overlays so you don’t have to navigate to a different page
Mi Home
User Flow
Looking at the user flow for Mi Home, there are a lot of customization available to the user in a very short pathway. A lot of the functionality is activated through gestures that are not available in a tutorial, this assumes that the user is already familiar with technology.
Pros
- Easy and quick navigation (Press device and then all the customisation functions are available)
- Quick visual instruction to tell you how to use the controls
- There are a lot of customisation settings
- Can switch through single devices and rooms on the home page
- Quick on/off buttons on front page - Can customise the layout categories by long pressing
- There is a drop-down menu as well as icons, so there is no need to scroll down
- Provides an automated system similar (if…...then…..)
Cons
- Cannot turn on specific rooms at a time
- Cannot customise specific functions for an entire room
- Allows you to clear cache, but gives no information about data
(further research shows the app is uploading around 1.8gb data a week but no one knows why)
Gap assessment
With the UX research performed above, we are using these results to determine the appropriate solutions for our design based on the goals and user needs.
This was created so that we have a clear sense of direction to move forward on. We chose the main problem to focus our project on, this will in turn help with usability tests, and how to move forward with the rest of the app without having to jump straight in and design all the pages.
Layout
The applications are made for people that are already familiar with technology, this is shown that 30% of users are skeptical of buying smart home products because of how complex the user interface is.
Google home received the most positive feedback due to their simple and visual based design, while comparing both user journeys, Mi Home is more simple based on usability. A note for the design would be to close the gap between the two ends of the spectrum and utilise their strengths while minimising the weaknesses.
Usage with the increase of digital products, apart from convenience, users want to be able to track their energy usage throughout the day. Neither of the competitors have provided any information, especially for the younger market where the price point of these devices already act as a pain point, there would be a benefit for them to understand the different areas that contribute to the energy bill and allow them to adapt to their financial situation.
How we are going to move on with the design
We are targeting a wide age demographic where some users aren’t too comfortable with using technology.
Users bring up that smart home applications are catered towards an audience that are already comfortable using quick actions. It is easy to turn the devices on and off, but further customisation relies on extra steps. Put an emphasis on using visual icons, and including an easy step by step tutorial. Allowing the user to customise the layout of their front page will help them familiarise themselves with how to use the app and remember it.
Personas
As we are only creating one user journey, we created two personas because home automation is such a personal change within a user’s home, we want to be able to create an application to cater different lifestyles.
While we are focussing on navigation, we also want to look the possibilites of what features to market this app to sell to users.
Not being able to conduct a large user survey group with limited resources, we looked into several different public case studies, such as
PWC Smart Home case study
Living inside a Smart Home
As well as using data from interviewing our users from the survey.
Wireframes
We drew up wireframes to visualise the layout.
During the wireframe process, we found that we would have to go through multiple iterations to test usability because almost all the interaction was done on one screen. So we conducted informal usability tests by showing multiple users the wireframe and asking their thoughts on how to navigate it.
We first gave them the artboard without any prompt to see how they thought of it and how they would access other pages.
We split the page into two modes, all devices and rooms.
This proved to be ineffective because they held too much information as an overview of all devices, so the user would have trouble turning on and off their devices quickly.
We also found that this would not cater to users that might only have one or two devices.
We had a multitude of buttons in an attempt to combat the above problems, but it ended up too messy.
We changed the dynamic of the home page.
We displayed each individual room for the user to switch between, as well as a morning/daytime/night mode.
While this was well received, we found that there were too many buttons in the header.
We decided at this time, with the blessing of our users, that we would add in one long press touch point in order to simplify the design. This would be explained in the initial tutorial shown when users sign up.
Prototype
I had gone through multiple iterations with the wireframe phrase and also performed many casual usability tests on them.
This led the final prototype to have a polished design that was agreed by the users. I asked 3 participants to do tasks for a user journey on a final prototype to finalise the design.
We conducted a small usability test through the user journey, as the home page had gone through multiple runs to ensure that it works as the user needs.
We ask three participants to do tasks on the final prototype to finish the design,
The tasks performed were:
Log in
Add in a device
Change the color of the light
Schedule a time on the light to turn off.
Results
The only complaint that most of the users had were getting into the light page and editing the rooms. This was because there were touch points that were invisible to the user. I decided to add in a tutorial scenario for the users at the starting page to keep the efficiency while also allowing the user to have a multitude of actions within their reach.
As the homepage has so many different touch points, we wanted to mitigate the rest of the pages by creating only one focal point.
The tutorial pages has an overlay so the user would only focus on the action that they are learning.
Design
Typography
Colors and Icons
Final overview
Creating this UX report allowed me to look at the finer details of experience design. I had the opportunity to look at what current successful applications works and how they were presented to users. Through the research, I understood that another app flooding the market may not be necessary but there are always things to improve on for different user bases. I really got to understand the mobile touch points for users and also how to smoothly integrate so many different functions into one page.
Looking back, during the comparative user testing phase, I would have loved to dive deeper into how a user perceives an interface from first glance and how that changes as they actually begin to use it.