There were so many things I did not know when I went to Uganda for the first time. Like how MTN Mobile Money works, or how long it takes to drive from Entebbe to Kampala, or that in five years I’d be studying web development.
Kind friends remind me that my previous, seemingly unrelated-to-software-engineering work experience will come in handy. That came somewhat true during my first project week, when students at different points in the curriculum come together to build an app and accompanying marketing page.
I picked Ride for Life, a project that nonprofit Safe Mothers Safe Babies (SAFE) might eventually build to connect pregnant Ugandan women with safe boda boda (motorcycle) rides to health clinics. Typically women have to walk miles to the nearest clinic, depend on unreliable buses, or hail a taxi that might then tax them unfairly. A secure uber-like service could solve this problem.
Unfortunately, our team wasn’t able to talk to SAFE directly, but this is where my previous experience came in handy. Since I once worked at a nonprofit that ran projects in Uganda, I could imagine what SAFE might need, that unlike a traditional marketing page targeted at U.S. donors, the Ride for Life page would need to convince Ugandans to sign up for the new service.
Starting from that premise, I had to build from a mobile-first mindset. Even in my simple pen-to-paper mockups, I quickly recognized my limits. I am not any kind of designer, as the old drawings in my sketchbook reminded me. I had to accept that and move on instead of dwelling on how nothing I draw or design will ever look as good as I hope it will.
Once I had a good enough mockup, I moved on to the basic HTML structure. I did nothing super noteworthy here, aside from commenting when I planned to set particular element to show only on mobile or just on desktop. I specified that “display: none” property later in LESS, along with other styles, like the wonderfully named “bolder” font property. Working from scratch on a website with Less helped me better understand nesting. For example, I needed to set “display: flex” not only on the big “How it works” container wrapping around each of my “how snapshots,” but also on each snapshot itself so I could then align the screenshots and paragraphs each contained in a column, while the three snapshots themselves stayed in a row. Yay, flexbox!
My final product lives at this randomly generated Netlify url for now. It’s far from perfect, and I still have lots of places to improve, but I’m more excited to focus my efforts on starting other projects from scratch to better my understanding of web design instead of dwelling on making this site perfect. I’m particularly interested in how I might be able to help out some of the nonprofits I currently volunteer with.
There are still so many things I don’t know, and I love that.