A brief introduction on our MHCI Capstone Project.
Team Frontier is composed of three Masters in Human-Computer Interaction students from Carnegie Mellon Portugal program.
OutSystems is a enterprise software company based in Lisbon, Portugal, which provides solutions for IT organizations to build, deploy and manage enterprise-class web and mobile applications.
Service Studio is the Integrated Development Environment of OutSystems. The challenge is to redesign it to cater to citizen developers.
Citizen developers are corporate professionals in different fields such as Finance, Marketing, Sales, etc. They are non-programmers but they have experience using business intelligence tools like Microsoft Excel. Their work is data-intensive, requiring them to manipulate, analyze, and report data related to their domains.
Our project is divided in two major phases: research and design, wherein design consists iterations of ideation, prototyping and testing.
Our team utilized different research methods to gather data and understand the current product, market space, and research space before going to the design phase.
All the information collected in the research process was analyzed to come up with distinct behavioral and mental models that citizen developers are subjected to.
Needs and motivations
Citizen developers' goal is to solve a problem and not necessarily to create an app. They will only consider creating an app if there is no available solution to their problem yet, and also if they will be able to use it frequently.
Citizen developers find it hard to visualize the logic and workflow of creating an app. They try to map their experiences and business domain expertise with the workings of the tool. Any mismatch in this mapping makes them prone to errors.
When citizen developers start using the tool, they want to have clear information in the interface on where to start. If they see too much information, they get overwhelmed. Programming jargon also intimidates them.
It is hard for citizen developers if the interactions do not have affordances. After learning the interactions, they try to mimic the same interactions later on. If there is deviation from this pattern, they get confused.
Citizen developers evaluate the interface at first if it is worthwhile to use. A cluttered interface gives a negative impression. The size and position of interface elements also affect how they perceive the interface and its functionality.
Citizen developers want to learn how to use the tool as fast as possible. They have different preferred ways of learning. They are generally hesitant to visit help and documentation, and prefer to have a community whom they can ask for guidance.
We refined our designs by testing and analyzing it over multiple iterations.
The workspace where the user builds the app.
The initial screen, which is the overview, shows the overall structure of the app — the pages and data groups in the app, and also the connections between them.
User can drag and drop pages or data groups to the overview canvas to create them. They can then be opened and closed in tabs as per the user’s discretion.
What-You-See-Is-What-You-Get (WYSIWYG) editor for the app’s interface pages.
User can drag and drop elements from the library to the page and move them around.
When an element is selected within the page, the properties panel will update to show relevant options, and there is a contextual menu that appears right by the selected object.
The Resource Center contains suggested resources and contents related to what the user is working on in the interface. It can be accessed any time by clicking on the icon on the upper right of the top bar.
The contents are categorized into different types such as in-app guides, tutorials, official documentation, questions and answers, and add-ons.
Content can be created by the community or OutSystems, and can also be up-voted or down-voted by the community.