<p>Published on <a href="https://blog.prototypr.io/how-we-used-user-centred-and-component-driven-approach-to-build-the-mvp-at-indiez-9dc7187ee42f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Nikhil Yadav <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cV_hj7W5sMJIi6gOnsFBWQ.png"></p>
<p>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 <a href="https://medium.com/@yadavnikhil012/inside-indiez-how-indiez-is-building-the-future-of-work-b4a995d2903d">here</a>). 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.</p>
<p><strong>Roles: </strong>User research, Product Design, Prototyping, Creating Stateless Pure Components using React JS.</p>
<p><strong>Timeline:</strong> 1 Month</p>
<p><strong>Tools Used:</strong> Sketch, <a href="https://www.invisionapp.com/craft">Craft</a>, Invision, Zeplin, VS Code, <a href="https://storybook.js.org/">Storybook</a>, Git</p>
<p><strong>Languages and Frameworks Used:</strong> React JS, Node, <a href="https://github.com/zeit/next.js/">Next.JS</a>, SASS, <a href="https://getbootstrap.com/">Bootstrap 4</a>, <a href="https://github.com/acdlite/recompose">Recompose</a>, <a href="https://lodash.com/">Lodash</a>, <a href="http://graphql.org/">GraphQl</a></p>
<p><strong>Fuel: </strong>Lots of Tea ☕</p>
<h3>Overview</h3>
<p>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.</p>
<h3>Problem Statement</h3>
<p>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.</p>
<h3>Design Approach</h3>
<p>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.</p>
<h4>How Lean UX process works</h4>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*0ktNJKPRb9q0kpIs.">Lean UX Process</p>
<h3>Empathise</h3>
<p>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.</p>
<blockquote><p><em>We </em><strong><em>skipped</em></strong><em> designing for Account Managers in this version.</em></p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*MFZRQKHR9Tstu2om.">User Personas</p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7onCE2PQiBFJFiL1.">Pyramid Team Structure diagram</p>
<h3>Identifying Pain Points</h3>
<p>To improve the experience of these user groups, I needed to understand the pain-points associated with the previous system.</p>
<ol>
<li>We were using<strong> Slack</strong> for our project related and non-project related discussions.</li>
<li>Once a new member joined the team, she had to fill an <strong>Airtable form</strong> to submit her payout details.</li>
<li>If she wanted to <strong>edit these details</strong>, she was asked to <strong>fill the form again</strong> that would overwrite her previous details.</li>
<li>All the new projects were posted on <strong>#newprojects</strong> channel on slack.</li>
<li>Interested members had to <strong>message the project poster</strong> to apply for the project.</li>
<li>Once the applicant was accepted for a project, a <strong>new private channel</strong> of the project was created where all the project related discussions took place.</li>
<li>Account Managers were using <strong>excel sheets</strong> to manage the payments.</li>
<li>Product Managers were using <strong>JIRA</strong> to manage the sprints and milestones.</li>
</ol>
<h3>Defining the problem statement</h3>
<p>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 <strong>managing projects</strong> instead of depending on slack which was a hack alternative. Moreover, we wanted to give a personalised space to every member where they could <strong>maintain their profile</strong> and <strong>apply to the new projects</strong>.</p>
<h3>Defining Task flows</h3>
<p>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.</p>
<h4>1. Creating New Projects and Jobs</h4>
<p>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-</p>
<ol>
<li>We wanted to create a project whose team was already created without posting on the Job Board.</li>
<li>We wanted to create new jobs inside an existing project.</li>
</ol>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*yJBl4vGAMfDhs4y5.">Flow for creating Projects and Jobs</p>
<h4>2. Applying for Jobs</h4>
<p>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).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/759/0*hL9dAp4p3OH9iN_-.">Flow for adding Members</p>
<h4>3. Sending and Tracking Payments</h4>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/571/0*SYyvOBUZnFLbBXJj.">Payment flow</p>
<h3>Information Architecture (IA)</h3>
<p>The above task flows helped me in laying down the IA effectively. The highlighted areas represented the major interactions.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*3W6M1GN6b5xJqnK8.">Information Architecture(for PMs/FOs)</p>
<h3>Ideating the Solution</h3>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*jle8yiBY3W4xxOvQ.">Rough Sketches</p>
<h4>Implementing Component Driven Design Approach</h4>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*PZKTTRLqCdSF_nH1."></p>
<p>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.</p>
<blockquote><p><em>Atomic design means creating a system of pieces that can come together to create elements and templates we can reuse over and over again.</em></p></blockquote>
<p>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.</p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*B3B7YrTQfXNntmSc.">Symbols designed for Cosmos</p>
<h3>Cosmos Design</h3>
<h4>1. Cards</h4>
<p>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 <em>they</em> would be interested in, and this empowered them to engage in the way they wanted.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*gCIYuVktf9Su6Dd2."><a href="https://dribbble.com/shots/4081202-Cards-Cosmos">View Shot on Dribbble</a></p>
<h4>2. Navigation</h4>
<p><strong>Top Navigation: </strong>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*JNbVgi6pAKpWEYfR."></p>
<p><strong>Side Navigation: </strong>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*SuP_0PIRG47eig_G.">Side Navigations</p>
<h4>3. Job Board</h4>
<p>Job Board is a place where community members can see new jobs and apply for them.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*MYWhm3WcLvpTrIx1."><a href="https://dribbble.com/shots/4074896-Cosmos-Job-Board">View Shot on Dribbble</a></p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*j9PWQYjcia5tuBdy."></p>
<h4>4. Projects</h4>
<p>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.</p>
<blockquote><p><em>We </em><strong><em>skipped</em></strong><em> Metrics and feedback loop for this version release.</em></p></blockquote>
<p>PMs can view and edit the payout details of the team members.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*QWSM8qy9UruqCQIK."></p>
<h4>5. Milestones</h4>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*nvPtZcWkcwDY_0Ib."></p>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*05Y1boquQ0FNNbCe."><a href="https://dribbble.com/shots/4098825-Milestone-Members-Screen">View Shot on Dribbble</a></p>
<h4>6. Profiles</h4>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*QdY5iBj99UCml649."><a href="https://dribbble.com/shots/4135081-Profile-and-Edit-Profile-Screens">View Shot on Dribbble</a></p>
<h4>7. Modals for creating forms</h4>
<p>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.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/800/0*wEcxr7wxz2FJMnnF."><a href="https://dribbble.com/shots/4144606-Modals">View Shot on Dribbble</a></p>
<h3>Development</h3>
<p>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.</p>
<p>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.</p>
<h3>Takeaways</h3>
<p>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.</p>
<p>I also discovered many useful tools for frontend development. I hope you will find them useful. Here’s the list:</p>
<ol>
<li><strong>VS Code- </strong>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.</li>
<li><strong>Storybook- </strong>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.</li>
<li><strong>Recompose- </strong>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.</li>
</ol>
<h3>And the learning Continues…</h3>
<p>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.</p>
<p>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.</p>
<p>I am currently looking for some freelance work opportunities. Feel free to contact me at <a href="mailto:yadavnikhil012@gmail.com">yadavnikhil012@gmail.com</a> 🔥🔥🔥</p>
<p>You can also follow me on <a href="http://dribbble.com/yadavnikhil012">Dribbble</a> for more design updates. 🏀</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9dc7187ee42f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/how-we-used-user-centred-and-component-driven-approach-to-build-the-mvp-at-indiez-9dc7187ee42f">How we used user centred and component driven approach to build the MVP at Indiez</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


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

Top Stories