BACK

HUES Website

humansuniting.org

Overview

As a freelance web developer, I am currently working with Humans Uniting for an Equal Society, a small nonprofit in Lansing, MI, to create their organization's website. This website's purpose is to lend the organization further credibility with the community and to inform users about facets of the organization, such as who the board members are and what happened at current/past events and meetings. The project is currently in the coding and development segment of the process.

Strategy & Scope Research / Architecture Diagram

Before engaging with the research necessary to begin this project, I met briefly with the HUES Board to discuss the how the website needs to be aimed at creating a well-rounded image of HUES, communicating the mission of HUES, developing credibility within the community, and recruiting new members. I also created a project plan to keep me on a designated track throughout the design and development process.

In order to determine how best to implement this strategy, I collaborated with the Board to determine the scope of the information that the organization needs to communicate through the website, and how the website can be divided into pages to accomplish these needs. I also researched the websites of local nonprofits, analyzing how they organize their information, what kind of information they contain, and how to improve on their construction. After determining the struture of the website, I used Slickplan to construct a architecture diagram for the HUES website. The architecture diagram can be found below.

CLICK TO DOWNLOAD ARCHITECTURE DIAGRAM

Content List

Before designing the website, I worked closely with the Board to create a list of the content needed for each of the website’s pages, as well as the size or length of each of the content elements. During this process, in addition to the creation of content, typography was chosen for the text, as well as color and textures for the backgrounds and containers. This was done to expedite as much as possible the process of creating the design prototypes so that the final images and text could be quickly acquired and used for the prototypes. The content list for the "Home" page can be found below.

CLICK TO DOWNLOAD CONTENT LIST

Lo-Fi Sketches

After undersanding the structure of the website itself, I shifted towards designing the skeleton of the various pages. As a result, I drew out the initial sketches so I could show the Board a quick sketch of what these web pages would look like and how they could display navigational elements, images, and text content in a structured, organized layout. I also created these in order to determine what the navigational structure, information structure, and interaction structure of the page would roughly look like. Examples of lo-fi sketches for this website can be found below.

CLICK TO DOWNLOAD LO-FI SKETCHES

Lo-Fi Wireframes (Axure)

I used Axure RP to produce digitized wireframes of the website’s pages. The purpose of these wireframes was to illustrate for the Board the layout of the website, showing the exact dimensions of the website’s content containers, images, and text containers. These were also created for the purpose of illustrating how navigation operates between pages, as well as the function of some of the website's interactive elements. Examples of the lo-fi wireframes for the landing page and "About Us" page can be found below.

CLICK TO DOWNLOAD LO-FI WIREFRAMES

Hi-Fi Design Prototypes

The purpose of these design prototypes was to implement the content, typography, and color/textures into the website, providing visual prototypes that aimed to mimic the final visual layout of the website. These were then submitted to the Board for approval. During this submission process, I engaged the Board in dialogue in order to gather feedback that would then be realized in the coding and development process. After approving the prototypes with the Board, I conducted simple user tests, analyzing how users perform some of the key experiences on the website and whether the design needs to be revisited in order to improve those key experiences. Examples of the design prototypes for the landing page and "About Us" page can be found below.

CLICK TO DOWNLOAD HI-FI DESIGN PROTOTYPES

Coding and Development

This website was coded using Bootstrap as a CSS Framework in order to utilize a mobile-first approach. Screen breaks were only created for a desktop version and a mobile version. The tablet version of the website is essentially the same as the desktop version. Instead of creating sub-pages for sections just as individual board members or individual events, I used JQuery as a means to keep all of the content on one page, creating clickable trigger events to show and hide certain containers on the page. This simplified the website by eliminating excess HTML pages, speeding up navigation to those sub-sections. After the website was finished, some user testing was conducted to scan for major usability issues, after which fixes were issued to the most pressing issues.

My current post-launch role is to update the website when new content is given to me, and to suggest changes and updates that could be implemented to enhance the user experience and meet the goals of the organization.

A link to the website can be found below.

humansuniting.org

BACK

Project Armory Website

Overview

As a freelance web developer, I am currently creating the website for one of my clients, Project Armory, a new business out of Mason, Michigan. I frequently meet with Project Armory’s Team Lead to determine how to refine the design of the website and its content, as well as how the website can best fit the needs of a company based around e-commerce, information dispersal, and community creation. The project is currently in the development process.

