An Overview
Electric Potential is a media nonprofit dedicated to equipping historically marginalized youth with the resources to become leaders in journalism and social impact. As part of my internship as a UX & Content Designer, I was tasked with redesigning the organization's website in which I challenged content choices for the landing page and About Us page.
Challenge
Social issues can be a sensitive topic, leaving the Gen-Z community unsure of where to find trustworthy news sources. Electric Potential aimed to conduct a modern rebrand by placing a new emphasis on visually engaging content, while remaining a reliable media outlet for their users.
Solution
By redesigning Electric Potential's website, there was a need to find an ideal balance between presenting informative content with engaging visuals. EP wasn't just looking for a redesign, but wanted the new website to include thoughtful content choices appealing to both youth audiences and future sponsors.
My Role
As a UX & Content Designer on the website team, I needed to strategize new, creative ways to present information while following modern UX principles, leading to increased user retention.
I was also in charge of designing the responsive layouts for mobile and tablet, and performing a Figma to Framer audit to ensure all designs were translated seamlessly.
The website team:
Colette Nguyen (Me)
UX & Content Designer
Sam Caguioa
Visual Content Designer
BEFORE & AFTER
BEFORE & AFTER
CONTENT ANALYSIS
Understanding the organization's mission
Brainstorming & mood boarding
We kicked off the website project by creating a mood board that would help us get aligned with the overall web design direction.
We agreed to incorporate a mix of elements such as enlarged titles, a collage format, and hand-drawn sketches to keep it interactive, youthful and informative. This would guide our brainstorming sessions and low-fi wireframe decisions.
After brainstorming and aligning our ideas using the mood board, we prioritized 2 main ideas:
Finding a balance between visuals, text, and white space: Social issues can contain heavy topics especially for younger audiences. How can we condense and present information in a way that doesn’t overwhelm users or obstruct their viewing experience?
Information architecture: How can we create a user-centric experience that displays the most important information about the organization first, and in an order that makes sense?
THE QUESTION
What information should go first, and why?
AN ITERATIVE PROCESS
Configuring the information architecture
We consulted the design department with our low-fi and mid-fi wireframes, making the following decisions for the landing page layout:
A sticky Table of Contents can help users navigate the landing page more freely and with ease.
The Feature Article section will be presented first as it is the main focus and product of EP's rebrand.
The Youth Programs section will be presented last as the programs are still under development (coming soon).
CONTENT STRATEGY
Improving navigation & accessibility
Table of Contents
When considering a seamless user experience as users first encounter the website, we implemented a Table of Contents at the bottom right of the landing page.
By turning it into a sticky component that follows users as they scroll down, users can freely navigate to different sections of the landing page without having to scroll as often.
Interactive Components
EP's previous website was known for presenting too much information on the screen, leading to information overload and overwhelming our users. So to reduce information overload, we incorporated interactive components such as:
dropdown menus
hover cards
Dropdown Menu example
Hover Card example
Addressing business goals
THE QUESTION
What was EP trying to accomplish with their website?
The power of words and CTA buttons
Because Electric Potential is a nonprofit organization, the EP team mainly relies on fundraisers, donations, and grants to help keep the organization running. Keeping these goals in mind, we created clear calls-to-action (CTAs).
To prioritize clarity and conciseness, we placed CTA buttons in relevant spots throughout the website.
Where: Header, footer, hero section of the landing page
Why: Guides users to EP's donation page
Where: At the end of the Feature Article section
Why: Guides users to read the Feature Article, EP's main project for the rebrand
CONTENT STYLE GUIDE
Defining the brand voice
To establish a tone of voice that best suited Electric Potential's branding, we kept our target audiences in mind:
1) historically marginalized youth
2) potential funders, donors, and sponsors.
Keeping it bold & informative
Since Electric Potential aims to educate youth audiences, the tone should be straight to the point with no extra fluff. The copy should not only look but sound bold, just like our color and font choices.
It was important that we consider both target audiences when developing the designs and copy. Because if we want to establish EP as a trustworthy media outlet and build trust with our users, we must stick with a consistent brand voice and tone across all channels.
CONTENT REDESIGN
Designing for multiple breakpoints
After finalizing the desktop, creating responsive designs for mobile and tablet was the next priority to ensure that EP's website can be accessible on all devices.
Since a desktop's larger screen size allows for a richer user experience, designing for multiple breakpoints became a challenge. Preparing responsive layouts required less room for creativity and more for logical thinking.
THE QUESTION
How might we logically present the most important information within a smaller screen size?
Scaling it down
As a starting point, I tackled the redesign of the header and footer by implementing the following:
hamburger menu
horizontal to vertical
Scaling down the header and footer with these techniques ultimately guided my design decisions moving forward, as I would implement a horizontal to vertical approach throughout the responsive design process.
Restructuring layouts and resizing elements
With less white space available, I started with the tablet version and worked my way down to mobile. This required a restructuring from a horizontal to vertical layout to best optimize the limited mobile screen space.
Since the desktop components were quite large given the larger screen space, I needed to create smaller variants for these components and scale the text down to a smaller size to ensure all elements were scaled down evenly and more suitably for a mobile device.
Learnings & Reflections
My first official UX & Content Design role
This was my first real-world project that I got to witness get published. Throughout this project, I learned so much about web design and applied my design thinking skills to the test. I was able to collaborate with my fellow designers and developers during feedback sessions, work in an agile work environment, and learn from my peers about best UX practices.
Through this role and project, I combined my new skills as a visual designer with my previous experience as a content writer. I more clearly recognized the role that content and visual design play at the intersection of UX, and how important Content Designers are in helping build trust, impact conversion rates, and inform users without confusion.
Mastering Figma & Framer
Designing the website from Figma to Framer was great exposure as I gained a better understanding about the power of Figma's autolayout feature and Framer's stack feature. Because I was using autolayout more efficiently, there was so much more structure and consistency in my designs.
What's next?
With the Landing Page and About Us page recently going live, I look forward to seeing the results of this project and gathering feedback on our designs. I'm excited to pursue more UX and content design roles, and how I can integrate my experience as a journalist into my role as a UX content designer.