This is a team project consisting of two students. The instructor will assign you to a team randomly.
In this project you will learn how to create a compelling user experience on a website using the Genesis framework. The deliverable for this project is a site which will demonstrate your knowledge of Genesis and the basics of user experience design.
Your team will come up with your own opportunity. Small sized businesses are usually good sources for problems that fit the scope of the class. The site goals should include a call to action such as but not limited to revenue generation, signing up subscribers, advertisements, and getting donations/volunteers.
For the proposal, send an email to the instructor with a copy to your team member 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.
The Genesis framework
Genesis is a website design framework published by StudioPress. For example, the main MIS Community site is built on top of the Genesis framework with the NewsPro theme.
- Temple has a site license to lynda.com (now part of LinkedIn) which includes excellent step-by-step tutorials on how to use Genesis.
- Click the following link: Learning Genesis for WordPress. Sign in using your Temple AccessNet credentials to benefit from the site license.
- Please ignore the sections in the tutorial about Installing the Genesis Framework or working with templates.
- We will use a special project server https://project.mis.temple.edu/ available for this class. Students in this class will be able to automatically access this server using Temple AccessNet credentials.
- The server contains the Genesis framework and most of the themes produced by StudioPress.
Getting started
- Start watching the Lynda tutorial and experiment using your own site. Note that you must complete the course as part of your course assignments, so watching it early is a good thing!
- 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.
Creating the site
Create a site using one of the Genesis themes.
- Use Executive Pro or select a different theme that better 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:
-
- Appropriate name and URL that reflects the intended affordance of the site.
- A total of 6 pages or posts, with at least one of each. Each 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 Genesis Featured Page widget or the Genesis Featured Post widget to feature relevant content.
- Use the Genesis Responsive Slider on the home page to support the site goals.
- At least one menu including five menu items, and at least two sub-menus. It does not matter where you put the two sub-menus. However, all the menus should support the site goals.
- Layout that uses at least one sidebar.
- Sidebar should include at the minimum the search widget and one other widget relevant to the site goals.
- Relevant image logo in the header that reflects the intended affordance of the site.
The above items are required for the alpha submission below and are intended to help you get started. As you progress to the beta and final solution submission, the requirements do not apply and you should adapt the design to meet the site goals.
Follow these instructions to add your teammate as an administrator to the site.
Alpha submission
The alpha submission should include a status update on all of the above activities and the following specific items.
- Select the theme you are going to use for the redesign.
- Provide a short justification on why this is the best theme for addressing the UX goals and intended affordance.
- Create a draft home page.
- Add the menu structure and organization into the site.
Submit the above as a PowerPoint document of 3-4 slides. Include the URL of the site as the last slide. Students may volunteer or will be selected at random to present the project.
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. Each team member should independently conduct each observational usability test and include their notes separately in the below appendix.
- Summarize the results of a heuristic evaluation performed by one of your class mates (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.
Submit the above as a PowerPoint document limited of 5-7 slides (excluding title slide). Include the details of the usability tests and heuristic evaluation as an Appendix inside the PowerPoint document. The appendix does not count toward the slide limit. Students will be selected at random to present the project.
Final solution submission
Create a Word file that includes the following:
- 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, I used XXX color to signify YYY action required by the site goals, or my 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.
A presentation and PowerPoint slide deck that summarizes the project. The presentation should involve both 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 call for action elements listed in the requirements.
The due date for both items above is before class per the date listed on the schedule. Submit the file on Canvas.