A tool that treamlines design & development process
Project @ Taco Bell

TIMEFRAME Ongoing

ROLE Interaction Design
          UI Design
          Design Research
          Usability Research

 


Overview

I am the UX designer of a team working on the TacoBellPlans.com project at Taco Bell. The main purpose of creating this website is to streamline the design and development process. It is an educational tool, and resource library for both the Taco Bell development team and the franchise community.

Since the content in this website is expected to grow very fast in the future, I made the design decision to provide a flexible website structure that could scale naturally as the contents grows. Because of its nature as a resource website, the website’s architecture was emphasized. Its wireframes and final visual mocks were created iteratively into the development phase.

Click challenge

*Problem

This website is a very complicated library, and have been well organized in a hierarchical tree structure, which contains many layers of information. After the first demo was finished, I conducted structured interviews with 5 website users. And 4 of them commented that they needed to click through too many pages to find the resource they need, which became the major problem that we should solve in the next iteration.

"How might we reduce user's clicks when navigating for resources?"

The Endless Clicks

In the first design iteration, the architecture of the website follows the way how documents are organized in a hard drive. Users have to click though pages to get the file they want, just like clicking through folders. For example, in order to get a certain file, the user has to go through 5 web pages.


*Design

In the new design, we flattened the library structure utilizing hover function. This design change provides depth to a single page, while keeping the organized hierarchy of the information. Users are able to use the shortcuts to escape pages, and have quicker access to the resource they need.

The Hover

When the user hover over the clickable element, the next layer of menu will pop out. By clicking one of the buttons, users will be directed to the third layer instantly. By designing this feature for the entire website, the structure of the website become much slimmer, which makes users’ visit more efficient.

Reflection

Takeaway: By working on this website, I understand that design in reality is a problem solving journey. A good design should be able to respond to real-life issues, and provide valuable solutions. Design irritation is a critical tool to deliver user-friendly design.

Next Steps: I would like to translate all the paper based documents, such playbooks and catalogs, into an interactive website, and provide even more convenience to the franchise community. In my vision, this website should be transformed from a library into a classroom in the future.

back to top

  • email
  • Linkedin
  • Medium
  • Instagram