2025 Co-op Design Project
Designers: Vito Fan (Me)
Design and Development: 1 months
Tools: Figma, Webflow
Project Type: Co-op Design Project
My Project Role
Website Flow and Information Structure
Planned the page flow by organizing key sections such as company overview, mission, values, team culture, and achievements to create a clear and engaging storytelling experience.
UI Design and Visual Consistency
Designed the page interface, including layouts, typography, imagery, spacing, and visual hierarchy, to create a cohesive experience aligned with the company’s branding.
Figma Prototype
Created a high-fidelity Figma prototype to visualize the final user experience and establish the overall layout, content structure, and responsive design direction before development.
Webflow Development
Built high fidelity final website in Webflow by turning the design into a functional website, setting up sections, interactions, responsive layouts, and ensuring the design worked across different screen sizes.
Client
Moment Energy
Moment Energy is a Canadian cleantech company that repurposes retired batteries into energy storage systems to contribute to a more sustainable world.
Design Statement
“
How might we design an About Us page experience that allows visitors to build trust and connect with the company’s story, vision, and impact in a clear and engaging way?
”
Target Audiece
About Us page, the target audience would likely include a mix of users who want to understand the company’s credibility, mission, and expertise.
Potential Investors and Partners
Individuals or organizations evaluating Moment Energy’s credibility, mission, growth potential, and role within the clean energy industry before considering partnerships or investment opportunities.
Potential Talent and Job Seekers
Candidates interested in understanding the company culture, values, mission, and workplace environment before exploring career opportunities or applying for a role.
Clients and Business Customers
Candidates interested in understanding the company culture, values, mission, and workplace environment before exploring career opportunities or applying for a role.
Design Solutions
Page Overview
Section Overview
Landing Section
The About Us page opens with a clear mission statement, helping visitors quickly understand who Moment Energy is, what the company does, and the impact we aim to create in the clean energy industry.
Values Section
This section highlights Moment Energy’s core values through visual cards, helping visitors understand the company’s culture, priorities, and working principles. By showing what the team believes in.
Our Story Timeline
The timeline presents Moment Energy’s key milestones in a clear, chronological format. This allows visitors to see the company’s growth, achievements, and progress over time, helping establish credibility and trust.
Our Location
The location section showcases where Moment Energy operates and highlights its growing presence beyond Canada. By connecting the company’s work to real locations and expansion plans, this section helps visitors understand the company’s scale, ambition, and future direction.
Call to Action
The final section guides visitors toward the next step, whether that means contacting the company, exploring partnerships, or viewing open roles. This helps turn interest into action and makes it easy for different audiences to continue engaging with Moment Energy.
Design Process Overview
Research Insights
In the research phase, I conducted research on web credibility guidelines, and company trust expectations to understand how users evaluate a company online. These insights were synthesized into a content strategy focused on clearly explaining who the company is, what it does, why it exists, and why users should trust it.
Clear company information builds trust
Users expect About Us pages to be clear, authentic, and transparent. Research from Nielsen Norman Group shows that people visit About Us pages to understand a company’s purpose, values, reputation, and credibility before doing business, applying for jobs, or forming a stronger opinion of the organization. For the About Us page, this meant placing a clear company overview, mission, and core offering near the top so users could quickly understand Moment Energy’s identity and purpose.
Authentic storytelling makes the company feel human
Research shows that users respond positively to realistic photography, plain language, employee stories, and content that feels genuine rather than overly corporate. This shows that an About Us page should not only describe the company, but also make it feel real and approachable. For the design, this supported using authentic imagery, human-centered copy, and story-driven sections that communicate Moment Energy’s culture, values, and impact in a more personal way.
Credibility needs proof, not just claims
Stanford’s Web Credibility Guidelines show that websites build credibility by proving there is a real organization behind them, highlighting expertise, showing real people, making contact information easy to find, and using professional visual design. For the About Us page, this meant supporting company claims with visible proof such as team information, partnerships, achievements, real project impact, professional photography, and clear contact pathways.
Design Exploration
Exploring multiple layout and interaction concepts through wireframes and visual iterations. Different approaches were tested to balance employer branding, usability, and efficient job discovery while maintaining visual consistency with the company identity.
Prototyping
Developing high-fidelity prototypes to simulate real user interactions. Key flows such as browsing job listings, learning about company culture, and navigating recruitment information were refined for clarity and accessibility.
Reflection
Credibility Needs to Be Supported by Evidence
This project helped me understand that strong company messaging needs proof behind it. Using real team information, achievements, partnerships, and impact-driven content makes the page feel more professional and reliable instead of relying only on broad statements.
Thank you for visiting. Let's connect!
—————>
vfa6@sfu.ca
Resume
© 2026 Vito Fan