Introduction
Following from Part 1 ~ the final portion of this NDA Recreated - End-to-End visual proposition here comprised of the UX research, Information Architecture, high-fidelity visualization and front-end development instance trial with Framer®.
As this is fictionalised re-work based on actual brief ~ Impact statements are not available. However, a series of criteria(s) are presented at the end of this presentation typically raised during retrospective settings.
Problem Statement
An alternative-energy producer requested a website re-design, citing needs for scalability of content management and to highlight the competitive proposition(s) of the emerging, government-backed and supported framework “ESG” ~ Environmental Social Governance.
Viewable pages
Within front-end capabilities restricted to a feasible scope, an upskilling initiative within Framer® was conducted here in this NDA Recreated Case Study to provide as native and/or "out of the box" experience build as possible; without excessive reliance on third party integrations.
The following pages are available for review and visitation:
Our Team / Board of directors and management
CMS Functionality #1 - Our Products (Water, Wind, Solar)
CMS Functionality #2 - Our Blog (with six writing manually retailored ~ articles)
Exclusive Case Study Video
A fully narrated Case Study video below outlines this NDA recreated project's entire brand to digital development story-telling. Edited and cut with Final Cut Pro X.
Demographics
Investors on the energy sector, particularly emerging markets on the renewable energy (solar, wind, and green hydrogen).
30-55 years of age.
Relatively higher income presuming existing familiarity surrounding finance / fin-etch and investing.
SWIPE
Sundar Kamar Singh
Archetype ~ “The Investor”
42 years
Perth, Western Australia
Senior Engineering Consultant / investment enthusiast amongst future derivatives and various cryptocurrency initiative(s).
Introvert
Extrovert
Analytical
Creative
Busy
Time Rich
Messy
Organized
Independent
Team Player
Safe
Risky
Background
Sundar came from a humble, working class family from Pakistan. With a bachelor with honours on Engineering and Sociology, he quickly accumulated expertise and respect firstly as a consultant on smaller to then gradually larger ~ various government sponsored infrastructure projects.
In 2010, Sundar made the move to the sunny side of Queensland, Adelaide where he pursued, on top of engineering ~ personal interests surrounding investing and wealth building.
Today, Sundar works as a chief consultant for a prolific mining firm. However, at his spare time he frequent various blogs, and social media channels on emerging financial interests ranging from cryptocurrency, fintech, and enviro-blockchain projects particularly from Australia then globally abroad.
Sundar is renowned by his peers to be down-to-earth amidst all stakeholder interactions. Calculated and skeptical to anything new or novel, he is reserved to not express opinions . Wherever away from the digital screens, he is occupied with his beloved family of three children and golden retriever.
Industry & Interests
Needs & Goals
Motivations
Pain Points & Frustrations
1 - Journey Map / Summary of Persona Narrative
Our persona features a prospective investor whose interest revolves around emerging trends on sustainability and responsibly-driven investments. Chiefly ~was the emerging interest on ESG framework as increasingly adopted amidst growing # of companies at offering competitive investment-product returns.
The entire Customer Journey Map here uncovers the ideal user’s initial pain points, his brand alignment hisstory, and emotional engagement towards transparency.
Resolution is reached when all these pain points were addressed as the user proceeds interacted with the customer experience team; leading to the investment onboarding process.
Sample User Journey Map
Key Extrapolations
Taking all the above in mind, there were several key implementations that the design solution should carry somewhere in the high fidelity visualisations:
Having clear thought leadership articles and feature page/s outlining propositions, differences, pros and cons amidst ESG versus non-ESG based investment products.
Following from each article offer CTA / call to actions ~ that relates to the subject matter within each blog article to invite deeper enquiring, rather than generic templated Newsletter sign up banners or “contact us” today.
2 - Development - IA & (Mini) Service Blueprint
Here the proposed information architecture / sitemapping outlined the entire structure of the website redesign from a highly summarised / high level view.
Accompanied with Functional Journey Map (also known as Functional blueprint) ~ helps uncover and address any Functional features that were likely out-of-scope to exercise empathy on tech feasibility of product development at the time ~ long before automated intelligence and agentic feature were globally rolled out across many CMS and Design Platforms.
3 - Atomic DS & High Fidelity Visualizations
Soon followed the Atomic DS / Design System preparation, laying the foundational work from low to high fidelity wireframing visualization ~ within Figma®; taking into account all aesthetic descisions previously from Part 1 of this NDA recreation case study.
4 - The Front-end development Prototype
.Click here to view the build prototype.
As additional incentive to this NDA Recreation, is opportuned self-learning / upskilling pledges amidst growing industry expectations as a multi-disciplinary - spanning not one but two (2) build platforms firstly in DIVHUNT and then in Framer.
Throughout several month(s) of self-learning from the above two platforms led to Framer® as the convinced platform for approachability and design intuitiveness.
Limitations of this front-end development trial
This prototype is only a hypothetical envisioning of design to development translation among key static and in some respect - dynamic (CMS) pages for product prototyping. Some copy / content writing were manually re-adapted to suit parametric depth and texturing.
SWIPE
Post Project Outcome / Criteria
I humbly disclose that at the time of industry conduct ~ any or all impact statements were strictly forbidden for me to query and/or simply unobtainable. The following criteria below are what I would raise soon after a Project surpasses their service period; as hypothetical “Retrospective” .
About this Case Study
Unless otherwise explicitly clarified or (re)inforced in the study - all artworks, including naming, titling, sample content-writing including this Case study's, as well as the entire front-end development ~ have NOT been entirely resorted through Automated Intelligence, generative tools or LLM-assisted prompting models.
All hours expended on each project was conducted out of limited, personal and voluntary capacity on top of / during full time tenure.