Solar Plants Inspect App

BACKGROUND

What is the Solar Plants Inspect App?

A mobile application integrated with a cloud-based platform facilitates the tracking and management of construction activities on utility-scale solar power plant projects across numerous global installations.

PROBLEM IDENTIFICATION

What are the key issues I identified in this app?

Unclear User Flow

Users struggle to navigate
the app effectively.

No Ticket Search

Users have difficulty finding and
managing tickets.

Design Inconsistency

Visual elements and styles
lack uniformity.

CRAFTING A PROBLEM-SOLVING QUESTION

How can I enhance the overall user experience by simplifying and clarifying ticket creation and management, while reducing app usage time?

TASK OPTIMIZATION AND PROBLEM RESOLUTION

I set three key responsibilities for defining goals and solutions.

1.

Refine the user flow for
ticket creation

2.

Implement list view and filtering options

3.

Develop a comprehensive design system

USER RESEARCH

Who are the users?

Solar Workers by Age Group

Source: IREC Nation Solar Jobs Census 2022, U.S. Bureau of Labor Statistics

Percentage of Solar Firms Offer a Training Program

Based on research into age groups, I discovered that workers in solar plants are generally younger than the average U.S. workforce, with many individuals joining straight out of high school or college. Additionally, only 31% of solar firms offer training programs. Taking these factors into account, I determined that this app should be extremely user-friendly, requiring no training or instructions, and featuring straightforward steps and clear UX design.

Client Interview

Client interviews are crucial for gathering detailed requirements to thoroughly understand their needs and expectations. Prioritizing these interviews allows me to gain valuable insights directly from clients. I also utilize A/B testing to compare different design versions and identify the most effective solutions. Conducting comprehensive product reviews gathers feedback on performance and usability, ensuring the final product meets both client and user expectations.

MY DESIGN CONCLUSION POST-RESEARCH

The app should prioritize a user-friendly design, minimizing unnecessary steps and ensuring a clean, intuitive interface.

DESIGN PHASE : PROTOTYPE

1. Refine the user flow for ticket creation

During recurring interview sessions with a high-level direct client, my focus was on exploring and refining the optimal user flow for their employees, who are individual contractors. This involved conducting straightforward Q&A sessions, performing A/B testing, and guiding them through various scenarios using high-fidelity mockup prototypes. Ensuring a seamless and time-efficient process was crucial, especially considering the app would be used under specific conditions such as high sun exposure. Here's a basic outline of the user flow:

User Scenario #1: Creating an Ad Hoc Ticket While Investigating the Solar Plant Site

See Something, Say Something.

The primary function of this app is to facilitate the reporting and resolution tracking of any identified issues, adhering to the principle of "see something, say something."

  1. Individual contractors venture into the field.

  2. Identify an issue requiring resolution.

  3. Generate a ticket with detailed information.

  4. Report the issue to the manager and monitor its progress.

Mockup Details

DESIGN PHASE : INTERACTION

2. Implement list view and filtering options

UX Research : Exploring User Patterns for Map and List View Transformation

I delved into the world of map-based apps, exploring the likes of Yelp, Airbnb, Redfin, and Untappd, among others, in search of inspiration for the coveted Map-list conversion design pattern. These apps have carved out their niche in the digital landscape, so why not learn from the best? After thorough research, I uncovered three prevalent conversion design patterns that reign supreme.

#1: Bottom Drawer List View

This design pattern involves displaying a list view that emerges from the bottom of the screen, overlaying the map view while still allowing users to interact with both elements.

#2: Fixed Convert Button

This design pattern places a prominent button in a fixed position at the bottom of the screen. This button allows users to seamlessly switch between map and list views with a single tap.

#3: Adjacent View Toggle Icon

This design pattern places a toggle icon adjacent to the search bar, offering a streamlined and space-efficient method for switching between map and list views.

..And my decision lands on the #3 Toggle Icon!

Here's the rationale:

Based on comprehensive internal feedback sessions, integrating the "Create a Ticket" flow within the bottom drawer proved more effective than pursuing the #1 option. Consequently, adopting the #2 button to conserve bottom space is deemed inappropriate.

Navigation Interaction

  • Map/List View Converter

  • Tickets Status

  • Online/ Offline Converter

Filtering System

  • Added element pills for quick access based on user research.

  • Detailed filter page accessible via the filter pill for advanced options.

List View Workflow

DESIGN PHASE : DESIGN

3. Develop a comprehensive design system

Clarifying the Design Principles

  • Tailored to suit a niche B2B audience, our design system embodies a specific and exclusive aesthetic.

  • Prioritizing clarity, precision, and functional efficiency as a reporting tool, it maintains a corporate, instructional focus.

  • Unlike widely used social applications, our platform's design is crafted to convey a professional, purpose-driven aesthetic.

Typography

Figtree

Based on my assessment of Figtree:

  • Readability: Serif fonts like Figtree may be less clear on small screens due to intricate details at smaller sizes. Opt for a suitable font size and weight for readability on mobile devices.

  • Screen Resolution: High-resolution screens improve the clarity of Figtree on mobile devices, while lower resolutions may compromise fine details.

  • Context and Branding: Figtree is ideal for mobile apps or websites seeking a classic or elegant style. Sans-serif fonts may be better for modern or minimalist interfaces.

  • Accessibility: Ensure font size, contrast, and spacing meet accessibility standards for Figtree's readability on mobile devices.

Color Palette

Grid System

Iconography: Streamlined and Functional

In response to feedback, I refined the icon design to better align with the desired art direction. By reducing the use of rounded corners and simplifying lines, I ensured that the icons remain functional while adhering to the established style.

UI Components

Filter Bar

Buttons & Chips

What was improved

  • Refined User Flow: Optimized navigation and task completion pathways.

  • Enhanced UI/UX Clarity: Improved user interface for more intuitive interaction.

  • Optimized Hierarchy: Structured content and features to enhance usability and accessibility.

CONCLUSION

Empowering Solar Power Plant Operations

Implementing this new design system and refining user flows represent a notable achievement. By offering individual contractors a user-friendly solution, we enable seamless reporting of observations and checklist creation on their devices. This system is poised to benefit over 150 solar power plant sites globally.

Next

Lightweight Learning Platform Design