Tufts Dash

Goals of the project

Students at Tufts are increasingly relying on their smartphones to look up the campus shuttle schedule, check their favorite dining hall’s menu, find Tufts-based events to attend and keep up to date with the latest Tufts news & club sports scores. The problem is that doing so with a smartphone’s web browser is a big pain – all of that information is spread across multiple sites, and many of them aren’t mobile-optimized.

It makes sense then for an app to exist that congregates all of the timely, Tufts-related information a student could need into one interface. The app should also be modular and open-source, making it easy for future generations of student developers to pick up and maintain.

Our team is currently building that app, and we’re working together to create an interface that’s far more useful, usable and sustainable than previous efforts.

Nature of the Collaboration

Because our team is so small, communication and teamwork has been important since the beginning. Our group’s even mix of engineering and design talent has allowed us to build the prototype we have today, and because we work on each component together, we’ve each learned to consider product development from new, equally-important perspectives.

Skills

Coding with common web technologies (HTML/CSS/JavaScript) – We decided early on that in order for Dash to be easily maintained in the future, sticking with web technologies and using Adobe’s PhoneGap to create iOS & Android container apps made the most sense. Chris and Charlie were the most experienced with the basics of web development, and they wrote most of the necessary code from scratch, teaching Andy and Allison along the way.

Design & Usability Testing – We also knew very early on that the app wouldn’t be worth making if its design wasn’t a clear improvement over two existing Tufts-themed apps that were available (neither of which is actively maintained). After considering the sustainability, usability & interaction requirements that we set over the course of multiple design meetings, the app’s “bubble” interface was created, and our initial Axure prototypes and testing confirmed that the idea of a dashboard resonated with people. All of our team members were involved in the design process, and the programming perspective & importance of modularity were the result of that collaborative process.

Tools

HTML/CSS/JavaScript (jQuery) – Basic web technologies that we’re using to construct the Tufts Dash webapp.

Adobe PhoneGap / Cordova – An open-source framework supported by Adobe that allows webapps to be converted into native apps that can be submitted to the iOS and Google Play app stores.

Sketch for Mac – An up-and-coming user interface design program that’s similar to Adobe Illustrator. All of our app’s icons and interface elements were created with Sketch.

Axure – A very popular prototyping and mockup/wireframe program. Our very first prototypes were designed within Axure prior to our switch to Sketch. The crude animations we created with Axure allowed us to confirm the viability of the app with our initial round of usability testing.

Pixate – A very new prototyping tool that allows for fast & fluid animations and interactions. We plan on using this to test our high-fidelity mockups in the future (before they’re fully translated into code). 

Process

Our process is detailed in full at http://tuftsmake.com/projects/dash/.

Having never done anything like this before, we used a combination of the “Design Sprint” methodology used by Google Ventures and the user-centered methodologies of IDEO.

We first sought to fully understand the problem by identifying all of the pain points of existing apps and the current ways that students were accessing Tufts-related information on their smartphones.

We then held multiple design sessions in which we thought of all the possible ways our app’s interface could work while also considering design and coding requirements.

After that, we decided on a strategy and created interactive prototypes with Axure to show to other students and faculty. Since then, we’ve improved the design considerably and are currently developing each of the app’s components. A feature-limited preview is now available at http://tuftsdash.com/.

Milestones

We’ve designed more than eight iterative prototypes of the app’s interface since the project began last year, and just this month we’ve already undergone our first major code overhaul by switching from vanilla JavaScript to (the easier to learn & support) jQuery Mobile.

Prototype 2, which we created shortly after figuring out how to use Axure, was the prototype that made us realize how important and cool the project could actually be once finished. The translucent bubble design and straightforward sliding animations were well-received, and it kicked off a lot of great design work.

Our launch this semester of tuftsdash.com as a public preview was also critically important – it was the first functional prototype that we could actually use to track the campus shuttle, and making it live to the public was also a thrill.

Challenges encountered

There have been at least two major stumbling blocks of the project so far.

The first was near the beginning, when we all wanted to create an app but had never actually done high-fidelity prototyping or programmed advanced logic before. We weren’t quite sure making an app was actually doable, but when we played with our second prototype we knew that it was worth trying, and we’ve learned a whole lot since then.

The second happened fairly recently, when we decided to re-write a substantial amount of our code to make it cleaner and more presentable before publishing it to GitHub. Thankfully we did the re-write at an early stage of the development process and not later, but it was still a growing pain for us.

Major outcomes

The culmination of our efforts so far has been tuftsdash.com and a private (buggy) beta app that we’re using internally. From the start, each of our students has had to consider both the design and the engineering perspectives to create something that’s both compelling to use and functional, and we’ve learned a lot along the way.

Innovations, impact and successes

The biggest success so far has been tuftsdash.com and the utility it offers to the small group of students who are testing it regularly. We also think our decision to consider sustainability from the start will eventually make it sustainable in the long-term, unlike the other apps we’ve seen rise and fall during our time at Tufts.