Collaborative Rapid UI/UX Development: A Guide for Designers in Early Stage Startups
User Interface (UI) acts as a mediator that connects users with the product and decides how users perceive the content. The interface also greatly affects the user experience. The key to a good product is a clear and easy UI that places the User in the driving seat and lets him control all the process.
I was actively learning and implementing my skills in design for around three months when I landed upon my first design internship. Presently, I am a UI/UX Design intern at Calam — a company that integrates AI to help businesses and government agencies — for about two months now. The experience and the work was something very different than I initially had in mind.
The work requires me to design products for Government Agencies and also for Enterprises. Since both products target different sets of audiences, the approach and strategy required to design these products are different as well.
And not to forget, I was fairly new to design. Throughout these months, I reflected, learned, and applied various design practices which helped me think differently than I did as a rookie.
In this article, I will talk about what design tool I use, how it benefits me. I will also share some insight into my step-by-step work procedure.
Figma as a Design Tool
As I had a background in other design tools, It took me 2 days to switch over to Figma and learn all about the interface. Now, I generally make all my designs in Figma. It is easy, fast, and more efficient. Moreover, it works best as a design tool for the kind of work that I was required to do in this internship.
Pros
Platform Diversity
Apart from being a software, Figma is also a browser-based application. Your co-workers can join in and view your work, whether they use a Mac, Linux, or Windows. This also means no need to worry about updates. You can start designing in your browser itself!
Real-Time Collaboration
The reason why I switched over to Figma was that it allows a team to work together in real-time, transparently. You can also view what your teammate is working on, edit the design, leave comments, and markers on any part of the design.
Design, Prototype and Code — at one place
Figma is a state of the art design software, as it provides the CSS code of your design. This feature reduces the work drastically as the developer just has to select the design element and then can copy the code altogether from Figma.
Design and Editing Tools
Figma’s vector network has placed it ahead of all its competitors. The advance shape tools let you create a doughnut or a pie from a circle. It saves you all the effort to go to Illustrator to make small vectors.
Infinite Canvas
A ‘Frame’ is what ‘Artboard’ is in Adobe XD. When you open Figma, you are on Page 1. You can have N number of frames on a page and can add as many pages as you want. You can choose from a bunch of presets or can make a frame of your own. Figma also offers social media presets as well (Facebook cover, Instagram post, Linkedin Banner, etc) to choose from.
Plugins
Figma has the coolest plugins that will make your work easier and effective. Some of the favorites that I use regularly are — Material Design Icons, Unsplash, Content Reel, Mapsicle, Iconify, and Blobs.
Cons
Limited Edit Access
One big constraint to Real-Time collaboration in Figma is the limited edit access in the Starter Plan. Unless you spend your money and upgrade your plan, only 2 people are allowed to edit a file. However, viewing and commenting is allowed to everyone with the link to the Figma file.
Requires an Internet Connection
Figma does not have a dedicated ’Offline Mode’, however, there are still many functions that can be done without an internet connection if your file is already open and loaded. But your work cannot be saved without you being online as Figma works on Cloud.
Does not support Multiple Interaction
An essential feature that XD has and I miss on Figma is the Multiple Interaction while prototyping. Fortunately, my work does not require a lot of prototyping for now. But turning your designs in a prototype without the option of multiple interactions can be strenuous.
Approach to Design
Every design requires a different way of thinking, there is no general rule of processing the idea and executing it. After putting in my observations and analysis, I came up with a procedure that I follow for my effective performance while designing a product/dashboard. I’m still learning how to improve it so that I deliver the best result in the least time.
Interpret
It is important to understand the requirements of your product team. Listen carefully about your work in the team meetings and make sure you have the following points clarified before you proceed further:
- What is it?
- Who is it for?
- What does it do?
If you don’t have these points clear, ask questions till you have straight answers. It would be great if you get a vision as to how the product should look like — any specific design to follow, etc.
Ideate
Form an idea as to what you are asked to design for the team. Formulate the best User Interface that you should use. Your design should not be overwhelming as to hinder the content on the interface for the user but at the same time, it should be visually appealing.
I prefer doing Research and Ideation side by side, going back and forth multiple times. It gives me space to be more flexible with my design.
Research
After you know the basic context of your design, it’s time to get on the Internet and take some inspiration. You should know about what existing products are already available in the market and how they look like.
This research can include everything from reading articles, visiting the websites, or seeing templates. My goto place for getting some ideas is — Pinterest, Dribbble, Freepik.
Strategize
Now when you have your requirements fixed and have some ideas to implement, it is time for you to create a rough draft of your design which you will want to work on. Create wireframes (either on a paper or on Figma). Make sure that you have the product requirements in your mind while designing it. You can churn out the various design elements and see if it fits well for your product and is intended for the targeted audience.
Make use of your UX skills here — where to position navigation, how should you design CTAs.
Design
At this stage, you should start designing. Since you already have your wireframes ready, it won’t take much time to set everything on the canvas. Remember, at this stage, you have to be precise with your measurements, make sure to follow all the UI design principles, and be consistent throughout the design.
Feedback
After delivering your design, you’ll get the feedback from your product team. Change your design according to the suggestions. This step takes a lot of time, but you’ll learn the most during this process. Take all the comments sportingly and always be flexible with your design. You can also go back and do a bit of research at this point to make further improvements.
“You can’t use up creativity. The more you use, the more you have.”
— Maya Angelou
There is always a lot to learn and explore. This internship has provided me an opportunity to acquire and apply, helped me to improve my core areas in designing, and identify my shortcomings. I will be sharing soon some of the dashboards that I designed for Calam and how I came up with it. I hope you find it useful.
