UX Case Studies

Neudesic: Noodles & Company

  1. Background & Description
  2. Techniques, Tools & Technologies
  3. Screen Captures

Background & Description

This project entailed design and development of a new corporate intranet for Noodles & Company. Their existing intranet had issues with findability of information, navigation, and was generally not suited to the various user roles.

Initial design activities included meetings with project stakeholders to discuss and define user roles, the information taxonomy, and the mapping of roles to information ( p2-roles-ia.pdf, 61 KB). From these activities came conceptual ( p2-conceptual-model.png, 524 KB) and navigation models ( p2-navigation-model.png, 197 KB) of the intranet site. These models illustrated the need to design for flexibility in how users find information. Some users navigated based upon their role while others based upon their department or the kind of information they wanted to find. Navigation style was also based upon the user's familiarity with the site's taxonomy: more experienced users were more likely to navigate directly to specific content areas instead of through roles or departments.

Wireframes were defined simultaneously with the information architecture to define the screen types, their layout, and the information available per screen type (see wireframe examples: p2-wireframe-1.png, 190 KB, p2-wireframe-2.png, 203 KB, p2-wireframe-3.png, 200 KB ). Two wireframe iterations were completed and included reviews with project stakeholders and engineers to ensure the design was moving in an appropriate direction and that it was feasible from a technical perspective. Following wireframe development detail design was developed utilizing the wireframes and the Noodles & Company corporate style guide. After the detail design was reviewed and approved by stakeholders, I released design documentation and a style guide to engineers to address color usage, typography, and iconography.

Techniques, Tools & Technologies

Techniques Tools Technologies
  • Usability Review
  • Role Definition
  • Information Architecture
  • Wireframing
  • Interaction Design
  • Visual Design
  • Design Documentation
  • The Omni Group Omnigraffle
  • Apple Keynote
  • Adobe Photoshop
  • Microsoft SharePoint

Screen Captures

img/p2-wireframe-1.png img/p2-wireframe-2.png img/p2-wireframe-3.png img/p2-intranet-home.png img/p2-intranet-home-nc.png img/p2-my-restaurant.png img/p2-calendar.png img/p2-new-vendor.png img/p2-benefit-night.png