How to kickstart a frontend project.

Note this is my own opinion, yours might differ. So no beefing 😉.

Yeah, it’s a new year, and a new beginning and some guys have been asking me questions, like how do you kick start frontend project or how do you know what to implement when a client says he wants to do this and that?. Its fun answering the questions, but its time to put all those convos into writing.

Understand what you are building

This might feel a bit generic, but it is the foundation on which other steps will relay on. Here I try to know what the project is about and understand its (business)model. This makes it easier to determine the type of design, layout, tools, and every other thing that would be needed to complete the project.

For example, A client contacts you and says he wants a business site. The first thing to inquire about is what he wants to achieve with the site and its purpose. It is to serve is where customers can get to know about his business or something more e-commerce that does he intends on selling goods .e.t.c.

Outline milestones and make an MVP

Having understood the project, the next thing to do is to map out or outline what is achievable and formulate an MVP.

A minimum viable product (MVP) is a version of a product with just enough features to satisfy early customers and provide feedback for future product development. Wikipedia

I can achieve this by knowing our actors/users.
For this business site, I have two users; the admin or business owner that will be uploading content or new items and the customers that interact with the website.

Next thing I outline what each user does;

For the admin
1. upload new items.
2. view records of ordered items and those that are out of stock.
3. view payment status.
4. probably add/update content on the site.

For the customer
1. view goods/ item
2. make payment for selected items they want to purchase
3. see things about the business
4. know the history of their purchases.

With this, I have outlined all that is to be down(milestones) and formulated an MVP.

Tip: ensure you correctly state out all the milestones and MVP to the client. Ensure he agrees to it, so as not to get into a never-ending project sprint. Plus, let them know you are not doing anything more than what you have outlined once he acknowledges the MVP and milestones.

Check out other similar product

Once I have a clear vision of what I am trying to build, I try to know what similar product looks like and how there go about their own business. Well, you might want to say, “what if the client what something unique,” yeah wanting to be unique isn’t bad but in all your uniqueness try to understand that if your users find your product too strange and there are other alternatives for them to switch tab to, they will.

When understudying similar sites, I try to look for common trends that might be words commonly used, layout out, flow, or what process is needed to perform an action. Examples are; in food vendor website where I have words like menu been used and not a catalog. In e-commerce sites where the focus is to show and make it easy to pick and pay for the product as opposed to showing info about the vendor, also when checking out similar sites or app icons that are common should be taken note of .e.t.c.

Taking this into consideration, I know what to keep the same, make unique and how to go about it.

Get inspiration and sketch

I know what I want to build, I know how to go about it, I know what is out there in the market and what’s left is making our product. At this stage, I try to look at designs online and make a wireframe mockup of what I what to build. I explore sites like Pinterest, Dribble, Behance .e.t.c., just to get inspired on what design to give the UI, and as I look at designs, I get a meta picture(imagination) of what I want to build and I sketch them down. It helps a lot to sketch your design out for referencing and all. Especially for people like me that like changing design a lot this kind of help 😅.

But yeah, I could save myself the stress of this and get a UI guy.

P.s. Ensure you show your client the UI mockup you made and try to make them understand the design and all. It wouldn’t be nice to get your design rejected after done coding 😖.

Pick your tools and start coding

Finally, after everything said and done, its time to pick out our tools and stacks needed to get the work done. After that, I code 👨‍💻. Yeah, I am to talk about picking tools right; that’s for another article, so stay tuned.

This is the part where I say, hope you had a delightful read, ensure you clap, and goodbye. 👋