IBM and GEB

Web Development Project
August 2021-December 2021

In a group, I worked to build an educational website about how IBM and Jackie – a Guiding Eyes for the Blind dog – are working together to campaign for Neurodiversity and the study of smart collars.

During this project, I developed S.M.A.R.T goals, did a S.W.O.T analysis, collected brand identity information using source code, did wireframing, and developed a website using HTML, CSS, and JavaScript.

IBM and Guiding Eyes for the Blind

  • Lorraine Trapani works for IBM as a member of their strategy and leadership team for Government and Regulatory Affairs. She also volunteers to train puppies for the non profit organization, Guiding Eyes for the Blind. Lorraine was training Jackie to be a guide dog when she noticed that Jackie was having epileptic seizures. This was rare for GEB pups because normally they enforce excellent, careful breeding.

    Due to her health condition Jackie could no longer work as a guide dog, but she does have a new job! Jackie is now IBM’s mascot for Neurodiversity.

    It is necessary to campaign for diversity, but in such a politically polarizing age, large companies like IBM have to practice their support strategically. Jackie is loveable and approachable for most individuals, and makes it easier for people to talk about and support Neurodiversity. IBM has since published several articles about Jackie, and the value in embracing Neurodiversity.

    Now Jackie and other GEB dogs are helping IBM in the study of smart collars.

  • Our client - Lorraine Trapani, asked us to build a website about Jackie, and the partnership between IBM and Guiding Eyes for the Blind.

    The objective of the website is to educate viewers. The primary users viewing the site will be employees of IBM and GEB. Other possible users include people who are considering partnerships with either IBM or GEB. Or potential employees at IBM who are trying to get a feel for the workplace environment. IBM leads in the top 5% of companies with 10000+ employees that reflect diversity and gender equality.

    The information on our website will be directly referenced from IBM, their Neurodiversity page, and GEB’s website to ensure that we are providing a reliable and accurate summary.

  • We began by forming SMART goals, and performing a SWOT analysis. A SMART goal is specific, measurable, achievable, relevant, and time-bound.

    Specific: Our website fulfilled the client’s needs and specific educational objectives.

    Measurable: We reviewed the site with our peers to evaluate how effectively it informed users of the partnership.

    Achievable: Our group was able to build the site together, we were all studying web development that semester.

    Relevant: All of the information was relevant to the clients needs, we were careful to avoid unrelated information or artistic liberties that would have pulled focus away from the specific organizations.

    Time-Bound: We had 8 weeks to complete the project.

    A SWOT analysis takes into consideration the strengths, weaknesses, opportunities, and threats facing the project.

    Strengths: IBM and GEB are both very reputable, and lots of people love dogs, so the website was likely to perform well.

    Weaknesses: There is a chance the partnership could fall through, at the time the Pandemic posed many financial challenges. There was a possibility that IBM could decide to stop research on their smart collars.

    Opportunities: Building this website was an opportunity for us as students to gain experience with web development, practice the full development cycle, and learn more together from working collaboratively.

    Several peers and I grew closer together, now I am working together with one of them on a exhibition project where I will be in charge of the web development and online gallery.

    Threats: There are few threats posed to the project, IBM and GEB do have other competing companies and organizations that do similar work.

Scope

We decided to build a website with three pages. One for IBM, one for their Neurodiversity Campaign, and one for Jackie at GEB. We explored several options for the layout and flow of the website before wireframing our final draft. Together with my group mates we wrote the HTML for the site.

I researched and used source code to find the visual elements used by each organization. With that I was able to complete our CSS that would work for the individual design choices between all the pages. I along with another group mate worked together to debug the site, and fix any errors before we went live.

Summary

HTML We worked collaboratively on the HTML and used our wireframes to ensure that the pages followed a uniform intuitive layout.

Visual Design Systems Research I worked resourcefully to gather visual design information for IBM, their Neurodiverseity campaign, and GEB. I used online resources to find the IBM logo file, and source code to find the specific hex codes for the colors used by each organization

CSS I used the visual design elements I found to make our CSS style sheet. The style sheet accounted for unique differences between each page. The index page, for IBM, uses their specific blue, the page for Jackie, uses GEB’s specific blue, and the Neurodiversity page uses IBM’s Bee Equal yellow, and the Neurodiversity Bee Equal logo.

Resourceful Problem Solving The Bee Equal logo file was not available online, so I took a screenshot of the largest version of the logo on their site, and brought it into Adobe Illustrator, to convert it into a two-tone black-and-white vector graphic.

Research and Authorship One groupmate was in charge of collecting research information, authoring the website, and choosing images.

JavaScript Another group mate engineered our Java Script to create a carousel of images, and various animated details.