I came, I saw, I built… Sayleh, the new feedback loop tool

Are we both giving and receiving enough feedback?

Awhile back, my colleague and I were chatting about whether we were providing enough constructive feedback for people around us during team retrospectives. Then, he brought up the term radical candor which means to say what you think and to challenge directly while also showing you care personally for the person you are saying it to at the same time (that is to ensure to lie in the upper right-hand quadrant).

Source: https://www.radicalcandor.com/

Providing constructive feedback is both difficult and foreign, especially when we grow up in a culture which supports the notion “if you don’t have anything nice to say, then don’t say anything at all.” However, not saying anything would most often harm than help.

I would argue that criticizing your employees when they screw up is not just your job, it’s actually your moral obligation.

This works not only from bosses to employees, but feedback up the ladder is equally important as well.

Elon Musk once said, “I think it’s very important to have a feedback loop, where you’re constantly thinking about what you’ve done and how you could be doing it better.”

I would love to know what people think of me or how I could have done better — not in the sense of “I think you are doing okay”, but concrete feedback- feedback to help me improve. So far, 3 of my colleagues have been asking me for feedback in the workplace. I started my current job 3 months back. Is that number considered a lot? Well, you tell me.

That got me thinking. When would be an appropriate time to give feedback? How often is there an opportunity for one to give feedback? Even if there is, the feedback session is probably a scheduled one to one appointment with a direct superior. Are there no quick avenues to receive feedback from people whom you work with? Even if there are, would people dare to say what they really mean?

Time to take things into my own hands!

Introducing Sayleh

“Eh say leh..”

You’ll hear this phrase fairly often if you stay in Singapore because its a Singlish term which also translates to “please say” (usually accompanied with a begging tone).

Sayleh is a platform which allows you to ask your peers/colleagues questions you’ve always wanted to know (but don’t dare to or can’t find out). It allows you to find out what people REALLY think about you. The answers you get are anonymous and thus you can expect candid feedback**.**

Getting started on Sayleh is really simple too.

1. Login into Sayleh via Facebook and get your own generated URL
2. Create questions you would like to ask your peers/colleagues (e.g., what do you think are my weaknesses?)
3. Share the URL, then sit back, relax and wait for responses to flow in (all responses are anonymous)!

2 things I’ve learnt from designing Sayleh

You !== User

After completing the first draft of Sayleh, I went to do my “user research” by asking friends what they think of the website. To my surprise, they said the steps of onboarding the user are unclear.

It then dawned on me that doing your ‘user research’ in the early stages is crucial. Having built Sayleh from scratch and knowing the user flows at the back of my head, the whole experience felt intuitive for me. However, to the user, I would not know what steps I need to take once I land on this page.

For the first iteration of Sayleh, this is what the user sees on the home page upon signing in via Facebook.

First iteration of Sayleh

Although there were links to navigate to the different pages on the website, it still wasn’t intuitive for the user which is the next step to take. The next modification (see screenshots below) then included adding a prompt for the user to create questions they would like to ask others and a copy icon next to their generated URL so they could easily copy their link and share it.

Nudging users to the right user flows

Allows users to copy links to share with their friends easily

Don’t Reinvent the Wheel

While attempting to complete this project, I struggled a fair bit with design. Designing (and the intricacies of CSS or SCSS) was never my forte. Through this project, I’ve learnt the importance of good design (or a good designer on your team) — I personally feel it’s a balance between what design would be memorable and yet not going too overboard and having a coherent theme throughout the site.

One advice I have would be never to reinvent the wheel when you are just starting out. Unless you have a natural flair in designing (good for you), get design inspirations from your favourite apps because as a user, I would be familiar with the interfaces I use on a day to day basis and I wouldn’t want (or rather it doesn’t make sense) to relearn a new interface.

In fact, I am still in the midst of improving certain design aspects (feedback is more than welcomed!).

How is Sayleh built (for the geeks out there)

Languages & framework

Sayleh is built on ReactJS framework with a NodeJS backend. The reason for choosing ReactJS to work with is because I’ve always been an AngularJS developer. With the number of articles comparing both AngularJS vs ReactJS (see here and here), I was curious to try it out.

ORMs & Databases

Since the data to store (such as Users, Questions, Answers entities) is mostly relational, I thought mySQL as a relational database would be a good choice. Sequelize is used as an Object-Relational Mapping (ORM) tool, which allows for easy querying and manipulating data from the database. In other words, with an ORM, one does not need to write mySQL statements, but instead interact directly with an object.

This enforces the Model–view–controller (MVC) pattern by creating a model layer to be used throughout the application, allowing the code to be a little cleaner. Sequelize also can also perform simple validation such as ensuring the datatypes are correct before insertion into the database.

Hosting and configuration

Sayleh is hosted on DigitalOcean with a Nginx reverse proxy set up. Nginx allows the setting up of multiple ports to host more than one application with just one server or domain name.

The ReactJS app is served out as static assets while the backend NodeJS server is setup to use PM2, a NodeJS process manager to run the app. Benefits of using PM2 include helping to keep your site up by restarting the application if it crashes.

Logging

Thoughconsole.log() is simple to use, it cannot be switched on/off in different environments. For instance, I only want certain warnings to appear in development and not in production. Also, it does not provide you with additional information about the logs such as the routes, the date/time of the error etc.

I used Morgan with Winston to perform logging.

Morgan is a HTTP request logging middleware. It allows us to format requests coming in. Since NodeJS provides two default write streams — stdout and stderr and PM2 by default creates separate log files for our stdout and stderr streams, we can use Morgan to format requests coming and pipe it to the relevant steams.

Do not underestimate the power of logging for an application. Well, I didn’t used to think that way until I saw this. *Mild panic attack moment*

Why you want hack me):

Someone was trying different routes on my site. However, I could not get any context of the remote IP address or the date/time of it. It is a timely reminder to improve logging to output more information so I can find out what steps to take to make Sayleh more secure.

In this case, I had to change Morgan’s format to use combined in production which outputs more attributes such as date, remote address etc (and use dev in development). Check out more formats of Morgan here.

Winston is a multi-transport async logging library for NodeJS. Currently, I pipe the logs to a file and added file rotation with a library called https://github.com/winstonjs/winston-daily-rotate-file. It allows me to specify the maximum size of the file after which it will rotate and how long I should keep the logs for, before they are automatically removed.

Change is the only constant

I am in the midst of containerizing Sayleh. Currently, while deploying directly on DigitalOcean works, containerising allows a clean separation of concerns and guarantees a consistent environment, so you can ensure the code works regardless of the target environment (be it your laptop, or your own VPS etc). Also, it allows for easier scaling if necessary.

In the next phase of Sayleh, you can expect additional features such as giving the user the choice to create different types of questions (MCQs maybe?), and of course, a more stable platform >.<

Lastly, open source! I would love to encourage collaboration among developers.

Show some love, please?

If you would like to follow my humble journey on Sayleh and other of my projects, you can follow me on Medium or if you have any ideas on how I can improve the site, I would love to hear them — just email me at [email protected]. Lastly, if you would like to help me in making the world a better place one line of code at a time, you can support me at my Patreon account here.