Strategy & Scope Research / Architecture Diagram

After a couple initial meetings with the entire team, where we discussed the purpose of the website and how far the scope of the project should stretch, I conducted research on the websites of local businesses in the area, especially businesses that sell the same kind of product as Project Armory. This research also worked as a competitive analysis, showing Project Armory what local businesses they would be competing with and the features that their digital spaces offer to users. After examining the ways that these websites funnel users toward their products, I had a dialogue with Project Armory about the features that should be included on their website. After coming to a consensus, I created a architecture diagram to define the structure of the website. The architecture diagram can be found below.

CLICK TO DOWNLOAD ARCHITECTURE DIAGRAM

Content List

Before designing the website, I provided the Team Lead with a list of content that I needed in order to create design prototypes for the entire website. We divided up the content so that the Team Lead could create the content that he specifically wanted to handle and I could create the content that I was tasked with writing. After the content was created, I worked to edit it to the point that it was finalized and cleared for use on design prototypes for the entire website.

CLICK TO DOWNLOAD CONTENT LIST

Lo-Fi Sketches

After creating the structure of the website and defining what content is needed, I looked to design the skeleton of the various pages. I quickly drafted sketches of the proposed layout of the website pages in order to clear the initial design with the Team Lead, discussing the layout of navigational items, images, and text content before moving onto digital prototyping. An example of a lo-fi sketch can be found below.

CLICK TO DOWNLOAD LO-FI Sketches

Lo-Fi Wireframes (Axure)

I used Axure RP to produce digitized wireframes of the website’s pages. These digital wireframes were designed to show the Team Lead a more defined layout for the website, providing exact dimensions for images and content containers. I also wanted to illustrate how the components of the website interacted with one another, as well as how the navigation system operated. After another meting with the Team Lead, these layouts were edited so they could be utilized in the initial phase of the design prototypes.

CLICK TO DOWNLOAD LO-FI WIREFRAMES

Hi-Fi Design Prototypes

After being provided a color palette for the website, I created four different design prototypes for a single page, using various combinations of the colors provided, as well as different fonts that I had chosen for the typography. I later met with the Team Lead and a portion of the team to discuss the merits of each of the prototypes and decide on a specific color scheme to use consistently throughout the website. These prototypes were used in simple user testing to determine differences in usability and user experience between designs.

CLICK TO DOWNLOAD HI-FI DESIGN PROTOTYPES

Email Landing Page

While the website goes through the development process, I created an email landing page that acts as a temporary home page. I used Instapage as a front-end content creator to design the page, and I deployed it using a Wordpress plugin. I also linked the email sign-up sheet to Project Armory's Mailchimp account; I discussed ideas for email campaigns with them as a way to create buzz and excitement around the impending website launch.

LINK TO EMAIL LANDING PAGE

Coding and Development

I constructed the website using Wordpress and used the free version of Optimizer theme to gain a great deal of control over the layout and the style of the website. I also used Optimizer so that, as the company grew, they would have the capability of upgrading Optimizer to gain further control over customization without having to switch themes entirely. I still used some custom CSS to stylize some components of the website for the sake of consistency. I also used the Page Builder plugin to utilize a grid system as I created some of the pages, and I used an Image Caption Hover plugin alongside Page Builder to make the backbone for the Gallery page. Lastly, I installed WooCommerce so that Project Armory can begin the transition from selling products on Etsy to selling products on their website.

At this point, since the architecture of the website and the structure of the pages are in place, the Team Lead wanted to take over creating and placing content, using me in a support role, where I advise how content is used and how to best update the website. As such, the construction of the website is now being driven by the team at Project Armory, though I am still working in this support role.

A link to the website can be found below.

pjarmory.com

BACK

"The Come Out" Event Promotion

Overview

As the Communications Strategist for Humans Uniting for an Equal Society (HUES), I was responsible for the event marketing, advertising, and planning. On January 22nd, 2016, HUES hosted “The Come Out” at The Avenue Café in Lansing, MI, and we managed to attract over 200 people to the event, completely filling out the venue. It was our first high-profile event and it went phenomenally, allowing HUES to not only connect with local politicians and local media, but also with local human rights organizations both on MSU campus and in the Lansing area. I spearheaded the marketing, planning, and organizing efforts for “The Come Out”, creating an effective strategy that operated on multiple fronts.

