App Design From Scratch – Intro and Wireframes

This week a friend of mine reached out to me asking if I had interest in designing an app for a company that he was working for.

He had spent this last month helping a law firm here in Portugal to develop a new Android app to help people dispute unfair driving tickets. However, even though they already had the flow more or less defined, they still had to find a designer to design the entire app – and that’s where I come in! It’s a pretty interesting idea and I would definitely use it if needed.

I’ll be writing about my process in “real time”, so let’s go!

Meeting the client and project introduction

So, after I said my friend I was interested in being a part of this project, I was introduced to the client. We shared a couple of emails where they gave me a high-level description of their ideas, and we ended up scheduling a Skype call the day after, to get into a bit more detail.

The day after, we had the call and I got to understand with a bit more clearly what they wanted to build and some of the challenges we would have to overcome.

They also shared with me a Sketch document where they had outlined their idea of what the app’s flow could be. It was actually pretty good already, but I wanted to make a few suggestions for a few things that could be improved.

Note: One thing I really want to get better at is at communicating. It’s extremely important to have clarity on what the client wants, on the goals, and on what problem we’re solving for a certain audience of people. From my small experience on dealing with client projects, I think it’s a major step for a successful project, both for them, for you, and for the end user. A fantastic resource that is helping me on this (and a lot more) is The Futur. Please check them out, I promise you won’t regret it.

Next step: sketches and wireframes

After the call, I had everything I needed to get started. The first thing I did was to study the flow they developed. Like I mentioned above, this was already quite good. But I wanted to improve it.

I first reached out to my notebook and quickly sketched the main steps of the flow, and then started to build wireframes on Sketch. I’m starting from scratch so that I can focus more on each and every step. Here’s what I have at the moment:

ByVasco - Basic wireframes for the app flow
ByVasco - Basic wireframes for the app flow
Basic wireframes for the app flow

Here’s how this will work: We want to allow a user to enter the date a photo of the ticket and then send it. This information will be received by the lawyers and they’s verification if it’s possible to dispute the ticket. If it’s possible, they’ll inform the user, and then proceed to open a process. Both the verification and the process will need to payed by the user.

Once a process is open, the user will be constantly updated on its status through the app.

And that’s basically it. At the moment I’m writing this I already sent and had feedback from the client on my ideas for the flow I built with the wireframes (they loved it, yey!). Today is Friday and I’m hoping that by Sunday I already tested this with a few people to see if they can go through the app with ease. If everything goes fine, I’ll start with the thinking about visuals and making things pretty!

Communication, and getting feedback

Let me just quickly explain how I’m doing this. To talk with the client, I created a Slack workspace where I added the client and the developer so that we can message each other easily. And to demonstrate them my ideas for the flow, instead of just sending them pictures of the Sketch artboards, I build a quick prototype, recorded my screen (and me, explaining the steps) using QuickTime, uploaded to YouTube as a non-listed video and sent them the link.

Well, and that’s it for now! See you soon on the next “episode”