Design without a designer [developer’s true story]

A developer without a designer is more common than a politician without honesty. Politicians are helpless. However, we can help developers. The hero of our story is Max, an independent developer who has managed to design, develop, and release his own app, Academy, all by himself. So let’s jump right into the design side of things.

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 them is that 20% of your app’s 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.

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.

Step 4. Prototype

I designed the screens using Keynote (Apple’s PowerPoint alternative). I exported each screen 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 consistent in style and nice looking. For most of the app’s design, I tried to make as much use of the standard Apple iOS UI elements as possible, so I read through their own Human User Interface Guidelines to understand which element to use in which scenario.

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.

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?

User Testing

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.

Release

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:
Website
Facebook
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 discuss them in our next article, so share your ideas in the comments!

About the Author
Andrew Burmistrov is a usability specialist at Icons8. He started his career as a phone support specialist, telling jokes while customers were rebooting their computers, then moved to usability testing and occasional writing.