System76: Designing Dual Mode Battery Icon for Pop!_OS
.svg)
Year 2022
Client System76
Role Lead Product Designer - User Research, Interaction, Visual Design, Prototyping & Testing
Time 1 Week
Goals Design battery icons that clearly communicate the battery status and charging mode to users.
Deliverables Research, ideation, UI design, end-to-end prototype and testing
Tools Figma, and Adobe Creative Suite
Client System76
Role Lead Product Designer - User Research, Interaction, Visual Design, Prototyping & Testing
Time 1 Week
Goals Design battery icons that clearly communicate the battery status and charging mode to users.
Deliverables Research, ideation, UI design, end-to-end prototype and testing
Tools Figma, and Adobe Creative Suite
What is Pop!_OS?
Pop!_OS is a popular Linux distribution known for its focus on usability, performance, and aesthetics. The design team recognized the importance of conveying battery information to users while also promoting battery health. The team decided to implement a dual-mode battery icon: one for default mode, and another for when the battery is capped at 80% during charging to prolong battery lifespan.
Goals and Objectives
- Maintain a consistent visual style with the existing UI elements of Pop!_OS.
- Ensure the icon is easily recognizable and understandable to users.
- Help users understand the benefits of the 80% charging cap for battery longevity.
Problem Statement
The current battery icon design in Pop!_OS fails to provide users with clear and informative visuals regarding their battery status and the benefits of capped charging at 80%. Users are left unaware of the potential impact of their charging habits on battery longevity, leading to suboptimal battery health management.
Guiding Questions
- What are the current limitations of the existing battery icon design in Pop!_OS?
- What challenges do users face in understanding the difference between regular and capped charging modes?
- How aligned is the current battery icon with the overall design language of Pop!_OS?
Comparative & Competitive Analysis
A comprehensive approach was taken to inform the design of the dual-mode battery icon. A thorough analysis of user personas was conducted, delving into the preferences and behaviors of Pop!_OS users in order to gain a deep understanding of their expectations and needs from a battery icon. Additionally, a comprehensive competitive analysis was undertaken to study battery icons across various operating systems, pinpointing best practices and potential avenues for innovative design. To further enhance the user experience, research also delved into battery health education, examining battery longevity best practices. This exploration revealed that implementing a capped charging mode at 80% would be a prudent approach to promote battery lifespan. These research insights laid the foundation for a well-informed and user-centered design direction for the new battery icon.
Ideation
The process of idea generation, or ideation, played a pivotal role in shaping the innovative aspects of this project. By fostering an environment of creativity and open exploration, the ideation phase allowed the design team to conceptualize diverse approaches to address the challenge of creating a dual-mode battery icon for Pop!_OS. Through brainstorming sessions, sketching, and collaborative discussions, a range of design possibilities emerged, each building upon the insights gained from user research and competitive analysis. Ideation not only encouraged the exploration of unique visual elements but also encouraged the integration of educational components that could effectively communicate the benefits of the capped charging mode. This phase served as a foundation for the eventual design direction, enabling the team to select and refine concepts that aligned seamlessly with the goals of clarity, usability, and educational value. The embrace of ideation showcased how creative exploration can lead to innovative solutions that resonate with both users and the broader design philosophy of the operating system.
View Full Design FileDefault Mode Icon
The default mode battery icon features a standard battery shape with a subtle gradient to indicate the charge level. The lightning bolt symbol within the battery visually communicates charging.
.svg)
Capped Charging Mode Icon
For the capped charging mode, the battery icon retains the same shape but adds an overlay around the 80% mark. The overlay serves as a clear indicator of the battery's capped charging status to promote battery longevity.
The Solution
Creating a battery icon with two different modes for Pop!_OS involved meticulous research, conceptualization, and design iteration. The final icons achieved the goals of clarity, consistency, usability, and education. By promoting battery health awareness, the design contributes to a more informed and empowered user base.
Project Learnings
1. Education as Empowerment
Integrating educational components into UI elements, such as the "80%" badge, showcased the potential for interfaces to not only inform users but also empower them to make informed decisions.
2. Balancing Familiarity and Innovation
Striking a balance between maintaining familiarity with existing UI elements and introducing innovative design concepts highlighted the importance of incremental change and managing user adaptation.
3. Longevity of Design
The design decisions made for this project had the potential to impact user behavior and experiences over an extended period, highlighting the lasting influence designers can have on user practices.
Integrating educational components into UI elements, such as the "80%" badge, showcased the potential for interfaces to not only inform users but also empower them to make informed decisions.
2. Balancing Familiarity and Innovation
Striking a balance between maintaining familiarity with existing UI elements and introducing innovative design concepts highlighted the importance of incremental change and managing user adaptation.
3. Longevity of Design
The design decisions made for this project had the potential to impact user behavior and experiences over an extended period, highlighting the lasting influence designers can have on user practices.