Digital Media Promotion

After setting up the event on Facebook, I made periodic posts about the event and reposted articles that were either related to the content of the event or about self-care. The purpose of these Facebook posts were to continually promote activity surrounding the event and to bring more people to the event page and the HUES Facebook page. In addition, I reached out to local human rights organizations such as MSU’s The Alliance of Queer and Ally Students, Suits in the City, and Gateway in order to spread awareness of the event and to build relationships for the purpose of event collaboration in the future. Examples of social media posts, as well as a link to the event page, can be found below.

CLICK TO DOWNLOAD POSTS

LINK TO EVENT PAGE

Physical Media Promotion

I assisted in the creation of a flyer for the event and worked to coordinate distribution of this flyer throughout businesses in the mid-Michigan area. I created a map that split mid-Michigan into geographic sections and delegated members of the HUES Board with distributing flyers in these designated sections. This coordination worked to maximize the efficiency of flyer distribution throughout the mid-Michigan area. I also met with MSU professors and asked them to distribute these flyers digitally, spreading them to other MSU campus organizations, mostly groups of graduate and PhD students that HUES did not have direct connections with. The flyer, along with the flyer distribution map, can be found below.

CLICK TO DOWNLOAD FLIER

CLICK TO DOWNLOAD MAP

Local Press Promotion

I also contacted many local media outlets to promote the event in local papers. I contacted the Lansing State Journal, the State News, and the City Pulse, providing them with a press release document, inviting them to conduct interviews with us about the event, and inviting them to the event itself. Examples of news articles referencing “The Come Out” can be found below.

LINK TO STATE NEWS ARTICLE

LINK TO LANSING STATE JOURNAL ARTICLE

LINK TO CITY PULSE ARTICLE

Event Booklet

I created and distributed a 16-page event booklet for “The Come Out” using Microsoft Word. This booklet had a schedule of the event, biographies of the speakers, a message from HUES, a memorial for a Lansing Association for Human Rights board member who recently passed, and paid advertisements. For the advertisements, I circulated a flyer containing information on how to contact HUES for advertisements and the cost for purchasing an advertisement spot. I also personally contacted local political figures and local businesses for the purpose of securing another advertisement. The layout of the booklet and the advertisement flyer can be found below.

CLICK TO DOWNLOAD BOOKLET

CLICK TO DOWNLOAD FLYER

BACK

HUES Social Media Strategy

Overview

As the first Communication Strategist for Humans Uniting for an Equal Society, an auxiliary organization for Lansing Association for Human Rights, I am deeply involved with creating a cohesive social media presence for the purposes of promoting the organization and connecting with the Lansing community. HUES currently operates on Facebook and Twitter, though Facebook is its primary platform for digital communication and plans are being made to incorporate more visual social media elements, such as Instagram.

Facebook

Facebook is HUES’ primary method of communicating via social media. Over my time as the Communication Strategist, I have used the HUES Facebook to promote events, promote meetings, connect with MSU and Lansing human rights organizations, and engage in dialogues with local press such as The State News and City Pulse. I also reinforce the credibility and the ethos of the organization through posting articles concerning human rights issues that speak to promoting openness, diversity, and inclusion of all marginalized identities, often pulling quotes from the articles to attract potential readers. Below are examples of posts that I have made, as well as a link to the HUES Facebook.

HUES FACEBOOK LINK

Twitter

Twitter is HUES’ secondary method of communicating via social media, and I am beginning to implement our new social media strategy through Twitter. Currently, I am using the HUES Twitter to promote events and meetings, as well as to establish the credibility of the organization through retweeting articles concerning current issues pertaining to human rights. I have also connected HUES with local MSU and Lansing human rights organizations in order to keep the organization updated with news and events pertaining to the local human rights movement. Below is an example of a post that I have made, as well as a link to the HUES Twitter.

HUES TWITTER LINK

Facebook Analytics Data

Facebook is HUES' primary method of social media communication, so I decided to focus my efforts at analyzing data from that platform over Twitter. I pulled analytical reports from Hootsuite, as well as data from Facebook's "Insight" tool, emphasizing gender and age breakdowns in fans, top performing posts, engagement rates for posts, and date ranges when "likes" were higher than our average. Examples of data pulled can be found below.

CLICK TO DOWNLOAD DATA SAMPLE

Social Media Strategy Document

