Overview

A brief introduction on our MHCI Capstone Project.

The Team

Team Frontier is composed of three Masters in Human-Computer Interaction students from Carnegie Mellon Portugal program.

The Client

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.

The Challenge

Service Studio is the Integrated Development Environment of OutSystems. The challenge is to redesign it to cater to citizen developers.

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.

We want to understand citizen developers’ needs, so that we can design an intuitive and usable development environment for them to create an application.

Hunt Statement

Press play to watch the project introduction video

Process

Our project is divided in two major phases: research and design, wherein design consists iterations of ideation, prototyping and testing.

Research

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.

    Current Product

  • Heuristic Evaluation
    15
    usability parameters
  • Usability Tests
    8
    users

    Research Space

  • Literature Review
    9
    research papers

    Market Space

  • Competitive Analysis
    6
    competitors
  • Contextual Inquiry
    7
    users

Insights

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.

Mental model

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.

Information

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.

Interaction

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.

User Interface

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.

Learnability

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.

Design

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.

Press play to watch the demo video
Click here to view the UX Specs

About us

A little bit more about our team.

Where have we been?

View Map