Helios: Overhaul of Data-Heavy, Wifi-Management Platform, @Arilia

Helios: Overhaul of Data-Heavy, Wifi-Management Platform, @Arilia

ROLE

ROLE

Project Manager
& UX Designer

Project Manager
& UX Designer

Project Manager
& UX Designer

TOOLS

TOOLS

Figma, Microsoft Office

Figma, Microsoft Office

Figma, Microsoft Office

TIMELINE

TIMELINE

February 2024 - May 2024

February 2024 - May 2024

February 2024 - May 2024

TEAM

TEAM

Sia Harsinghani, Ilyssa Yan, Kayla Wang, Tina Chen, Celena Shen, Renee Du, Sarah Park, Yuki Li

Sia Harsinghani, Ilyssa Yan, Kayla Wang, Tina Chen, Celena Shen, Renee Du, Sarah Park, Yuki Li

Sia Harsinghani, Ilyssa Yan, Kayla Wang, Tina Chen, Celena Shen, Renee Du, Sarah Park, Yuki Li

Problem

Problem

Helios is WiFi-management web-based product designed to efficiently troubleshoot connection issues within a business's physical space, such as a stadium or office.

Representatives from the parent company, Arilia, approached us with an extensive brief, outlining their concerns and vision for an upgraded product that would empower Customer Service Representatives, WiFi-System Administrators, and other stakeholders.

Helios is WiFi-management web-based product designed to efficiently troubleshoot connection issues within a business's physical space, such as a stadium or office.

Representatives from the parent company, Arilia, approached us with an extensive brief, outlining their concerns and vision for an upgraded product that would empower Customer Service Representatives, WiFi-System Administrators, and other stakeholders.

Their main goal was to improve the rate of resolving connectivity issues, with an emphasis on critical situations, ensuring faster resolutions, keeping scalability in mind.

Our approach focused on,

Their main goal was to improve the rate of resolving connectivity issues, with an emphasis on critical situations, ensuring faster resolutions, keeping scalability in mind.

Our approach focused on,

Rethinking the information architecture and navigation

Rethinking the information architecture and navigation

Delivering better UX solutions for data visualization

Redesigning forms and input fields to enhance efficiency

Redesigning forms and input fields to enhance efficiency

Refining the design system to ensure consistency across styles and elements

Solution

Solution

Prioritization of Customization

Prioritization of Customization

Prioritization of Customization

Prioritization of Customization

  • A customizable dashboard that would allow different administrators to tailor the interface to their needs based on their daily tasks

  • Better filtering systems for users to show/hide data based on their specific goals, time, and levels of concern

Enhanced Data Visualization

Enhanced Data Visualization

Enhanced Data Visualization

Enhanced Data Visualization

  • Updated charts and graphs that match industry standards for easy analysis

  • Refined tabular data presentation, ensuring better readability and functionality

  • Redesigned input fields and forms to simplify data entry with clearer layouts and reduced steps

Drag-and-Drop Functionality

Drag-and-Drop Functionality

Drag-and-Drop Functionality

Drag-and-Drop Functionality

Allowing users to move routers within a digital map for better management of network coverage, convenience of maintenance updates and testing cycles.

Information Architecture Optimization

Information Architecture Optimization

Information Architecture Optimization

Information Architecture Optimization

Simplified menus, intuitive use of space and logical pathways ensure users find the tools they need without unnecessary clicks, speeding up problem resolution.

Balanced Branding & Functionality

Balanced Branding & Functionality

Balanced Branding & Functionality

Balanced Branding & Functionality

Effectively combines the company’s branding with practical interface elements, ensuring a seamless and visually consistent experience. This balance not only strengthens the product’s identity but also enhances user trust by aligning aesthetics with a smooth, functional design.

Methodology

Methodology

Planning

Planning

Defining Project Scope

Defining Project Scope

Deconstruction of Client Brief and Use Cases

Deconstruction of Client Brief and Use Cases

Deconstruction of Client Brief and Use Cases

Timeline Development

Timeline Development

Timeline Development

Establishing Communication

Establishing Communication

Establishing Communication

Scheduling

Scheduling

Scheduling

Progress Tracking

Progress Tracking

Progress Tracking

Research

Research

Market Trend Analysis

Market Trend Analysis

Information Architecture Analysis

Information Architecture Analysis

Design

Design

Further Ideation Sessions & Paper Wireframing

Further Ideation Sessions & Paper Wireframing

Further Ideation Sessions & Paper Wireframing

Digital Wireframing

Digital Wireframing

Digital Wireframing

High Fidelity Mockups

High Fidelity Mockups

High Fidelity Mockups

Design System Development

Design System Development

Design System Development

Evaluation

Evaluation

Client Check-Ins

Client Check-Ins

Client Check-Ins

Final Feedback

Final Feedback

Final Feedback

Project Planning

Project Planning

Defining Project Scope

This involved a discussion with the client to articulate the project objectives and outcomes. We identified problems to address and outlined the key deliverables. We also identified key stakeholders and clarified their expectations, while developing a timeline for milestones. Resources were shared and strategies for risk mitigation were discussed, paving the way for successful execution.

Onboarding and Project Introduction

