Fall 2020

BRIEF DESCRIPTION:

Take a critical look at the existing KapCC Academic Programs Listing page (https://www.kapiolani.hawaii.edu/academics/programs-of-study/) and next consider how this page should be redesigned. Be sure to think in terms of content strategy (how should the content be organized and structured?), user experience (how and why do different users use this page and how do they each feel about it? how could a redesign improve their user experience?), and visual design (what design patterns could/should be used? what visuals and graphical elements, such as icons, might help?)

RELATED RESOURCES:

• WAC SlideDeck from Feb 2020 (be sure to read closely and note the "data table" design pattern with icons.
  

DELIVERABLES:

1. Low Fidelity Wireframe Prototypes - create as many as possible to explore possible content strategies, design patterns, and page layout options.

2. High Fidelity UI Mockups - to further test the effectiveness of different design patterns, be sure to explore different high fidelity polished visual graphics and UI elements, such as different icon designs.

BRIEF DESCRIPTION:

Take a critical look at the existing KapCC primary (top) navigation system and next consider how the navgiation of the site could (read: should) be redesigned. Be sure to think in terms of content strategy (how should the content/nav items be re-organized and structured?), user experience (how do different users use the nav and how do they each feel about it? what about mobile users?), and visual design (what design patterns could/should be used? we know that there is a strong interest in using a "mega menu" but how? what sub-patterns and design elements could be used, such as icons? CTA buttons? Photography/images?)

RELATED RESOURCES:

• Joyce's v3 Site Map Google Doc

• Joyce's Mega Menu Inspiration SlideDeck v1

• Joyce's Mega Menu Inspiration SlideDeck v2

DELIVERABLES:

1. Low Fidelity Wireframe Prototypes - create as many as possible to explore possible content strategies, design patterns, and page layout options.

2. High Fidelity UI Mockups - to further test the effectiveness of different design patterns, be sure to explore different high fidelity polished visual graphics and UI elements, such as different icon designs.

BRIEF DESCRIPTION:

Establish a shared "mini" style guide that all team members can access, refer to, and contribute to as we make style-guide related decisions as a team, such as fonts, colors, logos, type specimins, etc. This is a crucial shared resource should be a "living resource" that "grows" and "changes" and will be continual referenced and contributed to over time.

DELIVERABLES:

1. Create a NMA "Mini" Style Guide - where do style guides exist and what exactly are they? websites? In most cases the answer is yes: a website. It could also be a sub page to the parent web site. In any case, for now, this needs to exist somewhere and it needs to be accessible by not only us, but potentially the all NMA faculty and staff (e.g. if we one day remove the word "Mini" from the title). My advice is to start small by researching how other companies use, create, and share style guides. Should create a new Google Site for this? Will this work for the long term as a goal of delivering it to the client after the internship is over?

2. Add Content - what elements should be included? What do we need (as interns) and what will the NMA website stakeholders (full-time instructional faculty, lecturers, counselor, lab manager and monitors, students, etc.). Below are examples:

   • Colors (w/ both visual representations and and easy to copy-paste text/code snippets for hex, RGB, etc)

   • Fonts (be sure to think about both website and print collateral (e.g. Adobe Fonts = OK since most within NMA are high level users with Adobe Creative Cloud accounts and access to Adobe Software, but what about things like Google Docs and Google Forms and other things like that that might be a part of the website? Google Fonts = Good for things like Google Docs. With that said, consider a tiered approach with recommended system fonts as a fall back. Also, be sure to consider a limited "Swiss Army" set for multiple purposes, such as a couple of Display Fonts for large headlines, perhaps one serif and one sans at minimum, how about a condensed font that works well in small/tight spaces, or one that specifically works well for buttons, etc. Not only identify the best fonts for these, but then use them and show us visually how to do it).

   • Type Specimens (start a collection of existing ones that are working well, recreate them and label them with the type details such as font, font size, font color, leading, etc., and be sure to have fun with this by creating new type specimens

3. Document Everything - be sure to include within it a documentation system, even if you start with simply an "updates" section with a log of major changes. Then consider what else should/could be documented and helpful as part of a Style Guide? How about "New Features" list of potential new content and features that should be considered as part of the the style guide, such as visual "Do's & Don'ts" examples, or list of visual precedents (e.g. campus annual reports, campus banners/signage, etc.).

BRIEF DESCRIPTION:

We need custom "Hero" sections designs. Lots of them. The newly redesign NMA website is going to be a multi-page website that will have Hero sections for each sub page. We also might need several for the home page if we have a rotating slider/carousel. Furthermore, we might opt to swap them out and change them periodically throughout the year, so this is a great opportunity to put your creative juices to work and have some fun! Be sure to think in terms of copy writing (be sure to write "creative" ("clever" "witty" "fun") headings and accompanying text. Do not play it safe and do not forget about the CTA button text (no "Click Here" buttons!), visual graphics (we are a visual program, so the visual backgrounds should be visually impactful and creative), and functional (be sure to design hero sections for both ID and animation, along with the each of the main sub pages, such as the "Degree Info" page and the "Admissions" or "How to Apply" page and the "Contact Us" page.

RELATED RESOURCES & EXAMPLES:

• Hero with a Video Background Test

• Hero with Animated Text (Staircase "Steps to Career" Concept)

• Hero with Animated Text (Rotating Subjects of Study Concept)

DELIVERABLES:

1. Visual Hero Designs - design as many hi fidelity UI mockups as you can! Have fun.

2. Coded Hero Designs- at some point we are going to need these coded and they'll need to be coded in a way that will allow us to easily drop them into the site and swap them out. This is not easy, but one way to begin doing this is to use CodePen to create separate pens for each of the Hero designs that you think are worth coding, especially if animation is a part of the design or a video background or an interactive feature,

BRIEF DESCRIPTION:

Put together a series of short (5-10 seconds each) video segments that highlight different parts of the NMA program. They can be process shots, screen recordings, animations (or short clips of existing animation), or anything at all that you think can be used to showcase the NMA program in various ways, such as a) as looping video backgrounds to a website Hero section (see the "NMA Hero Designs" sub-task) or they can be used as content for different parts of the site (e.g. clips of someone sketching logos as part of an identity design sub-section of a sub page on the interface design program, or a time-lapse screen-recording of someone coding a website for the front-end coding sub-section, etc.). Have fun!

RELATED RESOURCES:

• NMA "Background" Looping Video (no sound)

DELIVERABLES:

1. Short Video Clips - (5-10 seconds each) create as many as you can. Save them out as .mp4 files and save them inside of your Google Drive folder.

BRIEF DESCRIPTION:

Design a series of custom icons for the NMA program and then animate them for the website using CSS.

RELATED RESOURCES:

• Visit Stripe.com and scroll down to see how they use animated icons.

DELIVERABLES:

1. Custom Icon Set - (UI Only) design as many as you can. Work in Illustrator and be sure to backup your .ai file in your Google Team drive. To share/present, save out each set as a image (.png) with all icons laid out in a grid.

2. Animated Icons Ready for Code Implementation - depending upon the visual style of the icons, you can either work in a program like After Effects and save them out as animated gifs (.gif) or you can explore different options such as SVG animations (.svg) and other web animation options, such as hand-coding the animations manually (e.g. svgs or sprites).

BRIEF DESCRIPTION:

Populate the NMA Student Projects website with student work. See thee WIP wireframes here along with this list of students.

DELIVERABLES:

• PHASE 1:

  1. Chris to set up the site - http://nmaprojects.site

  2. Initial Set of Student Projects - starting with the award winning projects, manually add them to the site.

     • Animation:

       1. Raleigh Harris's Up in Smoke - MELISSA

       2. Hannah Woodward's Frog Birthday - MONY

       3. Tyler's Microphone project - CHRIS

       4. Storm's Peas project - MELISSA

     • ID:

       1. Liana's This is Love Trilogy Book Covers - VENICE

       2. Chrsti Gonzales's Luna Beans - MIYUKI

       3. Tomy's Honolulu Zoo logo - AI

       4. Ariana's Musician Assoc. of Hawaii Logo - ANTHONY

       5. Cheryl Soong's Brightside app

       6. Melissa's Digital Art Site

       7. David's Type Always

       8. Kimi's On The Street - YIWEN

       9. Mahsa's Shrubbery

  3. Initial Set of Students - starting with the same students above (that won awards) create student pages for each of them.

BRIEF DESCRIPTION:

Provide a brief overview of the sub-task.

DELIVERABLES:

1. Deliverable Title - describe this specific sub-sub-task as a deliverable (exactly what should the intern be working on?) Be sure to include the format expected and where it should be saved/posted/shared.

2. Another Deliverable Title - include as many deliverables as required.