As I previously stated in my blog, I am undertaking Mobile Application Design in my 2nd Semester in order to enhance the relevant skills as I feel such knowledge will be crucial for my thesis. For our mid term assignment, we were required to focus on the planning that goes into an application before writing even a line of code. Ordinarily a successful application abides the structure of thorough research, careful planning and then effective execution in the form of user stories, app maps, wireframes and click through prototypes. Simultaneously, when planning an app one must refer to UI/UX design concepts which include empathy, affordance, familiarity, consistency , flexibility and defensive design.

The objective of this project was to create wireframes and a click-through prototype, using InVision, for the “Your City” app. By defining the desired features and analysing user stories, wireframing could then be implemented.

Features

My City – Features

1. Submit a complaint to the city
2. Review the progress of a submission
3. Make submissions statistics easily accessible and understandable in a beautiful way
4. Poll users on their satisfaction (i.e. “mood”) with regards to various aspects of its governance
5. Present a visualisation of the “mood” of the city with regards to various aspects of its governance

What Are User Stories?

• Presents a feature in terms of a task the user wishes to be facilitated to achieve. There may be several user stories for a larger feature.
• Written in plain, non-technical language. This means that everyone from any level of technical expertise (or none as the case may be) can understand the requirements of the app.
• Example: As a first time user, I want information about the app, so that I can understand how to use it.
• Example: As a logged in user, I want to log out, so that I can securely close my session.

My City – User Stories

User story 1

Title
As a city dweller, I want to submit a complaint, so that it can be seen by the city government.
Description
Complaints are categorised by one of five categories: (1) Housing, (2) Transport and Infrastructure, (3) Economic Development and Planning, (4) Environment, (5) Recreation, Amenity and Culture. Complaints are written and to be submitted to the complaints queue which is reviewed by city office staff. Each complaint is given a unique identifying number for tracking purposes.
Acceptance criteria
– Category selection
– Written complaint as text, maximum 140 characters
– Submission button
– Appropriate screen navigation is present

User story 2

Title
As a submitter of a complaint, I want to track the progress of my complaint, so that I can check that it is being attended to.
Description
Complaints are managed by city office staff (see user story 1). Complaints can have a status of either (1) Unattended to, (2) In progress, (3) Rejected, (4) Accepted. The status of a complaint is accessed by searching for it by unique identifier. If no complaint is found, an error message is shown. If a complaint is found, it’s details and status is shown.
Acceptance criteria
– Search bar and search button is available
– Area for search result
– Appropriate screen navigation is present

User story 3

Title
As a city dweller, I want to view a summary of the concerns of my fellow city dwellers, so that I can be better informed.
Description
All complaints currently logged in the system can be accessed as a list via a database query to the city servers. The information returned per complaint is (1) unique id, (2) category, (3) text, and (4) status.
Acceptance criteria
– List showing complaints
– Refresh menu button
– Appropriate screen navigation is present

User story 4

Title
As a city dweller, I want to express my satisfaction or dissatisfaction on an category of governance, so that I may contribute my view and be heard.
Description
See user story 1 for city governance categories, they are the same as used for complaints. User is provided with a separate satisfaction input for each category. Satisfaction level can be either positive, neutral or negative.
Acceptance criteria
– Satisfaction input for each category
– Submission button

User story 5

Title
As a city dweller, I want to see at a glance how other city dwellers rank satisfaction levels for city governance categories, so that I can feel part of the city.
Description
See user story 1 for city governance categories, they are the same as used for complaints. Satisfaction levels are requested from the city servers and displayed in a graph.
Acceptance criteria
– Graph is visible
– Refresh menu button
– Appropriate screen navigation is present

Wireframing

A wireframe is a basic, “skeletal” design for the layout of a single app screen. Wireframes are screen designs which are not yet elaborated with concrete visual design details. They allow us to focus on the usability of the app design without being distracted by colours, style, etc. You should not create any designs or wireframes until you have written your user stories! It makes sense to wait until you know what you are designing before you design it. You can draw wireframes by hand as I have been doing for the labs, or use a computer program, such as Sketch, Adobe Illustrator, etc. Drawing wireframes by hand encourages you to avoid the distractions of UI style. However it may be more convenient for you to design your wireframes on a computer. Focus on UI component placement, size and layout and do not spend time creating a graphic style.