Project Timeline: 4 Months (6 weeks of UX, 4 weeks of branding, 6 weeks of social media)
My Role:
UX/UI Design Audit and re-design of the company website usability and flow.
Revitalize Brand Identity with a new logo and color scheme.
Drive community engagement to social media and conversion to website traffic.
Reinvigorate and re-inspire the website owner to build confidence and progress forward.
Main Challenge: The website owner lacked direction and had a lot of ideas, but was unsure how to pursue them. Lack of analytical insights.
Main Takeaway: Ability to give confidence and direction to the website owner, driving an overall vision, and driving community engagement with a plan forward.
GreenHacks
Bi-directionality that needed a direction.
Issues with the original website
Functional Usability
Obvious layout, usability, and flow problems. Open links to blank pages. Expected navigational tools were broken or missing. Overall feel felt hapless and chaotic masquerading as a professional and trustworthy website. Numerous instances where the website wanted to convey one thing, but the tone set another.
Confusing and Cluttered Main Attraction
The main purpose of the website is to help users get involved in their government. Bu-directionality principle for sustainability initiatives between home and government. However, users often “got lost in the lists”. There was little game plan of what to do with a user when they landed on the page.
Confusing Purpose
The business purpose had many different short and long-term ideas, and it showed. The site quickly became a haphazard compilation of hardcore metrics and trustworthy news, meshed with personal writings and blog posts, personal social media, and unfinished business ideas. The main purpose seemed to be the government organization and news, but the personal antidotes paired with disorganization detracted trust.
Low Conversion Rate
The business owner was not sure what she was selling, or what to track. This was a personal project that she would like to expand, and it grew naturally over time. However, she did not have metrics to track this growth, or a plan in place to grow. She did not track website traffic, member email registration, social media engagement, or anything else.
Whatever it is, the way you tell your story online can make all the difference.
Ultimately, I taught her that she was selling hope. Hope for a greener future. Hope that other people care about creating a greener future. Hope that something can be done to accomplish this goal.
Now, we just have to show it!
Home/Landing Page
Wanted form and flow to convey trust, helpfulness, and hope.
Website personality to be welcoming and informative.
Push the theme of Bi-directional sustainability work to the forefront.
Mission values and information safety was her #1 priority.
Policy Page
Re-design now conveys hard-to-digest information in a categorized and easy-to-process way
User flow starts by asking what problem the user would like to solve, given the options of topics like Air, Energy, Water, Conservation, or Other. Each has a corresponding picture (ex. “Air” with clouds in the sky)
Animation to zoom into that background to give the user a sense of progress
Process repeats with different topics inside of the Air category with topics such as emissions, travel, etc.
This selection takes you to pertinent information about the corresponding government agency.
Short, catchy name that we can build lasting organic brand growth with, yet still professional enough to be immediately recognizable as trustworthy
Sketching the Layout
Branding works across all mediums: Website, Social Media, Merchandise, Professional Use, and Word-of-Mouth Marketing.
Navigation
5 main parts of this website are: Grow, Advocate, Gather, Do, and Trust.
Grow -> Personal Development
Advocate -> Government
Gather -> Social Groups
Do -> Work and Volunteer
Trust -> Non-Gov. Education
“Here to help you (Grow, Advocate, etc)” exudes a welcoming and helpful persona, while remaining UX viable.
Corresponding image-copy relationship helps aid user navigation and process clarity.
Policy Page - Gamification
Gamification as a feature to:
Hold attention through data overload
Increase returning user rates
Make it a game -> Find the Solution
Paired with animations, corresponding imagery, and thoughtfully efficient categories, this took a lengthy list of difficult topics and turned it into an easy to read, easy to navigate, positive experience.
Sketching the Rebrand
After working on the re-design, we shifted focus to a re-work of the logo and color scheme for GreenHacks
Main themes and values we wanted to embrace
Sustainability and Climate work
Trust, education, information, grandeur, establishment, and reliability
Community, social empowerment, and self-determination
Freedom and the ability to search for knowledge
“So, what colors did you chose?”
Home/Landing Page
Mission values and information safety was her #1 priority.
Adding personality increases conversion rates.
Easy to use form cuts clutter, makes it easy for users to sign up, and lessens that “tricked”, “annoying” or “guilty” feeling that has lasting negative reputations for your brand.
Advocacy?
Advocacy page turned into a social media page as the GreenHacks business plan shifted into a potential business.
GreenHacks business plan became that they were going to sell hope through consulting. Selling her legislative knowledge to companies to help them prepare for sustainability legislation and available funding.
Channeling the GreenHacks social media platform through social good, growing community, and spreading information would help build credibility for the paid consulting arm of GreenHacks.
Empower followers to spark their drive to get involved.
Color Scheme
Classic color scheme for easily recognizable motifs
Blues for stately trust, Greens for climate sustainability
Also wanted to encapsulate vibrant colors as well
Yellows for energy, Orange for empowerment, Purple for a sense of belonging, and Reds for a sense of drive and passion
The Braid Design really resonated with the Website Owner
Professional
Was able to clearly blend 4 tenents of Bi-Directionality
Sustainability, Academic, Community, and Government
Was able to have the flexibility and a true theme that we could build into the brand
Personal
Drawing ties to her proud Mexican heritage and beautiful textiles her family created throughout history created a sentimental draw
Turns out, she hates birds and feathers.
After that, the new name just made too much sense:
Pairs synonymously with a braided logo that we can use in multiple forms throughout the design and website elements.
Fills the client with a sense of pride and excitement again that was previously lacking, driving her to lead the charge for a greener future and leadership.