Published on | Prototyping: From UX to Front End — Medium Nikhil Yadav

With over 20+ screens designed in just 15 days and 50+ components developed in another 15 days, we were able to complete the MVP at Indiez. In winters 2017, I had a chance to work on a product called Cosmos at Indiez (Read about my intern experience here). Here in this blog, I am going to talk about the project in detail and how we were able to accelerate the design and development process using lean process and component driven approach.

Roles: User research, Product Design, Prototyping, Creating Stateless Pure Components using React JS.

Timeline: 1 Month

Tools Used: Sketch, Craft, Invision, Zeplin, VS Code, Storybook, Git

Languages and Frameworks Used: React JS, Node, Next.JS, SASS, Bootstrap 4, Recompose, Lodash, GraphQl

Fuel: Lots of Tea ☕

Overview

Indiez is a community of freelancers working remotely to create kickass products that are loved by millions. Among this community, we have a small core team of 25 people working to ensure that every community member can fulfil their projects with a smile on their face.

Problem Statement

The task was to bring the entire community on a single platform (Cosmos) to improve the broken experience of community members starting right from the onboarding on the Indiez platform, applying for a new project, managing projects and milestones, to reducing the hassle of the top level management people.

Design Approach

I decided to follow IDEO’s Human-Centered Design and Lean UX Design thinking process to make sure that my design decisions were supported by user research.

How Lean UX process works

Lean UX begins with making leap-of-faith assumptions and building a minimum viable product (MVP) to rigorously test those assumptions. Lean process aims at reducing the waste to ensure optimum utilization of the resources. Since there could be a large number of use cases where the community members might find our product useful, we aimed to start with an MVP by releasing the most important features first. The goal was to increase the number of people using our product instead of building more features first. This helped reduce both design and development time and effort.

Lean UX Process

Empathise

Among the members of the Indiez Community, there are Product Managers, Engineering Managers, Fulfilment owners, Account managers, Designers, Developers, etc. Every member enjoys a different privilege in a team. Thus, it was necessary to have an empathetic understanding of each user group and their functions before designing the platform. I started by grouping the community members mainly into 4 categories according to their functions- Indie(Designer/Developer), Managers(Product Managers/Engineering Managers), Fulfilment Owners and Account Managers. Then I started learning about their functions and responsibilities.

We skipped designing for Account Managers in this version.

User Personas

I then arranged these categories in a pyramid team structure diagram to understand the hierarchy and how different access controls should be distributed inside a team. Fulfilment Owners enjoy all the rights of Indies and managers whereas Indies have the least access control.

Pyramid Team Structure diagram

Identifying Pain Points

To improve the experience of these user groups, I needed to understand the pain-points associated with the previous system.

We were using Slack for our project related and non-project related discussions.
Once a new member joined the team, she had to fill an Airtable form to submit her payout details.
If she wanted to edit these details, she was asked to fill the form again that would overwrite her previous details.
All the new projects were posted on #newprojects channel on slack.
Interested members had to message the project poster to apply for the project.
Once the applicant was accepted for a project, a new private channel of the project was created where all the project related discussions took place.
Account Managers were using excel sheets to manage the payments.
Product Managers were using JIRA to manage the sprints and milestones.

Defining the problem statement

The overall experience was distributed between different channels, sheets and forms. As the number of these channels and forms increased, It became more and more difficult to manage them. Thus, there was a need to unify this broken experience and have a better platform for managing projects instead of depending on slack which was a hack alternative. Moreover, we wanted to give a personalised space to every member where they could maintain their profile and apply to the new projects.

Defining Task flows

I started by defining the task flows to tackle these pain points. I covered majorly 3 task flows. The highlighted areas represented the major interactions.

1. Creating New Projects and Jobs

I was initially confused with the concept of Jobs and Projects. I perceived that every new project created would get posted as a new Job(to which members could apply) and then team would be formed but I had not considered the use cases where-

We wanted to create a project whose team was already created without posting on the Job Board.
We wanted to create new jobs inside an existing project.

Discussion with Amrose Birani (the CTO at Indiez) and Khaja (Sr. Frontend Developer at Indiez) helped me in clearing this confusion and defining the flow properly.

Flow for creating Projects and Jobs

2. Applying for Jobs

Here, I had to consider the flows for both the project poster(either PM or FO) and an Indie (who wished to apply for a job).

Flow for adding Members

3. Sending and Tracking Payments

PMs had the ability to initiate the payments. Once the payments were initiated, Fulfilment Owners(FOs) had to approve the transactions and finally Account Managers(AMs) completed the payments.

Payment flow

Information Architecture (IA)

The above task flows helped me in laying down the IA effectively. The highlighted areas represented the major interactions.

Information Architecture(for PMs/FOs)

Ideating the Solution

I started by creating sketches on paper keeping IA in mind. This time I tried creating the sketches as detailed as possible so as to reduce the time of creating low fidelity wireframes in SketchApp.

Rough Sketches

Implementing Component Driven Design Approach

