Step 1. Concept
Everything starts with a real-world problem to solve. What problem does your app solve?
Academy aims to make life easier for students by being a one-stop place for them to organize and keep track of their upcoming assignments, exams, classes, and progress. Students can also work together on group assignments with their classmates and friends, so it’s basically an academic social network.
Do you have any design background?
My design background and skills are almost all completely self-taught. At university we had a couple of weeks of ‘User Interface Design’ in one of my courses, however this was more along the lines of ‘don’t use red text on a yellow or green background because it’s hard to read’, which my lecturer called “the Christmas tree effect”.
Step 2. Draft
The well-known 80/20 rule has many applications, one of which is that 20% of your app functionality will be utilized 80% of the time. So basically you can determine which 20% is going to be the most useful and popular and sketch down that basic layout. You can use paper
or painting programs, it doesn’t matter.
Don’t draw directly on your mobile screen – just saying.
Step 3. Mockup
What was the transition between sketched ideas and the real graphic interface?
In terms of my design and development process, I started off by using AppCooker (an iPad app). Using AppCooker, I mocked up the interfaces of each screen required for the app.
This is not a finished result, but the transition itself lets us recognize new problems and see potential improvements that were not obvious in sketches.
Max developed for iOS, but there are lots of prototyping software for every platform / operating system and finding them should not be a problem.
Step 4. Prototype
I actually designed the screens using Keynote (Apple’s PowerPoint alternative). I exported each of the screens to images and then used Flinto Lite to create an interactive prototype.
What were the biggest problems at this stage and how did you manage to get a professional look for your app?
The big barrier I faced was finding quality graphical assets, such as simple icons, which would be both consistent in style and nice looking. For most of the design of the app I tried to make as much use of the standard Apple iOS UI elements as possible, and so I read through their own Human User Interface Guidelines to understand which element to use in which scenario.
Nothing substites an experienced designer, but it’s safe to say that great design is born with restraint, not diversity.
I drew inspiration largely from Pinterest boards and interfaces I found around the internet. For each part of the app I tried to find an app which I felt ‘did it the best’, and then based my design on what they are doing.
The design of Academy’s boarding screen is based on the boarding design in Slack
iOS Human Interface Guidelines and Google Material Design
serve as a basis for your professional look. Add quality icons and images and you can get some great results. But never try to use as many different elements as possible, our goal is not to create an abomination.
Step 5. What’s Next?
Have you asked other people to test your app throughout the development process?
Yes, when it was still just an interactive prototype I had friends and family try out the app and tell me what worked and what didn’t. Also, just watching them use it and tap around the screen was helpful as I got to see what they tapped, what they don’t tap, and what did or didn’t make sense to them about the design.
It’s important to understand that the very first user feedback
is the most important one. It’s ineffective to ask same friend to test your app 10 times in a row.
So if you can test an app with, say, 10 people, start with 3 of them. Get the most critical issues, fix, and then involve next 3.
As for the finished app, it has launched and is on the store, so I have lots of friends and family who are studying using it as well as 850+ students around Australia and the world. They have given some feedback as well, which has been good.
There is a life after release. Fixes and constant feedback may push your design further, making your app more useful and popular. It’s all about whether you are listening.
Developing for Other Platforms
Google Material Design is an equivalent to iOS guidelines, but for Android, so the guideline approach to design will work as well. As for the Icons8 icons
, they are available in multiple styles, which lets you easily transfer the design to other platforms.
More about Academy:
As you can see, by following guidelines and finding quality graphic assets, it’s quite possible to come up with a decent design, even if you can’t hire a professional designer for some reason.
What other design-related problems do solo software developers experience? We would love to make them the topic of our next articles so share
your ideas in the comments!