Sample Apps
Out-of-the-box app templates to build and deploy a prototype app in under ten minutes.
Context
OutSystems is a low-code platform that provides tools for companies to develop, deploy, and manage omnichannel enterprise applications. Given this, our users are (usually) developers or people with a tech background. However, our end-users are anyone who uses the final apps developed by OutSystems.
My main goal in this project is to make sure our end-users have the best possible experience with the OutSytems-generated apps.
As a Product Designer for the Sample Apps team at OutSystems, my focus was to establish the bridge between the engineering team and the user by building UI Accelerators and Application Templates for the OutSystems integrated development environment - Service Studio.
The research showed that 9 main industries were the priority use cases to focus on building Sample Apps.
Banking, Insurance, Employee Directory, Field Services, Order Management, Sales CRM, Field Inspections, Energy Portal, and Retail.
The research
We proceeded to examine the top market apps, platforms, and websites that relate and compete with the ones we are aiming to develop. Our analysis was conducted from a user experience perspective, with the main use cases already selected. By doing so, we aimed to gain a better understanding of our users, their pain points with existing market options, and ultimately, to prioritize the features that should be included in each app.
Benchmark
User journeys
User interviews
It's important to note that one of the main goals of this project was to enable the user to deliver a quicker Proof of Value. To achieve this, it was crucial to develop something that would cater to the user's minimum needs, so that they wouldn't have to delete anything from the app and could simply build on top of it. During the research stage, our focus was on identifying the most common characteristics of each experience, as well as the most important user flows.
The design
The team worked together to understand the scope of the needs for each use case and to balance the time and effort required. For each main industry, MVPs were designed to ensure we were covering the major user flows features. All apps are designed using the company's Design System - OutSystems UI - to ensure visual consistency across all products and to follow guidelines.
The first stage of design involves drafting low-fidelity wireframes while continuously receiving feedback from the team. Once the first wireframes are approved, the final design and mockups are created in the second stage of design while working with the Product Content team to finalize the copy and sample data for the designs. Finally, the work moves on to the QA stage where it is reviewed, and if everything is as planned, the designs are released.
The usability tests
After the initial release of the sample apps for Retail, Field Inspections, and Sales CRM, I conducted moderated testing sessions to evaluate and understand any possible pain points for each app. In the first stage, I conducted 30 usability tests for the three use case apps with the participation of 10 users. Half of the users were presented with the mobile version of the apps while the other half were presented with the desktop version. These tests were focused on evaluating both the end result of the designs and the developer experience of building such screens in our low-code platform, Service Studio.
The final average results of these audits were the following:
Friction score: 13 (frictionless developer experience)
Delightful score: 4 out of 5 (delightful end-user experience)
Although the results of our moderated test were positive, we also collected a lot of data points on areas where we can improve both the development and user experience. Based on this feedback, we have drafted our next iterations to address these issues and continue improving our apps.
In conclusion, the overall experience of the UI Accelerators was very positive and engaging, leading to successful results and the achievement of our goals.
Side note
To ensure proper tracking of the work, I created detailed documentation that outlines every step and the reasoning behind it. Furthermore, I developed a Design Rule Book that highlights the best practices for designing UI Accelerators and Screen Templates. This aimed to help standardize the process and make it more scalable.
The final deliverables-
Focused on the 9 main fields of interest (Banking, Insurance, Employee Directory, Field Services, Order Management, Sales CRM, Field Inspections, Energy Portal, and Retail) I designed 9 sample applications for Web and Native.
-
Spanning from List, Detail, Overview, Gallery, Forms, Charts, Maps, Shopping cart pages (and more) out-of-the-box built features to accelerate dev work.
-
Send money (Banking);
Insurance calculator (Insurance);
File a claim (Insurance);
Purchase product (Retail catalog).
A big thanks to the Sample Apps team, UX Content team and everyone at OutSystems who was involved in this project.
Jan - Nov 2021
Client
OutSystems
Date
2021