Kiva Kaupunki

User location and comments about surroundings put to a map

map

Problem

The Living Lab Bus (LLB) project consortium arranged a Student Software Competition, for developing an application that benefits bus passengers, with monetary prices. Limitations of application: must be original work and unpublished, must benefit bus passengers somehow, must be a web application, must utilize at least one publicly available API, must be developed using LLB Developer Kit

and submitted through LLB Developer Portal
.

Solution

To make our surroundings even better and more enjoyable. Kiva kaupunki is an application where user input about geolocation is collected and visualized on a map. Comments of positive or negative in nature to bring location knowledge to user base, city officials as well as for the public.

Process

Project was very condensed and we had very little freetime to work on it.

    0 step
  • Research
    • Ideation
  • 1 step
  • Design
    • Use Case
    • Sketches
    • Mockups
  • 2 step
  • MVP
    • Back-end
    • Front-end
    • Deployment
  • 3 step
  • Evaluation
    • Heuristics

Logistics

Team
  • 1 Designer
  • 1 Developer
Time Frame
  • April ’17 – June ’17
My Role
  • Service Design
  • Interaction Design
  • UI Design

Research

We asked ouselves what was possible to accomplish with bus capabilities, in the available timeframe as we had schedule restrictions.

In search of an API we browsed the implementations available at avoindata.fi, though disconcerting was the lack of new ones related to public transport as Pasi, the developer, was not interested to work with the ones he had previously worked with.

There where concepts were inquiries were made to collect data about cities with a location tagged on to the comments collected, so planning officials could take better notice on some of the things in their cities from the perspectives of the citizens. I suggested we create our own system of collection for the potential audiences of LLB.

Design

Focus should be put on clear representation of the users task to be acomplished, status of the task and how to navigate forward to acomplish the whole job to be done. I made a use case description to figured out what screens would be necessary. After this I draw quick pencil drafts of the screens, with the focus of user interactions available.

USE CASE DESCRIPTION

A woman steps on a bus on her way to Hatanpää arboretum. She intends to enjoy the sight of beautiful flowers and read a book by the lake. During the bus ride, she sees a little girl crossing the road on a crossing. The girl manages to cross the road but it looks like she feared high traffic. Woman thinks that something should be done to make this specific crossing safer as she also has felt unsafe crossing it on her dog walks. Instead of passing on this thought she decides to do something about it as there is now an easy way to act. She goes home screen in her smartphone and touches the living lab buss icon, now she selects Kiva Kaupunki from the main screen of the application. She selects the crossing location on the app, selects the topic of "Difficult to walk on foot" and goes on to write a comment about the crossing. Application announces that the comment has been saved and will be available soon on the map. The woman continues her journey to location and decides to share also a comment on about arboretum on arriving there, as it is one of her favorite places to visit.

User Interface Design

With an app called Pixelmator on my Ipad I made a more honed UI mockup. Interaction inspiration I sought from different Instagram accounts. For visual style I followed Material Design and utilized colors of the Design Guidelines made available by the LLB team.

My mockups of the screens of the application

Minimum Viable Product

The plan was to collect data of location, subject and a comment and make a map data visualization when sufficient data has been collected and then possibly pushing out an update for the users to inspect the map.

Screen capture of our api

Pasi established Heroku backend with a very basic CRUD API, with POST adding, GET getting all and id:GET getting a unique entry. It can be confirmed here that the api has a location, topic and a comment.

We used ReactJs to implement the web app as Pasi is more familiar with it. I worked on the HTML/REACTJS layout and CSS styling of to fit the app to the mockup. Extended deadline breathing on our necks, Pasi and I worked out the kinks in the app and I sent it to approval on the LLB Developer Portal.

Evaluation

I conducted heuristic usability analysis, based on Jakob Nielsen's 10 general principles for interaction design, to evaluate the MVP.

Visibility on system status is clear as communicated by headlines, top right corner indicator and existance of back button. The system does it's best to use users' language if possible. Emergency exit is always possible as application exists in browser. Screens are consistent and try to fit the flatdesign and atleast LLB standards. Unfortunately error messages were not implemented. Recognition over recall is implied by clear systems states and guidance on questions. System is flexible as user is able to skip and complete the task without filling out everything. The design is as minimalistic as possible and gives out and aesthetic appearance. Unfortunately errors are not handled properly, help and documentation are non existant, but on LLB right top corner there is a feedback form link with topics defined by us the developers.

Conclusion

"With different pros and cons the jury found on multiple apps, the jury chairman decided to divide the first prize between the three teams. Thus, each team will receive 200 € and a diploma."

We won the competition, but not in a satisfactory way. From the start, we had a confident team together, we were sure to produce something. We had a solid concept, but because of our day jobs too little time was reserved for software development. I learned that every project should start, by appointing a product owner or project manager title, so that there would be someone who is responsible for scheduling.

A lot of confidence was gained as we truly can make awesome things together and thus learned to value each other's skills and professionalism. We hope we can tackle more projects together in the future.

Next Project

Concept service for people with memory deseaces