In this project you will learn how to create a compelling user experience on a website using the Genesis framework. The project includes an overall deliverable and version specific deliverables – alpha, beta, & final.
The alpha and beta versions are graded on a modified pass/fail basis. The main reason is that unless you achieve significant success with the alpha and beta, it will be very difficult for you to do well in the final version. The only possible grades for alpha and beta are A, B, or F. If you receive an F, it is unlikely that you will get a passing grade in the final version. The final version will receive a numerical grade.
This is a team project of three students which will continue from project 1. If you prefer to work with a different person, make sure they agree and email the instructor and copy the other person(s) at least one week before the problem is due. Only one email is needed but you must include the other person(s) in the email. The instructor will approve or reject the request.
Overall deliverables
The overall deliverables (version specific deliverables listed further below) for this project are:
- A website site that demonstrates UX design expertise
- Knowledge of Genesis and Gutenberg and the ability to extend WordPress with plugins.
- The site must include a call to action such as but not limited to revenue generation, signing up subscribers, advertisements, and getting donations/volunteers.
Problem
You will be assigned a problem, or you may suggest your own problem. Small sized businesses are usually good sources for problems that fit the scope of the class.
The problem due date on the schedule only applies if you choose to suggest your own problem. No action is needed if you prefer to have the instructor assign the problem.
To propose your own problem, send an email to the instructor by the due date with a copy to your team member(s) with the following:
- Name of proposed organization (and URL if available)
- Approximate revenue and/or number of employees.
- The type of business / focus of the organization.
- Initial needs and goals.
- Your relationship and/or experience with this organization. What will ensure that they will remain committed to the project?
The Genesis framework and Blocks and WordPress Gutenberg
Genesis is a website design framework published by StudioPress. The MIS Community site is built on top of the Genesis framework. Gutenberg is an integrated WordPress block editor.
- We will use a special project server https://project.mis.temple.edu/ for this class. Students can access the server using Temple AccessNet credentials. The server includes Gutenberg, the Genesis framework, and most of the themes produced by StudioPress. Use the server to experiment with and learn Genesis, Genesis Blocks, and Gutenberg. (note: The MIS community site uses the older TinyMCE editor, only the project server has the new Gutenberg editor).
- Temple has a site license to lynda.com (now part of LinkedIn) which includes excellent step-by-step tutorials on how to use Genesis and Gutenberg.
- To access the tutorials, log into tuportal, select LinkedIn Learning in the list of tuapplications. You must go through tuportal to get the certificate required below.
- Go through WordPress Essential Training (by Allie Nimmons).
- Some of the content such as choosing a host is not relevant, please ignore.
- Do not select the course titled “WordPress 5 Essential Training: Site Administration.”
- Go through Learning Genesis for WordPress (by Carrie Dils)
- Ignore the installation content.
- Go through WordPress Essential Training (by Allie Nimmons).
- You will need to provide the certificate of completion for each so make sure you go through the complete tutorial. To get the certificate, click My Learning at the top, select Learning History, click More or … next to the relevant course, and select Download certificate.
- The following is a useful supplement to the Genesis tutorial: A beginner’s guide to the Genesis Framework.
- We will also be using Genesis Blocks. Learn more on the Genesis Blocks WordPress Plug-in page, with more details here.
Getting started
- Start watching the relevant Lynda tutorial and experiment using your own site.
- To create a site, login to https://project.mis.temple.edu/hover on Hello,…, Sites, and click Create a Site.
- Click on the URL of the new site in the new message/alert to visit it.
- Navigate to the Dashboard, select Appearance, and click on Themes.
Enabling collaboration among team members
One team member creates the site. It does not matter who creates the site. Enable collaboration between your team as follows:
- Login and navigate to the Dashboard of the new site.
- Select Users on the left about halfway down, and then click All Users. (Note: Click All Users as instructed, do not click on the Add User option in the menu)
- Click Add New near the top of the page to display the Add New User page.
- Fill in the details for Add Existing User (only).
- For the Email or Username field type in the AccessNet ID of the second team member. The AccessNet ID is the first part of the Temple email address. For example, Jason May’s email address is tuj78269@temple.edu, so the AccessNet ID is tuj78269.
If the provided ID does not work, then it may be an alias, ask your team member for their official temple email, which will typically start with ‘tu’. - For the Role field, select Administrator from the dropdown.
- Check Add the user without sending an email that requires their confirmation box.
- For the Email or Username field type in the AccessNet ID of the second team member. The AccessNet ID is the first part of the Temple email address. For example, Jason May’s email address is tuj78269@temple.edu, so the AccessNet ID is tuj78269.
- Click Add Existing User (blue button).
Note: Only use your team members AccessNet ID rather than some other random email. This way they can use their existing validated Temple credentials to immediately access the site. The system administrator will remove any non-Temple ids from the system.
Creating the site
Create a site using one of the following Genesis themes. The following requirements apply: 1. Must use one of these themes: Altitude Pro, Authority Pro, Breakthrough Pro, Essence Pro, Infinity Pro, Magazine Pro, Monochrome Pro, Navigation Pro, or Revolution Pro. 2. Must use the Gutenberg Block editor. 3. Do not use page building software such as Elementor.
- Select a theme from the above list that fits the intended affordance of your site. Some of the themes have specific instructions, contact the instructor for the documentation.
- The site should at the minimum contain the following. These site content and design items are required for the alpha submission and are intended to help you get started. As you progress to the beta and final solution submission, the below alpha content and design requirements do not apply and you should adapt the design to meet the site goals. For example, as you move forward to the beta, it is possible that you may only need 1 page in your site or zero posts or some pages may only need 20 words, or you may create a design that does not require a menu.
- Appropriate name and URL that reflects the intended affordance of the site.
- A total of 3 pages or posts, with at least one of each. Each page/post should have at least 100 words of content and one image. The titles and images should be appropriate and relevant. You can use filler text for the paragraphs.
- Home page that includes the following Genesis Blocks: 1. One Container block set to full page width, 2. The following blocks: Advanced Columns, Image (as a background with floating text on top), Heading, Paragraph, Button, and Call to Action. 3. Choose one of the following blocks: Testimonial, Pricing, Accordion, or Post and Page Grid. Note: The blocks will work best if you place them inside one or more containers.
- One menu which includes 3 top-level menu items and at least one sub-menu item under one of the top-level menu items. You can choose where to place the menu (e.g., at the top or in the footer). However, the menu items should support the site goals.
- Relevant logo that reflects the intended affordance of the site. The location of the logo may vary depending on which theme you pick.
Alpha submission
The alpha submission should include a status update on all of the above activities and the following items.
- Select the theme from the list above that you are going to use for the design.
- Provide a short justification on why this is the best theme for addressing the UX goals and intended affordance.
Alpha Deliverables
- Submit the above as one integrated team PowerPoint document of 5-7 slides (excluding title slide) on the submission page before class on the due date.
- Include the URL of your site as the last slide. There is no need to include screen prints inside the PowerPoint.
- In the appendix, include a Certificate of Completion for WordPress 5 Essential Training and Learning Genesis for WordPress for each team member.
- Google docs links or PDFs are not allowed. You must use the file naming convention described on the submissions page. 5 points will be automatically deducted if you are unable to follow these requirements.
- Students will be selected at random to present the project.
- The Alpha submission is graded on a pass/fail basis for completing the specific requirements and on the justification of the theme. The quality of the user experience is not graded.
Beta submission
The beta submission should include a status update on all of the above activities and the following specific items.
- A complete site that is ready to be demonstrated with the site URL.
- The site should use at least three plug-ins beyond the standard WordPress widgets. For example, a display plugin to display a table, a data plugin to pull in external data, or any other relevant plug-in.
- Include the results of two observational usability tests, i.e., tests involving two different users relevant to your site goals. You should get testers that fit the intended demographic of your new site. All the team members should participate in the observational usability test(s) and include their notes separately in the below appendix.
- Summarize the results of a heuristic evaluation performed by one of your classmates (not a team member). Include the notes as an appendix.
- Discuss how you will improve the design based on the tests.
- List what you changed from the alpha version and why.
Beta Deliverables
- Submit the above as one integrated team PowerPoint document of 5-7 slides (excluding title slide) on the submission page before class on the due date.
- Include the details of the usability tests and heuristic evaluation as an Appendix in a Word document. The appendix does not count toward the slide limit.
- The team should submit one integrated zip file containing all the required documents. Google docs links or PDFs are not allowed. Include all documents in the zip file. You must use the file naming convention described on the submissions page. 5 points will be automatically deducted if you are unable to follow these requirements.
- Students will be selected at random to present the project.
- The Beta submission is graded on a pass/fail basis for completing the specific requirements and showing how you applied the usability tests and heuristic evaluation to improve the design. The quality of the user experience is a secondary concern.
Final submission
A. Create a Word file that includes the following items. The team is expected to work together on all the items and be able to answer questions on any item.
- The overall deliverables listed at the top of this page.
- The URL of the new site.
- A one-page reflection that includes a list and justification of how your site applies the following concepts and how you improved the design. A significant part of the grade is how well you use specific examples that are unique to your problem and site for the justification. Avoid using generic examples, such as pointing out the affordance of a menu or button, instead use items specific your design, which reflect choices you made. For example, we used XXX color to signify YYY action required by the site goals, or our site has a fun affordance because it uses XX YY ZZZ.
- Affordances
- Signifiers
- Constraints
- Conventions
- Knowledge in the head vs. the world
- Mapping
- An appendix that lists the major improvements and changes you made to the design going from alpha, beta, to final.
B. A 5-minute presentation and PowerPoint slide deck that summarizes the project. The presentation should involve all the team members and include:
- The problem and goals of the site including its overall affordance.
- The intended user demographic and how your site will support that demographic.
- A live demonstration that highlights using Norman’s terms specific items you improved as part of the usability tests and how you achieved the overall deliverables.
C. Team member evaluation: Please follow the instructions provided within the document and email the document separately to the instructor.
Final Deliverables
Zip the Word and PowerPoint documents in items A and B above together and submit as one integrated team file on the submission page before class on the due date. Only one submission per team is needed. Google docs links or PDFs are not allowed. You must use the file naming convention described on the submissions page. 5 points will be automatically deducted if you are unable to follow these requirements.
The final submission is graded on a numerical basis focusing on the user experience and on applying the course concepts.