case study
Create a note widget for a SaaS web app
I was doing UI/UX work on a SaaS platform for a security firm, one of tasks I did was to create a widget within their platform. The widget is a small app that assists users to take notes. It's a simple app where the basic functions are just to create, edit, and delete notes.
Goal - Create screens for a widget that allows users to take notes within the web app
Profile - A security company offers a web app as a service to monitor its customer's asset in real-time
Design Output - Design mockups that the development team can use to code the widget
identifying user flows
As mentioned the widget will have 3 use cases - create, edit, and delete notes. A user flow diagram is created to determine journey of the user to accomplish his task. The diagram is also helpful in identifying which screens are needed to be designed. Here are some parameters on each use case.
- Create - user can create multiple notes, no limits for number of characters, note details include creator of note and date created
- Edit - no need for save button, user auto-saves typed text therefore previous versions of notes are not available
- Delete - once a note is deleted it goes to the Closed Notes folder, user can empty folder and notes are permanently deleted
For design coherence, I used the brand guidelines when designing the widget. I used the blue brand colors, used just few colors, and kept a minimalist visual style to make the widget simple and clean. The Add Note button at the button is emphasized visually to serve the main use case of the widget which is to take notes.
This is a small project that caters to a simple user goal. Sometimes we tend to overdo small projects. And the result becomes a bloated app that is out of scope. It is important go back and understand the goals to avoid this. The design and development of the widget was quick that this app was immediately deployed in the platform. It has then served as a nifty feature for the users. Rapid completion of projects is productive to the company and favors the user since they can put the feature in use immediately.