During the Spring of 2021, I took a course on Web Design. Upon completion of this course, I gained knowledge of industry-standard tools, such as WordPress, and best practices in web design through completing a course. This page will discuss the web designing process that I developed from the instruction in this course, websites created for both this course and others, the challenges I faced creating these sites, and what I learned from each of these project.

The Course

The web design course at Mercer University created a strong foundation for developing my skills in the area. The course was structured in a manner that required the use of active, independent learning skills in order to be successful. This was achieved through independent exploration of the course material and the completion of in class projects to ensure mastery of the material. Additionally, the course included exams and major projects to serve as more detailed evaluations.

    • Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed.) by Jennifer Robbins

    • Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd ed.) by Steve Krug

    • Microsoft PowerPoint and Word

    • Adobe Creative Suite

    • WordPress

    • Wix

    • Introductory HTML

  • I received an A (95%) in the course. For the major assignments, I received the following:

    • Midterm: 90%

    • E-portfolio: 94%

    • Final Project: Homie Feelings Website: 100%

    • Final Project Presentation: 97%

My First E-Portfolio

  • For this project, I followed the process to the left except for the second round of testing. This was due in part to time constraints, but also because I served as the client, and I knew exactly how I wanted to solve problems with the website. The following outlines what I did in each step:

    • Information Gathering:

    • Content Planning:

    • Platform Selection:

    • Initial Layout:

    • Usability Testing:

    • Revisions:

    • Delivery:

  • The main challenge here was that I had never made a website before. To overcome this:

    • I utilized only examples.

    • I asked my professor for help.

    • I referenced the course textbooks.

One of my first times working through the full web design process came in the form of an e-portfolio. This was the first major project for the course and served to introduce us to the entire designing process. This process encompasses the initial content planning stage to the implementation of the website. This project formulated the rough outline of my current development process. The process I developed is as follows:

  • Information Gathering: What does the client want to use the site for? Are there restrictions on what content can be shared? Do they have specific organizational requests?

  • Content Planning: What pages do I want on the site? What hierarchy of information will the site follow? How many pages will the site have?

  • Platform Selection: Which website creation platform works best? Does the client have a preference?

  • Initial Layout: How does the information look on the platform that was decided upon by the organization? Does the client like how it looks? Where can improvement be made? Is it too wordy? Are the images clear and understandable?

  • Usability Testing: What are users supposed to achieve? Can they achieve these tasks? If not, how did they fail? What improvements should be made? How high is the cognitive load? Are there any dead-ends? How easily can they navigate?

  • Revisions: Does this better suit the client and users need? Is it easier to use? Is it intuitive to use? Is the information more clear? Are the problems solved form the usability test?

  • Second Round of Usability Testing: Do any of the previous problems persist? Can the users achieve the set out tasks? If there are still problems, how severe are the issues?

  • Revisions: Will these solutions satisfy the needs of users and client? Is it ready to deliver?

  • Delivery: Is it done? Am I satisfied with my work? Is the client satisfied with the work?

Homey Feelings Website

The final project for this course was a client based project. I decided to create a website for a charity that I started. The charity was focused on reintegrating the homeless into society. The website focuses on bringing awareness to both the efforts of the charity and ways people can help. The charity is currently inactive, and updates to the website have ceased. However, the website was regularly updated when the charity was active. It will be updated prior to reactivating the charity and as long as the charity is active.

  • This proved to be a bit tricky because it is my charity, but the requirements were to have a client that wasn’t a part of the team. To solve this problem, I had a friend who often helped me with the charity serve as the client. This made it easier to be in contact with the client, but also allowed for an objective opinion.

  • This project required teams of two. In my team, I served as the team lead and had the following responsibilities:

    • Lead client meetings.

    • Main visual designer for the website.

    • Led usability testing,

    • Assisted in content writing.

    • Led presentation of website.

  • Unlike the first project, I was able to follow the entirety of my developed design process.

    • Information Gathering: The team conducted an interview with the client to gather information on the charity, figure out which website-building platform to use, and decide the overall structure of the website.

    • Content Planning: After concluding the client meeting, the team created a PowerPoint to create several options of how to layout the content. After discussing 5 different layouts, the team decided to have there be 5 pages on the same level. This was to reduce cognitive load and increase navigability of the website.

    • Platform Selection: The client requested that the website either be built on WordPress or Wix. We choice to use Wix because we didn’t have any experience with the platform, and it was easier to share control of the site with client.

    • Initial Layout: We created a rough site with little to no imagery and the initial pages set-up with outlines for the content. We then presented the layout to our client for approval. Upon approval, we added the content but waited to add the cosmetics until after the first round of testing.

    • Usability Testing: We conducted 2 informal usability tests in class. We made sure the participants hadn’t seen our website prior to the tests and were moderately interested in helping homeless individuals. These tests focused on having users located information about he charity and how they could contribute. However, upon conducting the tests we discovered that a positive of our site was its readability. This proved to be a problem because the client requested that we use an image as the background, and now we will be risking negatively impacting the site. We also found that some of the information was hard to comprehend.

    • Revisions: This is where we added the current cosmetics for the site. Additionally, we rewrote the page title “The Project” as this page was hard for users to follow the content. We did a few smaller revisions to the semantics a syntax of other sections.

    • Second Round of Testing: We conducted 2 more informal usability tests. We made sure that the participants had never seen our site before and were moderately interested in helping homeless individuals. These tests went extremely well. Both tests found several positives and no negatives.

    • Revisions: Because the last rounds of testing went so smoothly. We just made sure all the functionality that we wanted in the site was present and working.

    • Delivery: To conclude this project, we presented our website to our professor as a final round of testing. My professor gave entirely positive feedback and high praise for the work. We then gave the same presentation to our client and received similar feedback.

  • The largest challenge that I had to overcome was that I got deathly ill right before the deadline. In order to overcome this challenge:

    • I contacted the professor with doctors notes to receive an extension on the project.

    • I contacted the client with doctors notes to push back the delivery date.

    • I contacted my group to inform them of the problem and to make sure that we were on the same page.

    • I started preparing for presentations the minute I was able to leave my bed.

Previous

Dominican Republic Water Collection System