To kickoff, I conducted a team meeting and presented a well-prepared presentation to effectively communicate the client brief, ensuring alignment on project goals and expectations.

I introduced and explained new terminology related to the industry and the product specifically to ensure clarity among team members who maybe hadn't worked with wifi-management before. I, then outlined key issues before allowing the team to explore and familiarize themselves with the product hands-on.

Timeline Development & Progress Tracking

I tried to take as organized of an approach as possible. We used a checkbox system to ensure efficient task completion. I created a master document with all files easily accessible to the team, updating it weekly. By simplifying access and clarifying the process, and in a way creating a syllabus for the project, similar to the classes that my peers and I take at university, I enabled the team to concentrate on delivering quality work, instead of having to navigate new resources every week.

Research

Research

Market Trend Analysis

We started the project by researching market competitors and then held an extensive brainstorming session to explore potential UX and UI concepts.

Due to the lack of access to our client's client database, we were unable to engage with actual users, so we relied heavily on the brief and market analysis for insights. The team comprised members from different years, including freshmen and sophomores, making it essential to foster an environment that encouraged creativity. As the project manager, I aimed to read the room and identify team members with previous experience while ensuring that the atmosphere remained low-stakes.


This unconventional approach, especially for a brief of this scale, proved effective, particularly as many team members were new to such an undertaking.

Due to the lack of access to our client's client database, we were unable to engage with actual users, so we relied heavily on the brief and market analysis for insights. The team comprised members from different years, including freshmen and sophomores, making it essential to foster an environment that encouraged creativity. As the project manager, I aimed to read the room and identify team members with previous experience while ensuring that the atmosphere remained low-stakes.


This unconventional approach, especially for a brief of this scale, proved effective, particularly as many team members were new to such an undertaking.

Information Architecture Analysis

In a time-sensitive phase of the project, I led my team through a combined process of information architecture analysis and some basic forms of journey mapping.

To comprehensively cover all screens, we began by dissecting the existing product, using screenshots to visualize its structure and functionality on a 2D board. This approach provided everyone with a clear understanding of the software.


We opted not to conduct traditional journey mapping because there was no single, definitive way to use the product. With numerous use cases and endpoints inherent in a management system, each interaction could lead to various interpretations of the information presented based on their unique needs and contexts. Instead, we concentrated on understanding the product’s structure and functionality.

To comprehensively cover all screens, we began by dissecting the existing product, using screenshots to visualize its structure and functionality on a 2D board. This approach provided everyone with a clear understanding of the software.


We opted not to conduct traditional journey mapping because there was no single, definitive way to use the product. With numerous use cases and endpoints inherent in a management system, each interaction could lead to various interpretations of the information presented based on their unique needs and contexts. Instead, we concentrated on understanding the product’s structure and functionality.

Design

Design

Since the duration of the project was only around 10 weeks, I wanted to conduct the design process in the form of a sprint; timed, quick and effective.

To comprehensively cover all screens, we began by dissecting the existing product, using screenshots to visualize its structure and functionality on a 2D board. This approach provided everyone with a clear understanding of the software.


We opted not to conduct traditional journey mapping because there was no single, definitive way to use the product. With numerous use cases and endpoints inherent in a management system, each interaction could lead to various interpretations of the information presented based on their unique needs and contexts. Instead, we concentrated on understanding the product’s structure and functionality.

To comprehensively cover all screens, we began by dissecting the existing product, using screenshots to visualize its structure and functionality on a 2D board. This approach provided everyone with a clear understanding of the software.


We opted not to conduct traditional journey mapping because there was no single, definitive way to use the product. With numerous use cases and endpoints inherent in a management system, each interaction could lead to various interpretations of the information presented based on their unique needs and contexts. Instead, we concentrated on understanding the product’s structure and functionality.

Paper Wireframing

Digital Wireframing

Homepage Iterations

Inventory Iterations

Map Iterations

High Fidelity Mockups

Building the Design System

Evaluation

Evaluation

Our main methods of evaluation throughout the development process included,

Client Check-Ins

Client Check-Ins

These were regular meetings with the client to gather feedback allowing for ongoing communication and solving concerns. The client conducted their own assessments of the product or solution to ensure it meets their needs and expectations, helping to identify any adjustments before the delivery of each milestone.

Internal Reviews

Internal Reviews

These were cross-functional structured assessments conducted within the project team to evaluate the different sections of the project. Since the functionalities of the product were so vast, pairs of team members worked on different sections of the platform. At regular intervals, different teams would get their hands on deliverables outside of their own, encouraging critical feedback and continued progress.

Reflections

This project was an incredible experience. Working with such a dynamic and dedicated team, we learned from one another and supported each other through the challenges we faced. The late nights and long hours were a testament to our commitment to delivering a high-quality product. We even ended up submitting our project for reflection and presentation at a design showcase on campus! I am grateful for the opportunity to manage this project and proud of what we accomplished together.

Let's Connect.

Created by Amanda Pinto @2024

Let's Connect.

Created by Amanda Pinto @2024

Let's Connect.

Created by Amanda Pinto @2024

Let's Connect.

Created by Amanda Pinto @2024