design a mobile app from scratch

During the past two months I designed a mobile app Chefy from scratch, the app helps people to discover food holidays and find interesting events for the holidays. As a trained developer, I really enjoy the challenge of putting on my designer’s hat and start an idea from zero to “ready for development”. This blog post describes my journey in designing this app. The link to the finalized prototype can be found here.

Brainstorm and research user need

I didn’t come up with the single idea of food holiday in the beginning. Rather, it’s a mixture of brainstorming and observation. I start to draft out the ideas I want to do, identify the audience of my ideas, and then interview potential users. During the brainstorming session, I kept an open mind about which ideas to pursue. I put more emphasis on observing user behavior and asking questions. My goal at this stage is to gather valuable information and insights during research.

Prototype, feedback, repeat

After insight gathering, I got down to business and started sketches. To understand the user flow, I started with drawing out user stories. I captured some key moments in an experience in which the user interacts with the app, and how the app makes the user think and feel. This visualization exercise helps me look at all information in a different lens, and I had a few new ideas on how to make the app better while making those user story sketches.

Next, I started drawing paper prototypes based on my understanding of user stories. Paper prototypes allow designers to quickly demonstrate the idea and raw functionality of the app. In addition, I came up with multiple versions of paper prototypes in order to receive a wide range of feedback. After the paper prototypes are done, I showed them to potential users, received more feedback on different versions, then iterate again.

The general flow of prototypes is from paper prototype to low fidelity, then to high fidelity. My key takeaway during this process is about fast iteration. Start producing design sketches of large volume, gather feedbacks from test users, then make changes again rapidly.

Below is an example of paper prototype:

Below is an example of low fidelity prototype:

Below is an example of high fidelity prototype:

User testing

Testing the effectiveness of the design is a big component of design, and this is something I want to get better at too. There are different flavors of user testing as well:

• Peer review. Fellow designers review design work. This process allowed me to capture heuristic flaws early on, so when I have time to do user testing, I save some time by correcting some obvious design mistakes.
• Onsite testing. Conduct user testing with a user at the physical location. This allowed me to observe users better and noticed some design flaws just by watching them interact with the app. However, it also introduced bias because users tend to be nice with the testers and less vocal about the flaws they see in the prototype.
• Remote testing. Conduct user testing with websites such as usertesting.com. This gave me access to a lot of targeted audience with various backgrounds. In addition, the service provides standard templates to ask questions. The reports come from the website is very informative, the feedback is a lot more constructive.

One thing I want to get better at is how to ask questions. I found myself give answers to users when I see them stuck on certain screens of the prototype. However, I should treat those moments as an opportunity to understand why they stuck and discover any improvements I can make on the UI.

Marshall Shen © 2017

Originally published at himarsh.org on October 11, 2017.