An Amateur Designing a Beautiful App (Part 1: Design and Prototype)
The cause
My last app was a heck of fun to make. But I often got people saying stuff like “the color scheme wasn’t welcoming.”, “the interface was confusing.”
I like black and neon blue together. It looks very modern. But I hated having to go back and redo the color for everything. Then, I discovered Figma, an prototyping tool. With it, you don’t need to write a bunch of code to see how the app will look in a new color scheme, you can use Figma’s templates to quickly assemble a non-functioning app.
Then, as to the second complaint, I added a help button with PowerPoint-like pages of tutorials to each screen, explaining how to use the features in that screen. The app immediately came off as unintuitive. And it is-because I added features on the go and placed the buttons for them on the homescreen. Then, there was “user-research”. Huh? What is that? The app was mainly for me. But since I am the maker, every app’s function would seem intuitive even if it may be completely indecipherable for someone else.
For a long time I thought about going back to redo the whole app. But I never came around to execute the idea. But then one day…my professor came to ask me about partnering up with a student from anther college on a project aimed at helping blind kids at a summer camp.
…Helping blind kids at a summer camp.
The project was for a good cause, but more importantly it was an opportunity to relieve the ache on my conscience, to redeem the artsy part of myself from that sin of creating an app so bad to look at (OK, not the best thing to look at).
Understanding propective users’ needs
This summer camp aims to empower visually-impaired kids to do more. Kids play activities tweaked to be playable by them, like baseball with a beeping ball easy to locate and hit. Each athlete is assigned one coach (plus an assistant in some cases).
The coach uses an Excel sheet to document whether and how an athlete/camper learning a new skill, like standing at a certain base with or without someone else helping him or her. All these data are recorded in paper form.
One convience any app has over paper is data analysis, especially with lots of them, although I must say, data recorded on paper feels more secure and reliable, and the process of writing on paper feels natural to some people, whereas having to deal with apps doesn’t. My pediatrician’s office has a wall of all the patients’ data stored in folders alphabetically ordered. Her assistant never had any trouble finding my file quickly.
The other convience the app would bring is to allow parents to see how their kids are doing in real time and make comments.
Finally, one coach would love to see athletes data converted into a spreadsheet form.
Trying out existing apps
One mistake I made with my last app was not doing enough research on the current app market. That resulted in only 50 people downloading my app (I was still excited tho). This time, before making the app, I spent a few weeks, downloading and trying out all sorts of fitness apps.
First thing, I went on Google Play to check out some similar app to get “inspired”-yeah, no that is just another word for stealing. I first searched “workout apps”. Most of them teach you how to perform an exercise. Some has a CSV export function. Although the rep and set recording functions are good, it becomes apparent to me that I only wanted functions relating to workout recording. So I tried “workout recording app”. This time, I found some that have really bare-boned but intuitive work recording UIs.
Two things immediately stood out to me with the apps I have seen or tried: 1.Although a new type of exercises can be created, information you enter each time you do is mostly limited to time duration and distance in addition to reps and sets, and 2.You can be a “coach” and record workout in the name of your “students”. (However, I did get inspirations on creating beautiful, usable UIs for creating and recording workouts.)
Then, I searched “coach apps”. Most of the so-called “coach” apps only teach you how to perform exercises. But one lets a coach add students and announces workouts and even competitions for his students. Again, you can really create your custom workout, but at least there is something to learn about the basic construct of a coach-student UI.
After downloding 7 apps and trying them one by one, I got tired of seeing all much of the same. I did read the descriptions and check out the screenshots of some more apps. But I did’t see any cool feature worth downloading the app for.
Wireframe Sketch
Knowing the propective users’ needs and the current market landscape of available apps that are somewhat close to what I want, I sketch how an ideal app for the users would look.
(My wireframe)
More user feedback & a new prototype
I talked to the camp administrators to get a better hang of the coaches’ work dynamics at the camp. I showed them the wireframe sketch. It included all the features I wanted the app to have. They were pleased…amazed even at such an elaborate app design (thanks to the features I stole from the existing apps). But I told them I didn’t know how hard it would be implement those features.
The problem with hand drawn sketches is the difficulty to cramp all the words. Paper-like sketches have their own advantages. One big one is that you can easily put your idea down. The greatest ideas usually come from thoughts of the moment. If you can’t just grab a piece of paper and sketch it down, you are gonna forget it. But sometimes, your hand-writing isn’t so neat as to create something presentable or more importantly, something that gets across a visual idea of where the the features would be placed and function in the final app.
Some notable feedbacks and critiques I got for the sketch was were that a coach was only assigned to one camper at a time, so there was no need to have him/her see all three campers David, John and Alex and that there was no need to have the feature to create new exercises. I was initially thinking of using this opportunity to make a generic fitness app that any coach can use to create and record exercise, but now I started to re-think about this decision as the priority should be to put a beautiful, working app onto the app store.
…the priority should be to put a beautiful, working app onto the app store.
So I redid the design this time, using Figma, a tool I has never used. I don’t have Photoshop for free and Figma was free for student. So I picked it. It was super easy to pick up, a factor not unrelating to my nailing down the whole prototype in 4 days.
I started out the app design on a Tuesday and finished it on the Friday of that week. Honest to god, my main motivation was to impress the camp administrator with my dazzling design. So, right after I got the feedback from the camp administrator that Monday, I started out exploring and messing around in Figma. Slowly, I got a hang of it, and slowly good designs started to come.
One of my two favorite screens of this design is the daily activity summary:
First off, the battery sign with the slushing juice inside looks amazing as opposed to a simple battery with just level juice. The color scheme is consistent with the other screen and the grey background help bring out the index card interface with all the important info, whose importance is further accentuated by the drop shadows. But the most daring decision I made was to write the title of each card in Old English Towne, a typeface most strongly associated with New York Time newspapers. I caught the inspiration while sketching on my notebook and when prototyping decided to give it a try. Despite violating the only-use-one-font-type design rule I heard somewhere, the result was stunning. The stately Old English Towne typeface gave each card its own identity.
But the most daring decision I made was to write the title of each card in Old English Towne, a typeface most strongly associated with New York Time newspapers.
The other favorite screen of mine is the “power bank” screen:
This screen is in experiement. The purpose of this screen is to gave each coach a quick glance of how much more needs to be done under each category. My first thought was to make the batteries like the “Daily checklist” one. I thought using the same Old English Towne for “Daily checklist” would help users associate it with the “Daily checklist” card from the daily activity summary. But the typeface just looks weird on a battery, something so technological. So I tried the default Android Roboto typeface on the “Fielding the ball” and “Hitting” batteries. But the batteries lack personalities. So, I went on Google Fonts to try to look for something like the typeface used for typewriting. I wanted something digital-feeling. I stumbled upon Cute Font. It was quirky, full of personalities and fit for the occassion. I tried it on “Running bases”. It looked just right.
With the typeface tackled, something about this design, however, still smells amateurish and not through-through. By this point, I had the typeface as Cute Font, but the battery still looked squary and the percentage was still right below the title. I added the drop shadow to separate each battery to make it stand out from the dark background even more. I rounded the corner of each battery more. This made the corner’s curvature align exactly with the down arrow’s. Then, I moved the percentage to top right. I didn’t know I did it why but the result looked right at the moment. The look feels natural-Don’t you all look to the top right corner of your phone screens to see how much battery is left? As I was writing this paragraph, it dawned on me that by having the percentage at top right, the users can quickly scan thru each battery from top to bottom on the screen. The title is naturally positioned at the center of each battery, and nothing else, as not to take away from the purpose of the screen that it’s supposed to give a quick glance of the information.
Summary and more to come!
Let’s not forget what the purpose of this design this. Once you have a rough design that looks right you can go on coding and implementing much more decisively and single-mindedly than if you have to make design choices on the go.
Again, everything about this design is still experimental. More refinement to come. Things need to be aligned more properly, size needs to adjusted slightly. But those can be done during implementation.
My next step is to make add more screens to this design, taking into consideration the needs of the director to create student profiles in the a system and assign each of them a coach (which was just told to me as I was finishing this article).My plan is to have a working app by May 22 and test it to eliminate any major bugs to have it really for use when the camp starts on July 24.
More to come! Stay tuned. Peace.
