Designing a new web app from scratch

Ever wondered how app design starts? In this video, I’ll show you my approach to web design, with my first sketches for a new project that I’m working on. A requirements sketch, and some first wonky wire frames.

At this stage, the less detailed that the sketches are, the better, the real focus is on patterns and relationships between the data.

The next step will be to move to Adobe Illustrator and use some Material Design templates.

Video Transcript

Hi I’m Shristi, if you have ever wondered how people design their apps, today I’m going to take you through that.
I’m working on a new app for an automotive mechanical company. We will be looking at rolling out this app across about three or four different companies so it’s going to be across a few different organizations, and just see how we go. If it works, if it works well, then we’ll look at making it available to potentially a few more.

In terms of – why did I pick this app to show you what I’m doing and how it’s all going to work? It’s because this is a fairly simple one, but there are some actual complexities around it that you’ll face in most apps that you may work on.

What I’ve got in front of me is a photo of my sketchbook. I use an A3 sized sketchbook and that’s where I start most of my design ideas and concepts. What this is, is what I call a requirements gathering sketch. It’s the very highest level it doesn’t have detail. It really just talks about the bare minimum truth related to the functionality or the types of business issues and problems that the app needs to focus on and to be able to support.

It basically talks about: a person buys a car, the car may need regular maintenance and it may need to be fixed if there’s an accident or breakdown of if it has issues of some sort. Periodically when there’s a need, the car may need a roadworthy certificate which is a certificate that’s necessary in Victoria when you want to sell your car, you need that when you want to transfer it, when you want to sell it to someone. If you want to re-register it, that’s when you’ve sold it without plates, or when you need a new registration.

Then finally, once all this information is recorded somewhere it usually ends up in a log book which end up in the glove box.
So the system that we’re looking at is two-fold. Firstly, it’s about making the processes within the automotive mechanical organisations more efficient and effective, so that they’re able to get through things quickly. They’re paper based at the moment, all of them are paper-based. There’s about half a dozen of them, they’re all family run businesses and they’re all paper-based at the moment.

This will be the first system they use, so we’ll need to keep it really, really simple. So that’s what we’ll do to start off with, that’s what I’ll be working on first. That’s a little background about what I’m doing.

Once I sketched this out, the next step, the next thing I did was have a look at sketching out some wireframes. You may look at the scribbles and go – that’s pretty rudimentary there’s nothing really cool about that – and there isn’t I totally agree. At this stage it’s about getting at some ideas down on paper. I am thinking through patterns, just concepts and ideas.

Now normally if I’m doing a very data heavy type of app, what I’d be looking at doing is looking at data flow diagrams and looking at more of the process flows, in terms of how the data moves around. In this case I skipped that, and I did that because I didn’t believe that there was that much in terms of heavy data. There are a lot of types of fields and things that need to be recorded, but the relationships between the data is fairly clear. You’ve got people, who have got cars and we’ve got the history of things that are done with those cars whilst they are at these mechanical workshops.

That’s the background and that’s where I’m going to leave this particular video. In the next one, and what I’m about to do next is to start to move this photo that I’ve taken of my A3 sketchbook and show you how I’ll turn that into an Adobe illustrator project, so tune in for that, and I’ll see you again soon!

Subscribe to the YouTube channel

Category: Web Apps

Let me know what you think