Published in · 10 min read · Feb 19, 2019
--
A comprehensive guide on creating a personalized Design process and applying it to your project.
You’ve been given a task to design a product in a startup and you’re the only designer there. What would you do? How would you approach the project without any set processes?
Sounds quite scary, right? I was sh*t scared. With only five days in my bag, I had to figure out a comprehensive way to tackle the situation.
The Design process was one of the most confusing things to me because I read about different processes and different terms by different practitioners and back then I couldn’t figure out how to really execute it and on top of that, the devs are sitting there waiting for my deliverables. It honestly freaked me out.
Two months later, I realized that I should share my process to the world. There are a lot of talented designers out there, facing a similar situation and I really hope this helps you all.
There isn’t a ‘one size fits all’ process. Period. With so many factors influencing the process such as duration, type of project, budget, deadlines etc., it’s difficult to come up with a steady plan.
So, before crafting ‘my process’, I went through whatever existing ones were there. Most of them were very elaborate and sounded like you need a design team to implement it. Working in a humble startup, with not a lot of time and resources gave me other ideas.
Stacking the existing processes side by side, I was able to notice a pattern. But, it was a very generic one. You could easily google up the word ‘design process’ and you would find it.
The next thing I did was I carefully picked out the most essential techniques required and put them under a broad bracket. After fine-tuning it a little, I came up with this:
Now I’ll take you through how I completed the project using my Design Process (I haven’t named it yet. Let me know if you come across an interesting name)
Brief: To design a Forum focused on career and education related topics. The Forum has to be engaging and allow for easy interaction.
Total project time: 1 week (until passing it over to the devs)
Interesting fact: I played the role of a researcher, strategist, and UI/UX Designer all by myself!
So, before I dive into what I did, it makes sense to give some background…
Navigus is a perpetual online mentor which helps you in making the right career moves. The original scope of the product was to ensure that our users get the right information because often it’s not the collective wisdom of the forum that matters. In fact, a large amount of that knowledge tends to be speculation and often has outdated and incorrect information.
Process is a series of actions or steps taken in order to achieve a particular end. If this doesn’t help, here is what Mr. Ben Burns from the Futur says about process:
“Process is Design. Design is Process. You are NOT selling your Design. What you sell is the the Process”
The majority of them believe that Design is the end product. That tasty, nicely presented, aromatic food you’ve made. No. Nobody cares about it. What they want to know is how it’s made. What are the ingredients? How did you cook it? How much time did it take?
Right. Now, we’ve got the brief and the deadline and we also understand that Processes are really really important. We’ve crafted one for ourselves so, let’s do it!
Note: The phases are in bold and are bigger than the subtasks.
Analyzing the competitors
I studied several competitors to understand how they position themselves in the marketplace and there was only one such platform called PaGalGuy which has an approximate user count of 400K. The rest are all career specific. For example, there is CAClubIndia for Chartered Accounts, Wallstreetoasis for Investment Banking and Finance, MBA Crystal Ball for management etc. Well, of course, Quora is the king here, but finding the answer to the query is a formidable task.
I then proceeded to take a closer look at these websites to study their interfaces and structure. This would help me understand how a typical user interacts with their website to gain information.
By breaking them down I was able to understand positioning, audiences, differences, strengths and weaknesses. Based on these findings, I got a definite direction to proceed.
Stakeholder interview
It was a very informal conversation with my CEO and Manager. I asked them various questions on short and long term goals, vision, mission etc. The goal is to get as much information from them as possible so that I don’t lose my way in between. Some major topics we dwelled upon were:
- What are the brand values?
- What sets your company apart?
- What are the challenges lying ahead?
- What does success look like?
The golden rule here is to not talk about features, content, search engine optimizations, functionality or anything else that deals with a solution.
Analytics Review
I took help from a colleague who works as an SEO Analyst. He provided me with web and mobile usage data and key reports such as frequently visited pages, visitor demographics, bounce rates and more.
User interview
User interviews are a key activity for understanding the pain points, mindset, tasks, and motivations of the user group. This was merely an informal meet with friends who agreed to participate. I also used the ‘5 whys’ technique. The primary goal of the technique is to determine the root cause of a problem by repeating the question “Why?”
Some of the questions I asked were:
- How do you currently go about this problem/ task?
- How much time do you spend on this problem/ task?
- What other products have you tried out?
- What do you like/ dislike about the other product?
- Why would someone use this product?
“Talk about the problem. Not the idea”
Based on the conversations, I defined a target audience. According to me, this is the most important part because the wrong target will definitely lead to failure.
Personas
Post distillation, I designed two personas who share a similar motivation but with different gender, background and expectations.
What they say-
“Many so called ‘experts’ who answer these open queries may be in the same boat as those asking them.”
“Credibility and authenticity also seem to be a grave problem because of a few vociferous members”
People get so focused on creating their designs that they forget it is for another person. Addressing the user’s pain points is a very important part of this process. Hence, I made a very conscious effort to clearly identify their goals and needs.
Product Design goals
While going through the research and analysis phase, the following goals were set based on my findings.
GOAL 1: Provide users with correct and updated information with every career and education related query available
A well-designed process must be established to ensure that the information posted is accurate and is helpful to our users. Self-promotion or anything which violates our usage policy will have its severance. The UI has to be super clean and modern. It should smoothly help the user reach their goal.
GOAL 2: Create a strong foothold in the field of career navigation and guidance
Reach out to a lot of renowned personalities to write their views/suggestions and tips to popular queries. Generate organic traffic to help them use our other platforms such as Auriga and Orion (they’re our other products).
User Flow
User flow is a part where I visualize my interfaces. I start by writing down the starting position and the user goal and map them out to see how the flow goes. I also made some rough mental models, so that the entire flow wouldn’t seem new to a user. Below is the user flow for the Forum.
I also include User stories to help me and the team understand the flow better. They help in defining what has to be built in the project based on priorities. This is where the devs and engineers play a pivotal role. They’ll help you prioritize by breaking them down into tasks and estimate them using a Fibonacci scale (We didn’t do any of that. Our deliverables were all asap.) This is how my user story looks like:
Wireframing
One of my favorite parts of the process. Wireframes help me visualize the skeleton form of the interface. With so many digital tools available, I still prefer doing it the old school way; sketching it out. It gives me this abstract sense of satisfaction and happiness. I sketch several versions of what I need with a sharpie ( I love sharpies) and discuss them with the stakeholders to finalize the best version. These are some of the sketches I made-
With time not on my side, I decided to do Paper prototyping. Paper prototyping is the process of creating rough, often hand-sketched drawings of a user interface, and using them in a usability test to gather feedback. Participants point to locations on the page that they would click, and screens are manually presented to the user based on the interactions they indicate. This works wonderfully well if you want to showcase your wireframe in a quick and interactive fashion.
Visual Design
This is where I bring life to a wireframe. I start by defining the grids, columns and gutter settings in my artboard and the software I use is Sketch. There were those days when I used to check out Sketch vs Figma vs Invision videos on Youtube, but I stopped doing that because my mentor kept saying-
“Use the tool your most comfortable with!”
Post setting, I start crafting the UI. Keeping in mind the interface requirements and adhering to the brand guidelines, I finished designing the product and this is what it looks like:
Also, don’t spend a lot of time in fretting over a pixel level padding. I’ve noticed designers spending a considerable amount of time hitting the up and down arrow multiple times, figuring out the best position of an icon. Please, don’t do that, especially if you work for a startup.
Deliverables
Staying organized with your files is one of the most difficult parts of being a designer and especially if you’re working on a time-sensitive project, assets and files will be strewn all across your computer.
In spite of Zeplin making my job much more simpler, I prefer creating files in my work folder even before the initial phase. Folder naming conventions might change depending on the project but in context to this one, this is how I organize mine;
For the devs to access the assets, I slice all the objects in Sketch before uploading the file to Zeplin. This makes for an easy collaborative process. Imagine a dev running to you every single time for a missing asset. Not great, right?
In case you have mp4 files or micro interactions to share, you can always put them up on any cloud storage platform for them to access. Micro-interactions can range from simple button states to complex hover and reveal effects. In this project, I used Principle to animate simple hover effects of links, buttons, and text.
The best part about designing interfaces is that we get access to feedback. We can study how users interact with our design and using this data we can improve the efficiency of the product. Post production, we requested a few people to use our product. Despite going through all this, the user might find a different way or use a different process to reach their goal. But, that’s how it works. You get educated and go through the iterations again. Luckily, everything went fine and the product will be live in a few weeks.
After reading this, some might feel that it’s a waterfall method which I’ve used. Nope. It is Agile.
I did overlap and iterated going back and forth with feedback from users and stakeholders. All I did was finish work in one phase and moved on to the next.
So, this is how I used my custom process to design the product and it’s worked great like a well-oiled machine. Feel free to reach out to me at megirish.j@gmail.com, if you have any queries. If you also have any suggestions regarding any phase, I would love to hear from you.
One last tip, if you feel you’re running out of ideas, distract yourself by taking a walk or watching a movie and DO NOT think about the project. Thirty minutes or an hour later, when you take a look at your design, you’ll get better ideas.
What’s your Design process?
If you love this process, do clap and share it with your friends. Thank you and cheers!
You can check out all the screens and my portfolio here!
