Designed a website to promote sustainable practices in small island developing states.
Timeline
Evolve Branding Agency
3 Weeks Execution Time
Completed Feb 2020
Applied Skills
Design Collaboration
Content Strategy
Wireframing
Prototyping
User Interface Design
View Desktop Prototype
View Brand Guidelines
Summary
Carbon/Green helps promote sustainable practices on small island developing states (Polynesia, Micronesia, or The Caribbean). The website helps and guides businesses towards environmentally-friendly growth in 5 different work areas.
Within a leading role, I was a major contributor towards the information architecture, content organization, wireframe iteration, and user interface design – also helping with user research.
About Carbon/Green:
“Agency Carbon/Green (CG) is a strategic development consultancy, applying technology to benefit the environment, the economy, and society.”
Objectives
- Complete and utilize Carbon/Green brand guidelines for ideation.
- Determine the appropriate layout for the content quantity and brand.
- Design medium-high fidelity wireframes and prototypes for future development.
Inspiration
Sustainable Development
“Rapid, unplanned and unsustainable styles of urban development are making developing cities the key focal points for emerging environmental and health hazards.”
World Health Organization (WHO)
United Nations Environment Programme (UNEP)
One of the emerging environmental challenges of our time will be “rapid, unplanned, and unsustainable” urban development. Carbon/Green’s mission to promote cost-effective and sustainable growth for developing countries is sorely welcome.
Project Underway
When I joined the team collaboration, the project had already been making inroads on industry research, competitive analysis, and branding guidelines. During these activities, I took on an observant position while offering advice if needed or appropriate.
Business Needs
An expert interview with our stakeholder, Chris D., had been conducted to outlining their main ambitions for the website:
- Information on services offered.
- Designed as an online business card.
- Carbon/Green – now part of Resilience Fund.
- Primarily meant for mobile viewing.
Competitive Analysis
Our teammate Diego created a short graph where competitor strengths, weaknesses, and takeaways were shown:
Demographic Research
Our ideal consumer would have been somebody located on small island developing states working in the public or private sectors in the following markets:
- Retail chains
- Real estate developers
- Oil and gas companies
- Energy companies (wind, solar, etc)
- Commercial organizations
- Government ministries
User Stories
“I want to learn more about sustainability and consider if it would benefit my business.”
Franchise Owner in Jamaica
“I want to help combat climate change, but ‘green’ technology is too expensive.”
Business Investor in Samoa
> View our sustainability research here
Ideation
Branding Guidelines
Lisa, Silmara, and Diego compiled a brand document covering conventions like colour palettes, mood boards, brand-marks, and typography, to show our stakeholders in order to ensure we were all on the same page.
> View Carbon/Green brand guidelines here
Wireframe Iteration
We moved onto low-fi wireframes to start and jot our ideas down.
Then, we created a quick wireframe on Figma to play around with:
Design Takeaways
- We decided against a slideshow as most mobile users scan content and could skip it.
- We played around with the idea of accordion bars containing work area content.
- We decided to place a video onto the website to focus on showing a bit more than telling.
Implementation
Figma Prototyping
Continuing our collaborative wireframe iteration on Figma, we designed interactive prototypes for mobile, tablet, and desktop screens:
Mobile Prototype:
Desktop Prototype:
> View Carbon/Green *tablet prototype here
User Interface
Our digital Carbon/Green “business card” would be a single page as business-oriented consultancies have a heavy emphasis on establishing meetings discuss further details.
Modal windows would slide or pop in to inform users of Carbon/Green’s 5 primary work areas.
Modal windows were the better choice in context against:
- Accordion bars, which could disorient the user if there were more than 1-2 lines of content.
- Additional pages – which were redundant as we wanted to keep the details light.
It was not necessary to go too heavily in-depth on information as users would need to contact Carbon/Green personally to proceed. We only needed to sell the idea of Carbon/Green being professional and competent.
Next Steps
The project deliverables were given to the Carbon Green stakeholders and team to be handed off to a development team they would find at a later date.
Ideally, it would be best to work with the developers in order to fine-tune the modal window interactions as Figma’s animation options are limited in scope.
Insights
It was quite challenging to gather relevant demographic research on the people with specific occupations in small island developing countries.
It was hard to gather information from just about anybody in those regions, let alone what a middle-aged real estate developer in the Caribbean would prefer! Luckily, general research like “what a general, working-aged real estate developer would prefer” managed to cover for that set of user expectations.