The journey of my first web app

Over the past year, I have worked hard to complete an online course series called the Interaction Design Specialization. The Specialization is offered by the well known MOOC (Massive Open Online Course) provider called Coursera. For the capstone project at the end of the series, I needed to create a mobile web application from scratch, which started with identifying user needs, and then on to ideation, narrowing down a point of view, paper prototyping, storyboarding, wireframing, along with user testing and increasing fidelities of prototypes. My app relates to the topic of how people experience time (one of three categories we could choose from).

Storyboarding elucidated one of several clear user needs that could be solved by the app: People failing to accomplish tasks because they’re occupied by screens and don’t pay attention to the changing times of sunset over the weeks and months.

Missing the chance to mow the lawn (or accomplish any other outdoor task) by sundown is a common problem for me and many others in the fall months of the Northern Hemisphere as the days get shorter.

Next up was distilling an overall point of view pertinent to the app (“Exposure to artificial lighting at nighttime from our modern technological era doesn’t need to prevent a person from staying in sync with, and benefiting from, the rejuvenating natural cycles of day and night.”)

The beginning of fleshing out the app’s pages in paper prototype form then began. The app needed to be 5 or 6 pages, and I created Sharpie marker drawings of the interface for each of the pages. This is also where I started thinking about what other features or notifications should be included in the app, such as solar eclipse notifications, information about the health effects of light, high and low tide notifications, and other natural cyclical events such as full moons and moonrise that could be relevant to a person planning their outdoor time.

The next phase was building digital prototypes. First was a basic wireframe. Next came a fairly time-intensive interactive build using the Axure RP Pro 8 prototyping software. There was quite a learning curve in this phase of the course because my Axure skills were rusty since I hadn’t used it much at work yet, and when I did it was over two years ago. My workplace role had shifted to a different focus since then. Nonetheless, I soldiered through it and the functioning prototype got built, with all pages in place. This was the initial homepage with placeholder image icons:

As you can see by the time on this prototype screen shot, there were some very late nights dedicated to this!

One of the most interesting moments in the course was when we received actual recorded audio-video user feedback of real people using our prototypes on usertesting.com. Watching the videos of four users going through two different versions (A/B) of my app was not only very entertaining (downright hilarious, sometimes!), it also identifying some holes in the design and functionality that were clearly critical to resolve or improve. These are issues that I, as the developer, didn’t see as potential problems, due to being so familiar with and close to the project, and projecting my own user habits/propensities into the design.

A key insight from user testing is that all users were very strongly drawn to images before text. An example from the app homepage is users would first click on the sunrise icon in the top info bar, or the sun image above the Sun settings button, to try and set a sunrise notification, instead of clicking on the Sun settings button as their first choice. It would be critically important to activate those images as links. Throughout the app, images were always magnets when they were present. It’s very true that web app and Internet users in general often don’t take the time to read text, or at least to read it before looking at the pictures first. The user testing videos underscored that very clearly.

Thanks to those recordings, I was able to compile a great list of valuable feedback that led directly to my final refinements, culminating in a much more polished prototype that would better meet the needs of users:

Visual as well as several functional improvements were applied, many of which aren’t shown in this image of a single page. Note: The font for the app name Soluna looks better on a desktop client due to my mobile missing the font, which is another potential future enhancement!

Some imagery-related polish is still needed, such as making the backgrounds of the icons I grabbed off the Internet transparent, which would have been accomplished if the Soluna prototype went on to being built as a real product. However, the end product for the course was intended to be a working, user-tested, fully functional prototype, using prototyping software.

In the end, I’m confident that the prototype Soluna mobile web app would be very easy for people to use. It would also unquestionable meet the original storyboarded user need of helping someone accomplish their outdoor tasks before sundown.

A daily alarm in a clock does not adjust itself to the constantly shifting sunset time. Impending sunset notification is one of the key features of the app that enables users to stay in sync with nature’s constraints.

It was a challenging series of courses to juggle over the last year, because it all needed to be accomplished on top of working a full-time job and having a busy life and time-consuming responsibilities & hobbies outside of work.

Taking MOOCs on a variety of topics ranging from neuroscience, to nutrition to prevent disease, and most recently Interaction Design, has been an extremely valuable and addicting experience for me over the last three years. I‘m really looking forward to starting my next learning journey on Coursera: Fundamentals of Computer Programming, as well as more in the future, of course!