ITzLit

Web application
Spring 2016

Timeline: 5 Weeks
My Role: User Researcher, UI/UX Designer, Visual Designer, Front-end Developer
Tools: Balsamiq Mockups, Adobe Photoshop, InVision, Bootstrap, Mongodb & More

Methods: Scrum, User Interviews, Rapid Prototyping, Wireframing

 

In the age of big data, we have data, but what do you do with it? ItzLit visualizes a combination of crime and street light data to reveal the safest route from point A to point B.

     Itz Lit strives to minimize your worries by maximizing your safety on your commutes after dark. It is a web app developed by 5 UCSD students in COGS 121: Human Computer Interaction Programming Studio over the course of 5 weeks. We display information about how “lit” a route will be for users and display current crimes that may have happened on each given route, so the user has the ability to decide which route they would feel the safest going home on.

 

Try out our app: https://itzlit.herokuapp.com

Github

Features:

  • Easy Facebook login

  • Live updates from users

  • Choices between map routes

    • Using current location as starting point

    • Varying amount of light ("litness") , distance, time, crimes

    • Route directions

  • Map visualization

    • Lights in heatmap form ("litness") with toggle option

    • Crimes and safety zones

  • D3 visualizations

Screenshots from the app:

     Guided by SCRUM methodology as well as productivity tools like Trello, Slack, and a Gantt chart we were able to create a viable product within the timeframe we had. We used the MVC architecture to build our web application.

Technologies used:

  • Spot Crime - gathers most recent crime data in San Diego

  • City of San Diego - streetlight data

  • Delphi - crime data

  • OAuth - Facebook logins

  • Socket.io - chat system

  • Mongodb - data storage

  • Bootstrap - user usability & experience

  • Google Maps API - display routes, crime data, light heatmap

Design Process

     As a human computer interaction class, we implemented our design to follow the basic design principles and Nielson's Heuristics and had weekly iterations critiqued by peers and mentors. Our project began by finding user needs and rapid prototyping of solutions in app form. Here we used InVision and Basalmiq to create the first looks of our app after creating paper prototypes.

 

     We began with an idea for an app that would help users see if their business would be successful but soon shifted due to similar ideas between classmates. However, we were able to use some of the features we thought were important (such as the map) for the end product, ItzLit.

 

 

Basalmiq mockups for the business success app based on our paper prototype:

Preliminary InVision mockups after shifting ideas to ItzLit:

     From prototype to actual implementation, our app has changed a lot. It was the constant feedback we got from our peers and potential users each week that allowed us to tremendously progress our app to what it currently is. Peers pointed out issues with the look and feel of our app as well as the functionality. We were enlightened to what we should focus our energies on developing and changing.

 

Major design decisions:

  • The multiple pages to enter information reduced to one concise form in order to give users results faster.

  • Multiple routes displayed rather than one to allow users to choose the route best for their own ratings of importance (from percentage lit, crimes, distance, and time).

  • Instead of having pop ups on the map visualizations (which we thought would have been convenient for users), the nature of the information we had to display other than what was already on the map resulted in a “More information” section at the bottom of the map. The data in this section is more about correlations with crimes and times of day, not live data. Users who first come to the app would be more focused on information more relevant to their trip, therefore we relocated the data to be in a place where users can further explore.

  •  “Live Updates” of what is happening around the different locations to make the app more engaging and "live". Chat system located by the map to be more relevant, accessible, as well as useful. The con of this is that it become narrower of a function compared to the general forum we had in mind where people could converse about different things.

  • Bright yellow opacities for gradient to represent actual streetlights on map (intuitive representation of concentration of lights) rather than red/green for "good/bad".

  • Separated legend (crime legend and light meter) so users weren't confused with a combined legend

 

More documentation is available on the readme of our Github.

 

Conclusion
 

     In conclusion, the creation of this web app allowed me to discover how important peer and user feedback is on a project. The most important takeaway I got was that the designer is designing for the ultimate needs of their users- not what the user thinks they want. I found the importance of determining the main goals of what users want and working on those features instead of wasting time on frivolous things. This brings me to the point that our app would ideally be a mobile app rather than a web app due to the nature of the problem it tries to address. I am looking forward to redesigning this concept for mobile.

explore more projects