Developing my first mobile app prototype, Nightly

As someone who had limited knowledge in user research, user interface and marketing, the information and skills I have gained in CareerContact’s one-week course were really remarkable.

Jenelle Lee
CareerContact
7 min readNov 26, 2020

--

Photo by Rodion Kutsaev on Unsplash

The course has allowed me to delve into so many different topics and processes, while also fulfilling to create a product that I was mostly proud of. Remembering my sweaty palms before the first Zoom meeting, I did not know what to expect from an online learning experience, especially one where I was unsure whether I would be able to get a good grasp of the subject. However, the kind and tenacious mentors have definitely helped me to become more confident in improving my fundamental digital skills.

The Digital Skills Fundamentals Course

User experience

Going into the first chapter I was a little overwhelmed at the new information. Learning about UX made me more aware of the importance of pain points and the needs of users. Initially, I had the misconception that the quality of the actual product was the most crucial factor in the success of a business. Yet I learned the importance of understanding the customers’ needs at the start of a product development journey. The Design Double Diamond Framework guided me in how to go about the process of UX and I was surprised at the diverse ways to aid user research. Having enjoyed the breakout room discussion where we shared what we learnt, I was pleasantly surprised at how worthwhile it was to be learning with and from other students too.

Demonstration of some features of the app prototype I made

User Interface

User Interface (UI) was a fun chapter for me as I enjoyed doing the exercises in card sorting and tree jacking. I learned what goes into designing a user interface, and that UI doesn’t just refer to aesthetics but also creating a memorable and meaningful experience for the user. Learning to use Figma was a bumpy road for me as I took quite a long time to get used to its functions and quirks. However, I definitely got better the longer I spent on it to complete my final product.

Web development

It was interesting to find out about all the different no-code websites I could turn to if I ever needed to create one in the future. It was also eye-opening to learn that no-code websites aren’t really a direct substitute for all of a business’ needs, since they can’t encompass all UI features. Knowing just what to look for in a landing page also made me more aware of how effective websites were in catching the user’s interest. I especially enjoyed learning about website hierarchy, and that even minute details can go a long way in captivating a target audience.

Marketing

I remember I had some reservations about the final chapter of the course. However, despite the denseness of the chapter, I was surprised to learn about the many components that a business has to take into account to improve the visibility of its brand. I was most interested in the marketing funnel, as it made me realise how marketing was more complex than I thought. This chapter also allowed me to learn how Google Search worked, making me more aware of how my searches can obtain the best results, especially since I use Google Search so often in my daily life.

Finally, I created my own product and presented it at the final Zoom meeting of the week. To be honest, when I first heard of this deliverable, I was a bit hesitant since I wasn’t sure whether I could perform up to standard. However, with all the information I had gained in the earlier days, I definitely became more confident as the week went by. Here’s how I ended up with my prototype, Nightly.

The Final Deliverable

To start with, I had to decide on a topic or a product/service to work on and I wanted to choose a topic that was relatable to me. Always sleep deprived, I alighted on the topic of sleep as it was a problem I was trying to solve in my own life.

Referencing the Design Double Diamond Framework, I started with preparations for my user interview by jotting down some online research notes and brainstorming a few interview questions to figure out pain points that a potential user may have.

Some questions I thought of included:

  • What kind of sleep would you like to achieve on a daily basis?
  • Could you share any habits or behaviours that you have during/through the night that affects your sleep?
  • Please walk me through what you did on a day which you achieved restful sleep.

Through crafting open-ended prompts and adopting a neutral attitude during the interview, I got to know of users’ high regard for sleep routines and also the challenges faced while trying to follow them. This prompted me to do some more research on sleep routines and how they are highly beneficial to having better quality sleep.

Using Miro, I started User Journey Mapping to step into the user’s shoes and improve what my app was trying to solve:

My User Journey Map

From there, I created a User Flowchart to generate ideas on how the user would navigate my app, and break down each feature.

My initial User Flowchart (I definitely made changes to this along the way!)

After looking at other routines and sleep apps, I realized that there was not an app that integrated features of sleep tracking and routines, giving me an impetus to design an app that featured both. Excited to have found my niche, I quickly moved on to designing the user interface.

Since I was trying to create a sleep routine and tracker app, I wanted darker tones and a simple interface for easy use before bedtime. Keeping these notes in mind, I made use of apps like Pinterest to amass pictures and styles for my mood-board below.

My Pinterest mood-board

However, after spending quite some time on Figma to create my prototype, I hit a speed bump. Even though I had already decided on the colour tones and its contents, I was having trouble deciding how my interface should look. Stressed, I decided to take a break and scroll through my phone for some interface inspiration. A thought came to me: why not looking at the interfaces of other sleep tracking/routine apps?

I quickly penned down some designs from those existing apps and started to work on my own design. Taking inspiration from other apps also prompted me to add in more features such as a gamified sleep tracker, where users can compete with their friends to build taller towers by having more consistent sleep schedules. Just like the focus app Forest, it allows users to connect with their friends and subsequently encourage each other to improve their sleep routines and lead a healthier lifestyle. After spending hours on Figma and editing my designs, I added in the “prototype” feature so as to simulate an actual app. Finally, I had finished my design!

My Figma Prototype

At the end of the course

During the final Zoom meeting of the week, I had a lot of fun looking at the designs of other students, but definitely heaved a big sigh of relief once I had finished my presentation. Although I was not able to incorporate the Web Development and Marketing skills I learned, I am still glad that I have that information to help me in SME outreach in the future!

Overall, it was most exciting to work on my own product and trying out the different methodologies and skills I’d learned through the previous chapters. I really enjoyed this week and look forward to the experiences and challenges I will face with my group in the future. The mentors were really cool and it was honestly a great experience venturing into the digital world. I am really glad to have had this opportunity, and I will definitely put in my best effort in the deliverables to come.

Thank you CareerContact mentors!

CareerContact is an ed-tech platform designed to bridge the gap between school and work. We help students develop digital skills and connect them with SMEs in Southeast Asia. Feel free to reach out to us at CareerContact.cc or join us at CareerContact.app.

--

--