My cookbook for a successful app Part 1
Opening
The second week of March 2023 was declared as “Appreciation Week” in our company. During this week, HR wanted to give employees the ability to praise their peers for everyday acts of helping each other and being there for each other.
To make this happen, we developed the “Peer Recognition” app, which was pinned to Teams and allowed each employee to select a fellow employee and send them a badge with some personal text. The receiver and their manager received a card with the badge in a Teams chat.
Note that the app was developed on an LC/NC platform in a very short time (days). None of the people involved in this development were developers. Although HR published the application in emails and a vlog by the head of HR, none of us anticipated what would happen when the application was launched.
Hundreds of badges were sent, everybody talked about the application during coffee breaks, there was a ton of buzz around it, and it created a positive atmosphere among the employees. This was a real success.
Developing an application on an LC/NC platform is not hard. Anyone can do it, but precisely because of that, non-developers might miss some key factors about the application, such as its look and feel, related flows, and more. There are too many bad applications on the market that you might try once and never come back to. No one wants to create such an application.
In this part (first out of two), I will guide you through my insights on creating an outstanding application and effectively integrating it within your organization, focusing on the aspect of “what they see” — exploring how employees will discover the app and what they will encounter upon opening it.
Are you ready?
One app doing it all vs. an app for one job only
UI/UX designers are constantly struggling with the question of what is better for users — one app that encompasses all their needs, like a banking app that includes deposit information, credit card balances, savings accounts, and money transfers, or an app that serves only one function, like a calculator or notes app on a phone.
The answer is it depends. The idea behind developing one big application is to have a consolidated UI with the same look and feel, all working against the same databases. This means that users can easily access the application whenever they need it without having to look for the right app each time.
On the other hand, keeping the app small and precise will make development much simpler, shorter, and more accurate. This method is great for achieving quick wins.
Personally, I used to be in favor of the big app solution until I started developing apps using LC/NC. Using LC/NC typically means aiming for quick wins, so I would suggest going with one single task per application.
My tip: It is most likely best to go with one task per app.
My use case: The Peer Recognition app was designed solely for the purpose of recognizing peers. You log in, search for your peers, and send them praises. The only additional feature available is a personal dashboard that displays all the praises you have sent and received, and of course, you don’t have to use it.
Simple UI, Beautiful UI
You know what your app is supposed to do. Now, think about the process the user will go through to achieve their desired result using this app.
· How many clicks are needed to operate the app?
· What is the flow on the screen?
· Does the employee need to select or write things?
· Do they have all the information they need to take a decision?
· Are they aware of the process triggered by their actions?
You need to consider all these aspects and more. Therefore, I suggest the following steps:
Conduct some research
Your app may be unique, but it is more likely that someone has already created something similar that you can use as a reference. Conduct a simple search for screenshots of the main functionality you need and analyze the results. You will likely find many great examples that can inspire your design and improve your app.
Use your company’s brand colors and design language
Every company has its own color palette, fonts, icon designs, etc. Don’t try to reinvent the wheel. Use your company’s brand colors to emphasize that your app is part of the organization’s routines. It will also make it easier to develop and design future apps. Consider creating some templates with the brand colors to be used across your developments. This will not only make the design process easier, but it will also speed up development time since you will already have some building blocks ready.
Keep it simple
To keep your app user-friendly, follow these quick tips:
• Use clear labels for all fields, and mark mandatory fields with either red labels, asterisks, or both.
• Use common icons for actions like “new,” “cancel,” “edit,” “submit,” and “refresh” to help users find the right button quickly.
• If there are many fields that users need to fill in, consider using a wizard style to split fields between pages.
• Select the most suitable UI control for each field and ensure a consistent look and feel across the app, including hover color, select color, fonts, and outline.
• Think about the apps you like the most and try to emulate their user-friendly features in your app.
Remember to prioritize simplicity to ensure your app is easy to use and navigate.
Use designers when needed
You want your app to look good and be user-friendly. Don’t underestimate the importance of a good designer in conveying a clear message using a clean and accurate design. If you need special icons or images for your app and do not have a designer background, do not use random free images found online. Hire a real designer to provide you with a uniform set of designs.
Have early-phase reviewers
During the development of a new application, there is usually a mockup phase. This is a crucial phase since mockups provide a visual representation of the design and functionality of the application before any code is written, helping to identify potential issues early in the development process. They also allow stakeholders to provide feedback and make changes to the design without the need for costly and time-consuming code revisions.
Using LC/NC platform is a bit tricky, since every control you select already contains most of its definitions and behavior variables. Means part of the “coding” is already done, simply by putting the control on the screen.
I suggest starting with a sketch over a whiteboard or a piece of paper and show it to the relevant stakeholders for their approval before starting to build the actual app. It’s important not to spend too much time making the sketch pretty, or you’ll find yourself investing more time in the preliminary stage than in actual development. However, you shouldn’t skip this step either.
Once the sketch is approved, start building the app and use real screenshots to get approval from stakeholders. The earlier you receive feedback, the easier it is to make changes and corrections to the app.
My tip: Use examples, use company’s brand templates, keep it simple and seek ongoing feedback to ensure the app is meeting stakeholders’ needs.
My use case:
· To make it more personalized, we have added a personal greeting and user initials on the sidebar.
· All the colors used on the screen are the colors of the company’s brand.
· The praises were created by designers who work with the company and are familiar with the company’s brand and vibe
The flow
Simply making your app beautiful is not enough. In the previous chapter, I introduced some of the main questions that you must ask yourself regarding your users. Some of these questions relate to the flow on the screen, such as what the user needs to select and where they need to click, but there are other aspects to consider as well.
Intuitive flow
Your app’s flow must be intuitive. If users are asking you where they need to click or if they are unsure about doing something and are looking for your confirmation, then your UI is not intuitive enough. Users should understand what happens when they choose or click something. They need a clear indication of their actions’ results. Therefore, use clear terminology. For example, instead of using an “OK” button at the end of a form, use “Submit”.
After they take action, make sure to send them a clear notification about their status. For example, if they submit a ticket, consider sending a summary email with ticket details and status.
User errors
Users will make mistakes. They will not use your app as expected. Take it as a fact. Try creating some barriers that will help them avoid these mistakes. For instance:
• Do not allow the submission of a form if mandatory fields are missing.
• Make sure the email field is filled with a valid email address.
• Count the number of digits in a phone number.
• Disable buttons that should not be accessible.
• If a field can be calculated, suggest the outcome as default.
• Filter the data to show only relevant data for the user.
• Add validation messages before the user submits an irreversible action.
Make it viral!
Consider the end of the user flow. Once the user has used the app and may even receive notifications from it. You can extend the user flow by inviting the user to share the app, use it again if relevant, or provide feedback. This approach can help you increase user engagement and traffic. Feedback, if received, can help you improve and align the app to better meet the user’s needs.
My tip: Block the user from making mistakes. Do not let the user the ability to submit wrong data, give him clear instructions and clear error messages if needed.
Prevent users from making mistakes by not allowing them to submit incorrect data. Provide clear instructions and error messages, if necessary, to guide users in their interactions with the system.
My use case:
We have added error messages to notify users if they perform an incorrect action. For example, if a user selects themselves, they will receive a clear notification stating that self-praise is not possible.
We have added a character counter below the greeting input box, which turns red when the user exceeds the allowed number of characters.
The flow we implemented created a Teams card in private chat between the receiver and the “Peer recognition” user:
But also, a Teams card in private chat between the receiver’s manager and the “Peer recognition” users:
While the left button in both cards creates a direct Teams chat to thank or congrats, the right button is directing back to the app so you can spread the gratitude around.
This method led to over 500 praises sent before the official publication of the app.
Catch them where they are
You want employees to use your application, so it must be a part of their day-to-day routine. If it is not mandatory, a mail with a link to your app will not be enough. Even if your application is mandatory, you still want employees to be able to easily find it.
Here are some ideas you can implement:
• Pin to desktop — Users will always pass by their desktops during the day. If they see the application there, they will remember it exists, and always know where to find it.
• Pin to main application menu — If you have an application that all employees are using massively, such as an internal communication app (e.g., Teams, Slack), consider pinning your app to the main application menu. This way, employees can easily find it on their open screen.
• QR stamps — Create a QR code directing to your app and spread it in relevant locations, such as the cafeteria, meeting rooms, gathering areas, etc. This will remind people about the app and help them access it quickly.
• Management to promote the app — The management team usually addresses big audiences when they send emails, share videos, or conduct meetings. Make sure they talk about the app, use it, and promote it. When employees hear about something pushed by their managers, there is a better chance they will check it out and use it.
My tip: Do all the above, if possible.
My use case: Working closely with IT, we added the Peer recognition app icon to the Teams sidebar. We gain two benefits from this approach:
1. There is an automatic notification to the employee when a new app is added to the sidebar. Employees found the app before the official publication and started using it, utilizing the viral flow explained in previous chapter.
2. It is still there, and people are still using it. Although appreciation week is over, and there is no more publication about this app, people find it easy to simply use it, and send appreciation to their peers on everyday basis.
Summary
Developing a successful application is never simple, but Low code/no code platforms make it easier than ever before. In this part, I’ve shared several insights and tips that I believe are essential to consider creating a solid foundation for your app and help it become successful from the user point of view.
In the next (and last) part I will cover aspects of the backend you need to create and maintain to help yourself manage the app for as long as it is needed.
See you in part 2!
