Companion Draft Lists
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/66659f9b411ab7fb10820030_Draft%20lists%20(2).png)
Process
I'd divide the process into such stages:
1. Work on the project started by researching similar solutions the other products and the competitors had.
2. The next stage was interviewing the users - around 10-15 interviews were conducted to understand the users' needs and pain points.
3. After analyzing the information received from the interviews, the main pain points and the goals were listed.
4. The user stories and the user flows were built to map out the product scenarios.
5. After that the low fidelity wireframes were built to discuss the initial ideas with the team and test with the users.
6. The next step was building a high fidelity prototype for the next round of user testing. More insight were gained after talking with the users and letting them interact with the product. The final designs were built and prepared for the development, new components were logged into the Design system.
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/66659a1dd3022c7a2a6f9926_user%20stories.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/66659a24831060af841d4f39_user%20flows.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/66659ac299214e84c3674085_wireframes.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/66659470914785fb3c634920_prototyping.png)
Result
You can see the final designs after testing with the users and iterating.
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/6665947f057f9fb9c5d9afaf_Draft%20lists%20full.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/666593ff914785fb3c62fe7b_comments.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/6665940393aef6de5af7391f_filtering.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/6665949ef3e640a666a633f5_Multiselect.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/666594158889af27be4be7b8_modals.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/6665945e91fd74bb4c8dd6f5_columns.png)
![](https://cdn.prod.website-files.com/641de337c22efa514ea93845/6665c5b9ce73b1a2348b87c1_components.png)