This article is the second of a series of articles I’ve begun writing to document the entire building process for CoCo AI. In the previous article, I shared the six important questions I answered before I started building CoCo AI. In this article, I’ll be sharing the minimum design required to start building a new project.
This article is for software engineers primarily, by the end of this article and if you’ve been following from the first one, you should be able to take an idea, answer the important questions, establish user personas for the product, establish main user flows, sketch out a simple wireframe and be ready to build.
I’ll be using CoCo AI as a case study and I’ll be sharing how I established the minimum amount of design required to build CoCo AI.
Although I’m limited in design skills, I understand and appreciate the importance of design in a software engineering project. I took a fundamentals design course from Meta compulsorily on the professional android developer certificate track on coursera and it’s from this wealth of knowledge and other experiences that I, as a software engineer, building apps for mobile and web platforms created the minimum amount of design required to build a project.
Alright, let’s get to it.
The minimum amount of design required to build CoCo AI rests delicately on three pillars. You can think of them as the three points of a pyramid or a triangle. It answers three very important questions:
Who will use the app?
How will they use it?
What will the interface look like?
These questions are answered by:
The user persona
The user flow
The wireframe
We’ll start with the user persona. In order for me to start building CoCo AI effectively and assuredly, I need to clearly establish who will use the app after I’ve built it. To do that, I create a profile or two for likely users. The users at this point are fictional but establishing this user persona for a project will help me empathize and design the project with the eventual end user in mind.
Minimal User Persona for CoCo AI:
User Persona One:
Name: Grace Okoro
Age: 26
Gender: Female
Occupation: Social Media Manager
Bio: Grace is easy going and always positive. She loves shopping, travelling and trying out new restaurants when she’s not busy with work.
Frustrations: Always busy with work, barely has time for herself and friends.
User Persona Two:
Name: Matthew Emmanuel
Age: 20
Gender: Male
Occupation: Student & UI/UX Designer
Bio: Matthew believes in living fast, he’s the type to invest half his school fees on his favourite football team winning their next match. He’s favorite quote is quitters never win and winners never quit.
Frustrations: Looking to get more done in less time, looking for the easiest way to do things.
I’ve established two fictional users for CoCo AI. Now, moving forward with the design and building the eventual software, I know I’m building for Grace and Matthew not for myself. I’ll ensure I build a product that they’ll actually want to use, a product that will improve their lives and make it easier.
Naturally, while building a new project, you’d have some idea of your eventual end user but documenting the user persona this way solidifies that image and helps you empathize and really put yourself in your end user’s shoes. It’s easy as engineers to just focus on adding features and implementing technical things without having the end user in mind but establishing a clear user persona for your product early on goes a long way in helping you as the engineer build a product your users want.
What I have here is a minimal user persona but you can be as comprehensive as you want in establishing a user persona. Here’s a sample user persona for a different project.
Great! Now we’ve established our user persona we move on to the next pillar, the user flow.
We’re building for Grace and Matthew, let’s say our distribution is great and our app gets to Grace and Matthew we have to answer another critical question, how will they use the app?
We have to put ourselves in let’s say Grace’s shoes first, what is it she really wants, what are we offering our users. For Grace, I’m sure she’d like to be able to automate and schedule posts for various platforms, she’d want to be able to do it for weeks in advance as this will help her have more time for herself and friends. For Matthew, I’m sure he’d appreciate having content to post on all platforms to help him stay visible and position himself for potential gigs.
Already, we’re reaping the benefits of establishing clear user personas. Now we’ll establish the user flow which will help us understand even better how our users will use our app. The user flow which is also called user journey details steps from when the user downloads the app or opens the app to when the app solves the user’s problem and user satisfaction is achieved.
User Flow for CoCo AI:
Signup/Login → Create/Add Profile → Generate content calendar/post ideas based on profile for specific platforms → Edit/Reorganize/Manage content calendar/posts as required → Start post automation/review analytics
Very good. Now we have established a user flow for CoCo AI. Grace downloads it, she signs up, creates multiple profiles for the businesses she manages their social accounts, she generates a 3 week content calendar, she edits it to her taste and decides to create the posts for herself instead of relying on CoCo AI though the suggestions from CoCo AI help out a bit, she automates the postings and agrees to travel to South Africa for her friends pre-wedding shenanigans even though she previously said she’d only be able to attend the wedding. While in South Africa, she’s present with her friends and genuinely enjoys her time, a week into the trip, she opens up CoCo AI, inspects the postings, everything’s going good, she tweaks some posts for some platforms because she sees the analytics, takes her less than 2 hours to do all of this and she’s back having fun sampling South African local cuisines.
For Matthew, he’s been posting high quality content on x, instagram, tiktok, linkedin, youtube about his career progression and he’s been crushing it, less than a month into using CoCo AI he has an offer from an early stage startup in the US to join their design team.
With our user flow clearly defined and established. We know exactly how we’re going to provide value to our users using CoCo AI. I hope you can see how important it is to establish all of this before building. This will ensure we know exactly what to build and why and for who. Diving into building without doing all of this first is a mistake.
Here’s a more comprehensive user flow from a different project for reference.
We have our user personas, we know how our users will use our app and how we’ll provide them with value. That’s all great, now we move to the third and final pillar of the minimal design required to build CoCo AI. The wireframe. The wireframe is all about what our interface will look like, how many pages will it take to provide value to the user and what will be on those pages.
I’ll be building CoCo AI as a mobile app first so the wireframe will be for a mobile app. You can easily sketch a wireframe with a pen and paper or you can sketch it digitally, whichever works for you is fine. The wireframe is a sketch of what the finished app will look like without colors and without getting too detailed.
From my experience a mobile app usually starts with a splash screen, onboarding screens, authentications screens, profile setup screens then core feature screens. Most mobile apps go this way so you can just focus on sketching how to present your core features to your users in the best way possible.
For CoCo AI our core features are generating content calendar/post ideas and allowing the user to edit and manage the generated data to their taste. Automating posting and analytics are also very important but from an engineering perspective they’re more complex to implement so they can come in after we’ve established the initial features of generating and editing content calendar/post ideas.
The way I handle my wireframing is to first draw rectangles to represent all the needed screens then I ask myself what will the user see on this screen then what will the user be able to do on this screen. Using that framework I fill up the screens ensuring it all aligns with the user flow already established.
Here’s my incomplete wireframe for CoCo AI
And there you have it folks. This is the minimal design required to start building CoCo AI or any other project. Having done this you can confidently move into coding knowing exactly what you’re going to build, for whom and why.
If you’ve made it this far, thank you very much, it’s a joy to share my knowledge this way and I can only hope this helps at least one person build their next project better. By the next article, I’ll have completed building the first version of CoCo AI mobile app and I’ll share how I built it.
Thanks once again for reading and learning. If you have any questions or would like to know more about anything discussed here please feel free to drop a comment and I’ll reply asap or you can drop a mail at odohvictor47@gmail.com.
That’s all from me, bye.