Introduction
Following from Part 1 ~ the final portion of this NDA recreation is the Web Design comprising of User Experience 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 feaasible scope, a series of front-end development experience in Framer® was established within its as native and/or "out of the box" toolset challenge; with as few reliance on third party integrations possible. 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)
A full length, fully narrated Case Study video below outlines the full process on both the branding development and web design including front-end build within Framer®. 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.
Sundar Kamar Singh
Archetype ~ “The Investor”
42 years
Perth, Western Australia
Senior Engineering Consultant / investment enthusiast amongst future derivatives and various cryptocurrency initiative(s).
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 within framework known as ESG; offering competitive returns through capital growth above those not on the framework.
The user’s current branding personalities are also outlined; highlighting sources and/or brands trusted for thought-leadership surrounding the above topics.
The entire Customer Journey Map here uncovers the user’s initial pain points among the few companies shortlisted out of engagement interest; chiefly among them a lack of transparency amidst claims and propositions on the investment products. Resolution is reached when these pain points were addressed as the user interacted with the customer experience team; leading to the onboarding process.
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 outline the entire structure of the website from a highly summarised, 1,000 foot view.
Then accompanied with Functional Journey Map (also known as Functional blueprint) ~ helps uncover and address any Functional features required to address common anxieties; raised through a series of questions.
3 - The High Fidelity Visualizations
Soon follows the low to high fidelity visualization within Figma®; taking into account all aesthetic descisions as disclosed in Part 1 of this NDA recreation case study.
By utisiling the custom retailored DS / design system, a number of key pages were produced in the aim to produce most desireable length and depth of copy / content writing parameters.
4 - The Front-end development Prototype
As additional incentive to this NDA Recreation, a Front-end development prototype was further exercised in Framer®.Click here to view the build prototype.
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 only in demonstrative capacity. The many out-of-scope functionalities uncovered during The Functional / Service Blueprinting phase, could not be translated here in this front-end showcase.
Post Project Outcome / Criterias
I humbly disclose that at the time of industry conduct of this NDA project ~ any or all impact statements were strictly forbidden for me to query and/or simply unobtainable. The following criterias below are therefore what I would raise soon after a Project surpasses their service period; akin to hypothetical "Retrospective"
About this Case Study
Unless otherwise explicitly specified - all artworks, including naming, titling, sample content-writing including this Case study, and the entire front-end development ~ have not been resorted through Automation, Artificial Intelligence, or generative tools.
All hours expended on each NDA re-creation(s) were conducted out of limited, personal and voluntary capacity on top of / during full time tenure.