Project: get Downtown

Interaction Design

Step #1 – Conduct Stakeholder Interviews & Determine Project Scope
To kick off the project, we held meetings with two primary stakeholders: the designer of the current website and getDowntown’s Program Director. We then drafted an interview protocol and conducted interviews with a radio station director in Illinois who had used a version of the website for his own Commuter Challenge event, as well as 3 users of getDowntown’s website.

After reviewing the interview notes as a group, we created a project scope document in which we identified the primary goals of the project as:

  • shifting the focus of the site to logging commutes
  • generally streamlining the site
  • re-thinking the site registration & contest registration process

Secondary goals included:

  • integrating social media
  • ensuring that the website could be marketable to other organizations running similar green commuting events

In this first phase we also designated individual roles for the project and drafted a project plan. We also drafted a project scope document that we submitted to our clients for feedback.

 

Step #2 – Draft Audience Analysis & Create Personas
Based on what we learned in our stakeholder interviews, we drafted an Audience Analysis document for our client in which we laid out our understanding of  how the website was understood and used, as well as our understanding of the user accessing environment and accessibility needs.

We then created 2 personas: one of a tech-savvy ‘power’ user, and another of a user less familiar with technology who used the site less often.

Personas_Group5_final_Mike_435

I wrote the text for this persona

 

Step #3 – Competitive Analysis
We analyzed 6 websites with similar goals, 2 of which did not integrate competitive elements or a community focus. During our review we focused on 5 elements of the competitive websites: registration & initial task flow, data visualization, incentives, user resources and social media. We made the following design recommendations:

  • Streamline registration process (from 2-step to 1-step)
  • Let users log commutes directly from the calendar
  • Add/strengthen an FAQ page, particularly for getting new users started
  • Allow for user-created profiles
  • Include real, non-table data visualizations
  • Add competition stat totals to the Homepage
  • Highlight user achievements with icons (badges)
  • Promote sponsors and participation prizes on the homepage
  • Include commute-related resources
  • Integrate social media

 

Step #4 – Use Cases & Wireframes (Round 1)
Our wireframe design process was extremely collaborative and democratic. The process we eventually settled on was to first individually sketch a given page, then present our sketch to the group and explain our design decisions. We would then agree on which elements from each design should be included in the final version, which we would sketch on a whiteboard.

My sketch of the Commuter Dashboard

My sketch of the Commuter Dashboard

Group whiteboard sketch

Group whiteboard sketch

 

First we determined the basic architecture of the site, then we decided on the universal design elements that would appear on each page. Next we agreed on terminology to be used on the site, created 10 wireframes and drafted 17 use cases.

A proposed site map

A proposed site map I created during early planning stages

 

Step #5 – Heuristic Evaluation
At this point, we traded projects with a group of classmates who evaluated our use cases and wireframes according to a set of web usability heuristics provided by our instructor. We felt an outside perspective would be useful at this stage.

 

Step #6 – Use Cases & Wireframes (Round 2)
In the final versions of our use cases and wireframes, we incorporating feedback from a class critique the heuristic evaluation. For any pages that required substantial redesigns, we would repeat our initial individual sketching and group whiteboarding process.

Homepage wireframe

Wireframe of Homepage

Profile wireframe

Wireframe of Profile page

Logging commute wireframe

Wireframe of Log Commute page

Viewing personal stats wireframe

Wireframe of Personal Stats page

 

Step #7 – Conduct Accessibility Evaluation
Next we evaluated our final use cases and wireframes according to a set of accessibility guidelines provided by our professor. We first worked individually to create a list of accessibility issues and suggested solutions. We then met as a group to integrate our lists and assign each issue a priority level (low, medium or high). Though the class schedule did not allow time to integrate these changes into our final use case and wireframes, we wrote up our findings in a report which we submitted to our client.

 

Step #8 – Create Prototype & Style Guide
Our final step was to turn our Axure wireframes into a clickable prototype and draft a script for its navigation. We then demonstrated our prototype to our class and to our client. We also drafted a comprehensive style guide that covered everything from button location to user feedback, which was sent to our client.