Once the sketches were ready, I got them approved by every stakeholder in the team and, after necessary changes, I was ready to start creating High-fidelity wireframes in SketchApp. Khaja then introduced to me the concept of Component Driven Design or Atomic Design.

We divided our whole design into the sets of small repeating units called as Atoms which combined to form molecules which further combined to form organisms or templates, or pages. Now my job was to start designing these small atoms and then progressively move towards the organisms. This helped reduce the design time.

Atomic design means creating a system of pieces that can come together to create elements and templates we can reuse over and over again.

This was the first time I was using Sketch App (Thanks to my parents for purchasing me a new macbook pro). Sketch is a great tool for Atomic Design because of how easy it makes to make things modular. Not only do you have a great organization with layers, similar to Adobe Photoshop, you can also make modular elements. In Sketch, these elements are called Symbols.

Creating a Symbol allows you to change all of the styles on one element and watch those changes reflect to all the similar elements, across your file. Craft Plugin also helped me in creating the sets of repeating atoms with different data easily.

Symbols designed for Cosmos

Cosmos Design

1. Cards

Cosmos Design would be a composite of a number of cards. Placing content in cards made it easier for the users to digest the chunk of content. Cards provided a visually appealing way to present large information. Users could easily access the content that they would be interested in, and this empowered them to engage in the way they wanted.

View Shot on Dribbble

2. Navigation

Top Navigation: Catering to the different access controls of PMs/FOs and Indies, the top navigation was kept different for both the cases. The “Create” button (to create jobs, projects and milestones) was removed from the top navigation for Indies.

Side Navigation: Since there were deep levels of navigations and all the useful links could not be shown on a single navigation, I divided the Cosmos into 4 areas- Jobs, Projects, Milestones and Profile assuming that the user accessing one area would not try accessing the other areas. I then designed different navigation bars for each of these areas. I also added a label to the navigation to help the users know which area they were in.

Side Navigations

3. Job Board

Job Board is a place where community members can see new jobs and apply for them.

View Shot on Dribbble

Every PM has the ability to view the applications corresponding to a Job and the send an invite to the desired member to apply for the job.

4. Projects

Projects is the place where the community members can view the details of their projects and other project related information like Metrics, Alerts, Health, feedback, team members and jobs associated with the project.

We skipped Metrics and feedback loop for this version release.

PMs can view and edit the payout details of the team members.

5. Milestones

Milestones is the place where community members can view the details of the milestones associated with a project and other milestone related information like members and transactions associated with the milestone payments.

PMs have the ability to initiate the payments for Indies. Therefore, the “members” screen for the PM is kept different to the member screen for an Indie.

View Shot on Dribbble

6. Profiles

For this version release, we kept a simple profile screen showing the list of member’s projects. For later releases, we would be making it exhaustive by adding other useful information related to the members, like experience, projects outside Indiez, etc.

View Shot on Dribbble

7. Modals for creating forms

We wanted to make it easier for the clients and FOs to create the projects, milestones, and jobs. Therefore, I designed a simple form with lesser input fields in the form of a modal.

View Shot on Dribbble

Development

I was constantly pushing my designs to Zeplin for the frontend developers to start working immediately. We decided to use React JS (which also follows component driven approach) to build the atoms. This saved a lot of time as the design and development were running parallely.

The day I finished my designs, I joined the development team and started working to develop the atoms and molecules in React JS. Once all the pages were developed, Khaja began integrating them with the backend. After 15 days of rigorous development, we were able to finish the development of Cosmos.

Takeaways

This internship was a great learning experience for me. I worked on Sketch for the first time, learned a lot about front end development using React JS and learned that by creating modular, repeatable elements and patterns we can exponentially speed up our design and development process, not only in terms of how fast we build but also how quick we can make changes across the whole system.

I also discovered many useful tools for frontend development. I hope you will find them useful. Here’s the list:

VS Code- Visual Studio Code is a code editor redefined and optimised for building and debugging modern web and cloud applications. It comes with built-in Git commands, terminal and other powerful plugins that can make writing large chunks of code easier.
Storybook- Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. It a powerful tool that lets you create every component separately in an isolated environment.
Recompose- Recompose is a React utility belt for functional components and higher-order components. Think of it like lodash for React. It lets you create stateless pure components. It helps in separating your code’s logic from the components, creating reusable building blocks.

And the learning Continues…

At Indiez, we are now onboarding our community members to Cosmos. The next target would be to measure the performance of the product and run multiple testing and iteration loops to improve the product.

I too have came back to IIT Roorkee with loads of memories and new skills and I am again ready to board the train of new challenges and possibilities to come.

I am currently looking for some freelance work opportunities. Feel free to contact me at yadavnikhil012@gmail.com 🔥🔥🔥

You can also follow me on Dribbble for more design updates. 🏀

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

How we used user centred and component driven approach to build the MVP at Indiez was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

How we used user centred and component driven approach to build the MVP at Indiez

Cool stuff, every week

More Articles