INFORMATION ARCHITECTURE
Using the Product Requirements Document (PRD) as a guide, I collaborated closely with the Product Manager to establish the app's information architecture. Although there have been several iterations on the feature structure, the fundamental infrastructure and architecture of the app have remained consistent. This provides the design and engineering team with a comprehensive overview of the entire product. Having a single document that presents a clear and concise representation of how the app works is crucial for developing new features or enhancing existing ones.
Information Architecture
Main UI Wireframe
MAIN FLOWS & DESIGNS
Drawing insights from the user personas and research, I pinpointed the key user task flows that address pain points. In this case study, my focus was on tackling the following:
1AN EFFECTIVE OPERATIONAL DASHBOARD
Dashboards are essential for presenting the most vital and valuable information to users. When it comes to mobile apps, it can be even more challenging to strike a balance between providing users with all the necessary details without overwhelming them.
SafeThings Gateway's operational dashboard is designed to showcase users' current status (including internet speed, online devices, etc.) and display time-sensitive critical information (such as vulnerable ports, active attacks, etc.). Defining the dashboard type has helped me develop a strategy for presenting relevant information to users.
Here's a brief summary of my progress on the SafeThings Dashboard:
UI Design
2ONBOARDING & GUIDED SETUP
“Nobody cares about the thing you’ve designed, unless you can get them past the beginning.”
Julie Zhou - Product Design VP @ Facebook
To ensure users can access the features quickly, it is crucial to reduce cognitive load during app setup. To achieve this, I divided the onboarding and guided feature setup into smaller, more manageable parts that users can easily understand and digest.
Visual Design
Anticipate User Needs: During our initial user study, it was observed that most users found the "Router Setup" step confusing as they assumed it was where they had to input their wifi information. To address this issue, I redesigned the illustration graphic to highlight the location of the router credentials and added an info modal to provide users with more context and clarity.
Errors Aren't Always a Bad Thing: Many people tend to think that error messages indicate poor design or engineering, but this is not always true. In order to ensure that users can understand and quickly resolve errors during the setup process, the product manager and I conducted thorough research on the most common setup errors. We then worked to effectively communicate these errors to users, providing clear instructions on how to address them and continue with the setup process.
By avoiding generic error messages, we can help prevent confusion and reduce the likelihood of users giving up on the onboarding process.
3THE ORIGINAL FEATURE "GROUPS"
In the initial design iterations, I had a concept of creating "Groups" where users could group similar devices together such as "smart home devices," "child's devices," etc. However, it caused a lot of confusion and raised concerns during user testing. For example, device security settings would differ among device types, e.g., smart cameras wouldn't have web or app management. If a user groups different types of devices together, such as laptops and Alexa speakers, how would the security settings apply to those?
Therefore, I decided to simplify the feature by separating Parental Control and Device Security into two separate features to avoid confusion and ensure that security settings were appropriately applied to each device type.
User Flow
Visual Design
THE ITERATION OF PARENTAL CONTROL FEATURE
I collaborated closely with a fellow designer on this feature and it proved to be a great challenge for us to arrive at a feasible solution that satisfied both stakeholders and users.
With the widespread adoption of smartphones and the surge of social media, parenthood has become even more challenging. In fact, a majority (66%) of parents in the United States claim that parenting is more difficult today than it was 20 years ago, with many citing technology as a contributing factor, according to a March survey by Pew Research Center.
We aim to assist parents in keeping their families safe in the digital world. Parental Control is one of the most crucial features of the SafeThings Gateway app. While parental control apps are not a novel concept and several exist in the market, we interviewed ten parents during our studies, in addition to conducting general user research and analyzing internal user data, to gain insights into their expectations and concerns.
FIRST ITERATION
User Flow
Design
AFTER MANY MORE ITERATIONS
After receiving user feedback from the first study, I realized that our parental control feature was too similar to other apps on the market and lacked innovation. To improve the flow, I collaborated with our product manager and engineering team to develop a "restriction" template based on the child's age, while still allowing users to customize settings. Our team managed to shorten the flow from six steps down to three without sacrificing the completeness of information provided to users.
User Flow
Visual Design
THE EVOLUTION OF DEVICE SECURITY FEATURE
To appeal to a broader audience beyond parents, I extended the security settings to cover devices, building upon the same foundation as the Parental Control feature.
I would like to emphasize the small but impactful additions to the flow that received positive feedback from users:
- A guided setup coachmark that reminds users of the powerful feature that protects their devices and network
- Recommendations on applying the same settings to other devices, so that users can avoid going through the same process again
4THE IMPORTANCE OF ALERTS & NOTIFICATIONS
To ensure that users perceive notifications as helpful and valuable, rather than intrusive, I focused on addressing the alert and notification system early in our design process. It is crucial for the visibility of the system status, which is one of the most important aspects of UX design.
To classify notifications into three attention levels, I collaborated closely with the PM and created a consistent color scheme for each level. The notifications are designed to be concise and easy-to-read, and when users dive into them, we provide more useful information and actionable callouts.
5USER STUDY SUMMARY
Two user studies have been conducted by a user researcher so far, and I've participated in all of the sessions to provide assistance and answer any questions users may have.
OBJECTIVES: The first study, which was conducted in February, aimed to identify areas for improvement in the product. Based on the findings, the team made some changes and further enhancements to the application. The second study was conducted to test the usability and information architecture of the app, with the aim of improving the product's overall experience.
RESEARCH QUESTIONS
- Users experience of those who currently use a competitor's apps
- What is the most important information that the user wants to see on the dashboard?
- Do users understand the information presented on the dashboard?
- Do users understand what other information is available to them?
- Do users understand the 3 main areas they can navigate to: Network Settings, Family and Devices?
- What are users' thoughts about the different states (green/red/orange)?
- What are users' thoughts about the copy and the information presented?
DEMOGRAPHIC
METHODOLOGY
OVERALL FINDINGS
First study
- 80% of users mentioned that they liked the clean and neat layout of the app. 2 users thought there was too much information on the dashboard and they were overwhelmed with them.
- 100% of users understood the differences of alert states on the dashboard and how to take proper actions from there. However, 60% of them got confused about the copy and thought it could be simplified and not too technical.
- 50% of parents said they liked the parental control feature, but it did not offer anything new from other parental control apps and they wouldn't use the feature.
Second study
- 100% of users said they liked the clean layout and how intuitive the app was.
- 100% of users understood the differences of alert states on the dashboard and copy explaining how to take proper actions from there.
- About 84% of users understood the speed test numbers on the dashboard, and the remaining understood the information when they went to Network section.
- 5 of 6 parents thought the parental control was easy and quick to set up. 4 of them would use the feature; the rest said they trusted their children to make the right choice.
6STYLEGUIDE & COMPONENTS
I optimized our current library and establish a standardized style guide and component library for SafeThings Gateway. This library will simplify the process of white-labeling our product for business partnerships.
