United Ecosystems Alliance
For this project, me and a group of two others were tasked with creating a site from scratch, one that was for a social cause specifically. We choose helping the environment, calling the brand itself the United Ecosystems Alliance.
Each team member had a role, with me specifically being the site architect and coder. Listed below is the full process for the site.
Site Research and Personas
To begin the process, we began researching other environmental non-profits. This included seeing how they styled their logos, as well as what features the site contains such as content and hierarchy structure.
Along with this research, four different persona’s were created by my partners to better understand what our site’s audience may be. Research showed environmental concerns are often more prominent among the younger generations, with the persona’s showing as much. These included a current college student, a full time copy-writer and even a high school senior. Through this research, we were able to gain a better understanding of what the focus of the site should be.
Information Architecture
With research to go off of, I then began making the site’s information architecture. As a group, we determined the site’s main focus should be information, as we found it surprisingly difficult to find lots of environmental information, such as biodiversity and deforestation. With that in mind, I decided on the main pages being “How to Help” and “News”, as I felt that was the most consistent way to present the user with new information. Along with those main tabs, I also choose to have multiple sections in tabs such as news, so that a user could find the specific info they were looking for, whether it be political news or endangered species updates.
Wireframes
With the structure in place, I then constructed wire frames for the main navigation pages. In these wireframes, I wanted to make the visuals of the site large and apparent, as actually seeing what happens to the environment is a good way to get a user to understand the danger of climate change. I also wanted to make sure the pages were a reasonable size, not forcing the user to endlessly scroll through information they may or may not care about.
Mockups
With a wireframe done, mockups were then created. As a group we decided to each make a separate mockup, so we could have multiple choices for a final design. For my own mockups, I based them off my wireframes, adding in the necessary features like images and color. In the end, we ended up mixing and matching our mockups. My “News” and “Donate” mockup were the final ones for those designs, while with “Home” and “Help” we used another group members mockups
Poster and Cards
Along with the website itself, we also had to expand the brand of our non-profit with items like posters and mailing cards. For both, we worked together to help make a few different mockups for each. Along with the flat image, we also put the posters on top of stock images to see how the image itself may look on a real life poster
Site Coding
With the rest of the process done, I began fully coding the site. To help code it, I used the program SublimeText. As this was my first real time coding, it was a fairly time consuming process. To make sure the site was responsive, I made multiple media queries for the many potential screen sizes the site might see. I also tried to make certain features stand out more, such as making each section on the news screen jump forward when hovered upon.
While I was the site’s main coder, due to limited time I had to ask one of my group members for assistance in coding certain pages of the site. Mainly, the individual sections for Politics, Animals and Science were all created by them, allowing me to easily copy over the code and add in extra features such as the tabs jumping forward.