#Shipped | #Web | #no-code Development

Electric Potential

Electric Potential is a nonprofit dedicated to equipping Gen Z with the tools and resources to create meaningful social change in their communities and beyond. The goal of our website redesign was to modernize and enhance the user experience, making it visually engaging, user-friendly, and reflective of our brand’s energetic and bold mission.

Visit Prototype

Full Case Study

Role

UX/UI Designer, No-code Developer

team

2 Developers (including myself) 4 Designers (including myself)

timeline

September 2024 - January 2025 (16 weeks)

industry

B2B, B2C

WHAT I DID

THE BRIEF

∙ AUDIENCE ANALYSIS
∙ project GOALS
∙ WIREFRAMES AND PROTOTYPE
∙ COMPONENTS LIBRARY
∙ FEEDBACK SESSIONS
∙ no-code DEVELOPMENT
∙ USER TESTING

After the successful rebrand of Electric Potential, our Executive Director recognized the need for a website redesign to align with the company’s new identity and mission. The goal was to create a modern, visually engaging platform that better represented the energy and boldness of our brand, while continuing to serve as a reliable resource for Gen Z. The previous website was static, flat, and lacked interactive elements, making it difficult to engage users and convey the dynamic nature of our work.

Our redesign introduced a dark theme complemented by bold neon colors and dynamic content, creating a more vibrant and engaging user experience. By incorporating interactive elements and a more intuitive layout, the new site captures the essence of Electric Potential’s mission, offering both visual appeal and ease of navigation. The result is a website that not only reflects our brand identity, but also provides Gen Z with an interactive, immersive space to explore and engage with social change content.

design PROCESS

TOOLS USED

Figma

P

Procreate

Framer

electric potential home

outdated home: what we started with

updated home: what we ended with

the process

establishing project goals

Before diving into the design, we focused on defining our project goals and understanding our target audience. This foundational step was crucial in ensuring that the website would effectively meet both the needs of our audience and the objectives of the project.

project goals

Pioneer a new approach to youth-driven media for social change through visual journalism.

Design an interactive and engaging website, allowing Gen Z to learn about and actively engage in social issues.

Create an interactive experience that resonates with today’s youth while remaining informative and empowering.

project goals

Pioneer a new approach to youth-driven media for social change through visual journalism.

Design an interactive and engaging website, allowing Gen Z to learn about and actively engage in social issues.

Create an interactive experience that resonates with today’s youth while remaining informative and empowering.

audience

Gen Z, especially historically marginalized youth, who are passionate about social change and eager to engage with content that speaks to their experiences.

Potential funders, partners, and sponsors who are interested in supporting youth-driven initiatives and the mission of Electric Potential.

audience

Gen Z, especially historically marginalized youth, who are passionate about social change and eager to engage with content that speaks to their experiences.

Potential funders, partners, and sponsors who are interested in supporting youth-driven initiatives and the mission of Electric Potential.

iPhone app screen playing recorded audio from dog

iPhone app screen allowing user to set dog’s voice

iPhone app screen scanning dog’s Barc* device using the camera

Step 01

Clip your Barc* and scan to sync

Simply attach the device to your dog’s collar and have them give a few Barcs* to calibrate their voice while scanning with our mobile app.

Step 02

Set your dog’s voice

Use AI to create a voice that your dog would actually sound like. You can also select from a list of celebrity voices.

Step 03

Listen live or from your Barc*hive

Your dog’s Barc*s will be played from their device, but we also record every Barc* for your remote listening or future playback.

the opportunity

challenge for the website redesign

Social issues are often a sensitive topic, and many Gen Z individuals struggle to find reliable, trustworthy news sources. Electric Potential sought to create a visually engaging website that remains a credible resource for our audience. The challenge was to strike a balance between presenting informative, impactful content and incorporating engaging visuals that resonate with our audience.

goal for website redesign

Keeping our recent brand refresh and target audience in mind, we had a vision of designing the website to be interactive, relevant to Gen Z, visually engaging, and informative. The redesign aimed not only to refresh the site’s look but also to ensure its content was thoughtfully curated and aligned with our mission.

The outdated website includes

The outdated website includes

The outdated website includes

The updated website includes

The updated website includes

The updated website includes

wireframes

iteration

After constructing our initial wireframes, we wanted to refine the structure and elements before finalizing the prototype. We gathered valuable feedback from the entire Electric Potential team, across all departments. We then made adjustments to ensure the design was tailored to Gen Z and engaged them both visually and content-wise. These collaborative feedback sessions allowed us to fine-tune our design for maximum impact.

final prototype

Due to serious and critical circumstances, Electric Potential's operations were unfortunately brought to a full halt, which required us to take down our website. Months before this occurred, we had finished developing our prototype in Framer, creating a dynamic, interactive, and animated website that was shipped and published. We conducted user testing on our new website and brand refresh and reported extremely positive metrics of improvement. Unfortunately, as the company is no longer operational nor active, I am unable to showcase the shipped version of the website, as it has been taken down.

design language

Our design language is the visual identity that defines our website's personality and sets the tone for how users interact with it. Such key visual elements and decisions shape the overall vibe and mood of our app.