Recipes for Teaching

RECIPES FOR TEACHING

As a Web Designer at NYU Steinhardt, I worked with the Special Advisor for Policy, Strategy, and Innovation as well as Instructional Designers from Steinhardt Academic Technology to create a platform that contains resources for instructors on teaching and learning. The goal of the platform was essentially to teach instructors how to teach by providing them with succint and easily digestible information on different topics. This is why the format of recipes was adopted as inspiration—because it makes it easier for people to quickly scan and read through text and it provides a clear step-by-step process. I was responsible for creating wireframes, mockups, and prototypes, which the team would then test in order to give me feedback for future iterations. I built the website using a customized HTML/CSS template on NYU's Wordpress web publishing platform. The Adobe XD prototype can be explored below along with the sitemap and mockups of a few pages.

̌
̌
̌

    
    CLIENT / COMPANY:
  
    NYU Steinhardt
  
    PROBLEM / CHALLENGE:
  
    The impetus behind this project is Ted Magder's course at NYU Steinhardt titled The Craft of Teaching which focuses on the practices of teaching and creating valuable learning environments. Through this course it became clear that instructors at Steinhardt don't have a centralized resource where they can access guides, videos, and tools that help prepare them to teach. During the intial research we discovered that there are online platforms like this at other universities. However, many of these platforms are dense and text-heavy which is a difficult way to relay information to time-pressed instructors who are juggling many responsibilities.
  
    TARGET USERS:
  
    Professors, lecturers and teaching assistants

      
    GOAL:
  
    Provide a platform with succint and easily digestible information on different topics that cover how to teach.
  
    ROLE:
  
    Visual Design, UI/UX Design, Web Design, Front-end Development
  
    TEAM:
  
    Ted Magder — Special Advisor for Policy, Strategy, and Innovation
    
    Siobhan Wilmot-Dunbar — Senior Instructional Designer
    
    Parker Hollingsworh — Senior Digital Learning Designer
  
    TOOLS:
  
    Adobe XD, Adobe Photoshop, NYU WordPress Web Publishing Platform, HTML/CSS

    
    INSPIRATION:
  
    Since recipes were the format that Ted wanted to borrow from, we spent time in the early stages of this project looking at various cooking websites to explore different homepage layouts and to understand how content is typically classified and organized. As mentioned above, we also studied the platforms of other universities to identify the strengths and areas of improvement in how information about teaching and learning is categorized. Since this project is specific to NYU Steinhardt, I thought it would be important to pinpoint the essential visual elements from NYU Steinhardt’s website that would need to be incorporated in this website, in order to ensure coherence in branding. As such, I paid particular attention to the header and footer of the NYU Steinhardt site and I took a look at the ready-made color schemes NYU provides since it's also important to adhere to overall brand guidelines.

Ready-made color schemes provided by NYU

    
    LOW FIDELITY WIREFRAMES:
  
    Once I had a better idea of the visuals I sketched out some lo-fi wireframe options for the homepage to present to the team. The key takeaway from our discussion was that having one featured posts would be more appropriate, at least in the beginning because new content wouldn't be added frequently enough to have multiple posts rotate into this position.

    
    TYPOGRAPHY & COLOR SCHEME:
  
    In keeping with NYU's branding, we decided to use the Gotham typeface family so I went on to define the heading and paragraph styles for the high-fidelity wireframes, prototype, and website. For the color scheme, I started off with the NYU purple (#57068c) and made other purple swatches of varying saturation and brightness. Given how versatile and vibrant the NYU purple is, a more monochromatic color scheme seemed like it would offer a flexible yet clean and eye-catching aesthetic, which is why this was favored by the team.

Typographic hierarchy & HEX code color scheme

    
    HIGH FIDELITY WIREFRAMES:
  
    Throughout the process I created multiple iterations of the wireframes and interactive prototypes to discuss with the team. With each revision, I made changes to the layout and composition as Ted provided me with updated text and direction for the imagery. The wireframes below are some of the final wireframes I created before I began building the website. And the sitemap below shows the current information architecture of the website.

    
    RESULTS:
  
    I was pleased that we were able to get the website up and running by the end of the 2020 Spring semester considering that the project took off in February 2020, and I was keen to continue working on it to make updates to the website as new content came in. However, with the shift to remote learning that happened midway through the semester, the team had to shift their attention to producing and providing resources to instructors that were more specific to this mode of learning. That said, I successfully handed off all the finalized materials to the team and the necessary systems are in place to allow the project to be re-visited down the line.

CLICK HERE TO EXPLORE THE WEBSITE >

EXPLORE THE FINAL INTERACTIVE PROTOTYPE BELOW OR CLICK HERE >