My first real-world technology project with UNICEF

As a sophomore in computer science engineering, I often wondered what “real-world” technology projects looked like, how much experience and knowledge one would require to work on such projects, and what my first internship would entail. Now that I have been working with UNICEF for two months on an open-source web development project, I would like to demystify what real-world technology projects look like for my fellow learners.

In this article, I will (1) present a breakdown of my internship journey so far; (2) highlight the types of projects that I have worked on, (3) share the resources I used when I needed help, and (4) provide you with some pointers on what to expect from your first technical internship.

📝 Project Description

I was tasked with developing the Eligibility Form, a web-based form consisting of nine questions to help users quickly determine if their digital solution can be nominated as a Digital Public Good (DPG). If the user is eligible, they are directed to the submission form where they can fill out additional information. If the user is not eligible, the form will provide them with pointers on how they could improve their solution in order to be eligible.

The implementation behind this was conceived in two main phases:

• Developing a standalone Minimum Viable Product (MVP) using React that provides the following functionality:

  • An introductory page, one page for each of the indicators, a summary page at the end
  • Record Yes/No answers for each of the indicators
  • Provide resources/FAQs/additional information for each of the indicators

• Integrating the web app into the existing public website, digitalpublicgoods.net

Anyone with some basic knowledge of web development, Git, and GitHub may find this task reasonably easy. So there you go; real-world projects are not always highly complex or time-consuming. In fact, you’re likely to spend more time understanding the requirements and objectives, researching different ways to achieve the task, or deciding on the most efficient way, than the coding part itself.

Now let me give you a breakdown of how I went about working on this project.

👩‍💻 Developing the MVP

During the first week, I spent a significant amount of time understanding how users might interact with this application and researching best practices on building such forms. There was an existing wireframe demonstrating how the form was expected to look, but I thought about how I could further improve the user experience.

I read some blogs about creating forms and quizzes using React. I set up the basic structure of the form, keeping the data for the questions, answers, and FAQs separate from the logic and other components so that the content could be easily updated. First, I developed the styling components of the page and then added the functionality to navigate forward and backward through the questions. Then, in the next few days, I coded the logic to store all the responses and display the results at the end. At this point, I had completed the basic functionality and styling of the form within the first week.

💻 Integrating into the existing website

During the second week, my task was to integrate the app into the existing website. Since the website was created using four interconnected repositories, it was a little difficult to understand how everything worked together. I invested some time to understand the code thoroughly and asked my mentor for support when I was stuck.

It took me almost an entire day to set up and run the code on my local machine. The next step was to figure out where the new code had to be added. The codebase seemed intimidating at first, but the key for me was to read it as many times as possible. I realized that after each reading, it became a little more clear. So after going through it quite a few times, I figured out how the existing code was working after which the coding part was relatively easy to work on. Within a week, I updated the colors and typography to match the style of the website.

🧠 Brainstorming additional features to improve user experience

The next step was to brainstorm ways to improve the user flow and experience. In the next few weeks, I added some additional features to the app such as a progress bar and keyboard shortcuts to help navigate faster and increase accessibility. I also tried to make the form more responsive.

One of the relatively challenging tasks was to pass the data filled by the users in the eligibility form to the submission form so that any questions that had already been answered could be prefilled so that users would not have to answer them again. This required me to save the responses in a local database in the browser so that they could be accessed by the submission form. I was not very familiar with these concepts, so this required me to read up and learn more about cookies and databases.

👨‍👩‍👧‍👦 Improving based on user feedback and documentation

After the first version of the form was completed, I requested members of the communications team to test the form and provide their feedback. This was followed by a number of improvements in the content as well as user experience, which included adding an introductory page to help users understand the purpose of the form, and increasing the information density by placing all the components on a card.

After the suggested changes were in place, I requested the team for the second round of feedback. The major change after this round was to update the user task flow for different types of users/audience members who could end up using the app.

Another important task was to add a README file to the repository so that future contributors can easily navigate the codebase.

✨ Conclusion

This was a peek into my life as an Outreachy intern at the UNICEF Office of Innovation. Remote open source internships generally provide a lot of flexibility in terms of working hours, so you’re good as long as you get the work done in time. The responsibilities, tasks, and schedules can vary based on the role and the organization, but every organization will have a system in place to help you out whenever you need support. Don’t hesitate to ask questions and use this opportunity to get to know as many people in the organization as you can — every person will have something interesting to share with you!

🌐 Links to the issues and my contributions

• Eligibility Form Github epic
• MVP for Eligibility Form
• Integration of eligibility form into existing website
• Link to other contributions
• Link to the final product

I hope this blog was useful to you in some way. If you have any questions related to my internship, feel free to drop a comment below.

Best of luck and happy coding! 😃