Become The Middle Man between The “Idea” and “Tech” Person
The boss from my first job contacted and asked me to meet him in Yogyakarta, earlier this year. The city where I lived now. It’s been a few years since my departure from Bandung, the city where I spent 5 years to study in college and got my first job from him. Until now, I still keep good contact with him.
And the meeting happened. After some personal conversation about our current life, he slowly talked about his main point of why he asked me to meet him.
The Prior Difficulties
Currently, he builds a new startup that focuses on developing a learning management system (LMS) website. This LMS hopefully can solve the gap between the student in the remote area and the big city in terms of good business education accessibility in Indonesia. As we knew, there are so many islands in Indonesia that might be the biggest challenge to provide good education access all over the country.
Armed with his experience as a lecturer and building the previous startup, he tries to give another shot for building a new startup for giving a good business education access purpose.
Finished with his explanation of what his new startup is, he told me his main difficulties building this new one.
Just like the new startup, it started with a small team, especially on the Tech side. He already recruited one person as a Frontend Developer, and one person as a Backend Developer. The Backend Developer is a friend of mine when we working together with him (the boss) on my first job.
He started to explain that his main difficulties are the Tech team has struggled to convert his idea to become a good implementation on the website. Especially on the User Interface (UI) and User Experience (UX) side. A bad combination of color, not needed menu, not responsive website, is some point that I noticed from the first sight after he showed me the current website.
And then, I asked him, what kind of guidance he gave to the Tech team, to know why these difficulties must be faced by them. He showed me the powerpoint presentation that he used as the guidance for them.
The presentation consists of the functionality along with the base wireframe for each feature that will be developed on the website. He explained the presentation to the team, and give a request to make the UI and UX as good as possible.
Until that point, I already knew what the problem really is.
Misconception of Role
Mostly, the Tech team member, either Frontend or Backend Developer, they have strong skill on the implementation side. Using various technologies to develop a good website/application based on the project need. They can write thousands or millions line of code that will guarantee the website/application run smoothly. This is their main job description.
Building a good UI & UX for your product is another thing. As an owner of the product, if you’re lucky, you will get the Frontend Developer which not only masterize his main job to develop a product based on the design, he can also design the good UI & UX for the product. But if there is any, you will need to pay him really high.
Basically, the job to design a good UI & UX, and develop the product must be separated. The workload will be too much if it charged only to one person, in this case, Frontend Developer.
Mostly, Frontend Developer needs complete guidance, what will the product looks like at the end, the final design. So if we just give them a base wireframe and some request to make the design like that, the feature like this, they will have much interpretation on his mind what they will do after. And when they finished his work based on his interpretation, frequently the product owner or the client will debate the work.
So, the mistake can’t be blamed only to the Frontend Developer.
Things I Can Help Him With
After understanding my boss’s difficulties, I started to explain my current job. Previously, when I worked with him, I started my career as a Frontend Developer. Luckily, I have some good references for the design, so when I worked with him, we rarely to have a big debate on the design implementation of our website.
As time goes, I decided to give more focus on developing a good UI/UX for the product rather than develop it.
I showed him my latest work for redesigning my internal office website. I explained that the situation on that project is similar to his Tech team. One person as Frontend Developer, one person as Backend Developer. The difference in that project is, there is a UI/UX Designer role, which is me.
My responsibilities are to discuss what we can do together with the developer in the start of the project, design the product from the wireframe until the final design, give a good understanding of the design and feature that we will develop with developer, and always communicating with the developer if they have difficulties in the middle of development so we can find the solution together.
I showed him what my initial wireframe looks like, and what the final design looks like along with the interactive prototype that I made using Adobe XD. Not only that, to minimize the probability of not suitable looks between the design and the product, I use Zeplin as a handoff document for the developer which contains all the assets they need for the development, something like the color code, font family, font size, etc. I showed it to him.
After seeing my works on the project, he told me that this is what he really needs, having someone who can be the middle man between him as the product owner, and the Tech team.
He also told me that he has little understanding of the tech side, so frequently he doesn’t know if the development of each feature of the product will be difficult or not. And because he knew that I also have experience on the Tech side, officially he asked me to work with him again, as a part-time UI/UX Designer.
Because I feel interested in his idea on this startup to give good business education access, without any doubt I joined him again to work together.
And the journey begins.
In my early days after joining his startup, I started to collect all the information about what we will develop for the product, and also started to discuss with the Tech team about their difficulties so far.
The Work Process
After some hours, days, reviewing all of the presentations created by the boss, discussing with the developer, I started to work on my job.
The boss once told me earlier on this project, “For now, just try to fix up all of this interface mess. Use blue as theme color, and make the design as clean as possible”.
Early Stage
Based on that instruction, I started to recreate all of the website screen wireframes using Adobe XD. As time goes by, I completed all of the design detail, the color theme, font, and all of the standards that will be used on the design or can be called a Design System.
The research process on this project is not too complicated at this early stage. Mostly, I observe the Google Classroom, Udemy, and Udacity as they already started to build the LMS. And based on those observations I can get some ideas to solve the project needs on UI and UX. This kind of research selected because we need to launch the MVP as soon as we can. In the future, when we already have our own users, we will plan to do the research based on what our user needs.
Finished with the design for the MVP, I give the final touch to connect all of the screens that I have made to be an interactive prototype, still using Adobe XD.
Handover to Developer
Done with the screen design and interactive prototype, the next step is the handover to the developer. Thankfully, now we have tools like Zeplin which can generate all of the assets needed by the developer to build a website/application.
Something like color code, the roundness of the button, font size, which previously can make a debate between designer and developer, now it can be solved by exporting our design to the Zeplin. And yeah, we will get all the screen design along with the stylesheet code that can be implemented on your product.
To make it easier for finding a specific screen, and because there will be so many design screens, I made some categories based on the feature. If some design screens are related to the dashboard feature, I give a “Dashboard” tag on Zeplin for those screens.
I use Zeplin as the guidance for the developer. So, if they have any doubt about what exactly the size, the color, anything related to my design, I just asked them to check the Zeplin and search for the screen design that they mean.
Coordinate with Developer
Finished with screen design, interactive prototype, and handover process doesn’t mean my job finished. The most important part comes after those technical jobs passed. I need to delegate the task for the developer and discuss with them about the breakdown of the task if any task feels too big to be only for one task. Anytime the developer needs a discussion about anything they confused about the feature, the design, I will be there for them, as fast as I can.
1. Task Management
To delegate and manage any task assigned to the developer, we use Trello as our task management tool. The reason why we use it because as simple as all of us already familiar with it. So no need more time to learn the tools.
In Trello, we divide every step of our works into different columns.
We divide it into:
- Design Phase: contained with my task to design the feature and screen of the website. This phase consisted of “Design in Progress”, and “Reviewed Design” column
- Development Phase: contained with the developer task. This phase consisted of “Backlog”, “To-do”, “Sprint Backlog”, and “In Progress” column to track the developer task from the selected task that needs to be developed until they work on it
- Testing Phase: contained with the testing process of developed feature & screen. In this phase, I always collaborate with the developer to ensure that all of the tasks they have developed already matched the design and feature that we discussed. This phase consisted of “Testing”, “Ready to Deploy”, and “Done” column.
2. Communication Channel
We use Slack as our main communication channel. In Slack, the developer can chat with me personally or on the channel, anytime they want to discuss. Thank God, we live in the same country which means there is no time difference and we have the same work hours.
We have some channels on Slack to make good coordination between us. Maybe you can take inspiration from it for your project.
- #everyone : every member joined and can have any chat about works
- #design-dev : the channel for me and the developer team to coordinate
- #hasil-rapat : in English, it will be translated to #meeting-result, the channel for posting any meeting result
- #log : to display the log from any changes on our Trello workspace
- #zeplin-log : to display the log from any activities on our Zeplin workspace
If there is an urgent condition or discussion that can’t be done via text, sometimes we also have a Whatsapp Call or Google Hangout to share our laptop screen and make a more detail discussion about our works. It depends on our needs.
The Challenges
Days by days, months by months of working, the project finally has an MVP version.
I could say this project has its own challenges, because all of the team members, especially me is working from a different city. But, the one that needs to coordinate the team is me. So, it’s really challenging for me.
In fact, the other member who works on this project is a part-timer too.
The challenges mostly about our communication time. Sometimes it’s only me and one developer who can join the Google Hangout meeting. Sometimes we will have the full member. But it’s okay as long as the other member can follow the pace. And fortunately, they can.
During this project, I always try to allocate my time whenever the boss, the developer team, or all of them need me to have a discussion. As best as I can.
And it works so far in that way.
The Feedback and Result
I already got feedback from the boss once I finished the interactive prototype. And the first thing he said to me is “Oh my god! It looks really nice. Why I do not decide to ask your help earlier”. A very good start for me.
For now, my design already implemented by the developer to be a fully functional website, and currently, it’s still tested by the boss and his business team before we will launch it officially and move to the next development phase with the upcoming features.
I will give you a sneak peek of the project as the closing of this article 😄
Fariz Ikhsan — Author of www.masbobz.com
a blog about design, freelance, and self-improvement in Bahasa.
