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.
Kiva Kaupunki
User location and comments about surroundings put to a map
Problem
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.
Research
- Ideation
Design
- Use Case
- Sketches
- Mockups
MVP
- Back-end
- Front-end
- Deployment
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.
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.
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.
Links