I analyzed how HUES' social media is currently being utilized, as well as how the social media could potentially be utilized after analyzing the data from Facebook's "Insight" tool and the data from Hootsuite. I also offered a list of guidelines for future Communication Strategists to use in order to increase engagement with posts and increase the number of likes on the Facebook page. The strategy document can be found below.

CLICK TO DOWNLOAD DOCUMENT

BACK

"Tuesdays With Morrie" Unit Plan

Overview

Instead of having teacher-led, large class discussions over Tuesdays With Morrie, I wanted to give students a sense of autonomy and direction over the discussion topics. Instead, I decided to create a unit completely dedicated to small-group discussions. Students would create questions based off of the readings, student discussion directors would lead small groups through dialogues on those questions, and students would fill out a participation evaluation to determine how well they prepared for and contributed to the discussion. This was done to engage students in an active learning experience where they decide the direction of their learning, all while still providing a structure for students to follow.

Discussion Guidelines

Before having students engage in student-led small group discussions, I took a couple class sessions to discuss how to actively listen, how to lead a discussion, and how to respond in a dialogue in order to perpetuate open dialogues. After this discussion, the class practiced engaging in dialogues, evaluating how successful the dialogues were. This was done to model for students how small-group discussions should operate, and, as a result, they were able to successfully engage in these discussions at the very beginning of the unit. The artifacts below are some of the materials I used in these lessons on dialogue.

CLICK TO DOWNLOAD DISCUSSION GUIDELINES

CLICK TO DOWNLOAD QUESTION GUIDELINES

Discussion Structure

During these discussions, students would work in groups of 4-5, each student choosing a question from his or her daily list of questions to give to the discussion leader for the purpose of proposing it to the group. Students would spend 30 minutes of class time working through these questions, taking notes on the answers that other students provide. While students fill out their daily reflection form, where they assess their participation and performance during class discussions, I would walk around and check to make sure all students were taking notes during this. All of this was designed so that students were fully engaged throughout the entire hour. A sample daily reflection form can be found below.

CLICK TO DOWNLOAD REFLECTION FORM

Final Reflection

As part of their grade for the unit, students had to answer a few reflection questions based on their personal assessment of the novel, their ability to create lines of inquiry, and their performance during class discussions. These questions were specifically chosen to reflect the skills emphasized during the unit. A sample student response can be found below.

CLICK TO DOWNLOAD STUDENT WORK SAMPLE

BACK

Creative Writing Poetry Unit

Overview

When I taught the senior Creative Writing class at East Lansing High School, I wanted to approach the poetry unit in a way that would allow students to reflect on their personal identities and the way they interact with artistic media. In mixing this approach with an academic overview of poetic devices, this gives students a more personalized introduction to how poetry operates both within larger cultures and within their own lives. To accomplish this, I led a critical analysis of Beyonce’s “Pretty Hurts” and Tupac’s “Changes”, showing the intersections between pop culture, poetry, and personal identity.

Beyonce "Pretty Hurts"

This song was specifically chosen for a couple of reasons. I wanted to choose a female artist, as well as an artist of color, and I wanted a song that touched on a cultural issue that students would recognize as one that affects them personally. It was very important to me to have diverse representation of culture in the art analyzed in my class, as well as art that students recognize and connect with. I had students listen to the song once while only reading a paper copy of the lyrics, then again while annotating their paper copy with any thought and idea that occurred to them. Afterward, I led the class in a discussion commenting on the way that poetic devices in the song enhance communication of the theme (beauty standards, self-image, etc), as well as how well-suited Beyonce is to discuss the theme. My annotated copy of the piece and my lesson plan can be found below.

CLICK TO DOWNLOAD ANNOTATION

CLICK TO DOWNLOAD LESSON PLAN

Tupac "Changes"

This song was also chosen specifically, as it was done by an artist of color and also commented on a cultural issue that impacts people of color. I wanted to initiate discussion on modern racial and economic issues through a lens that students would find approachable, such as a notable rapper. I used the same approach as the Beyonce lesson, having students first listen to the song while only reading a paper copy of the lyrics, then having students listen again as they annotated their paper copy. Afterward, I led a class discussion on how Tupac uses stanza structure to communicate a clear thematic narrative, as well as what issues were being discussed within the song. My annotated copy of the piece can be found below.

CLICK TO DOWNLOAD ANNOTATIONS