Case study section UI Design

Today I started working on the UI designs for the case study section. I looked at Uxfolio's interface and liked their buttons with text and icons. I compared it to Figma's navbar and then checked out Penpot for more ideas.

On Penpot, I noticed a prototype icon and history icon on the right side. Figma had a share button too. At first, I thought about changing the share button to just an icon, but then I realized a button with text might be clearer for users. So, I decided to keep it as a text button.

In the middle part of the navbar, I saw that Figma's buttons change based on what the user is doing. Like, if they're editing content, there are buttons for that.

I then looked at the left section of Figma's navbar and saw how it was different from Uxfolio's. I also checked Penpot's left sidebar and found it similar to Figma's. I ended up mixing ideas from Uxfolio and Figma for my design.

On the right side, I kept history, prototype, notifications, reviews, and the share button.

Next, I tried making a user story map for my process. I got a bit confused about how to organize the activities and tasks. At first, I put "creating a navbar" as an activity and the different navbar sections as tasks. But then I realized there were tasks inside these sections too.

So, I changed it up. I made "creating a navbar" the main user goal. Then I added an activity section, a task card for "define functionality," and user story cards for different situations like "while the user is editing the design" and "while the user has not focused the cursor on design."

While doing this, I realized a few things needed to be added to the UI design. I found out that the user story map could have multiple activities, each with multiple tasks, and these would need to scroll horizontally.

But then I thought, if there are lots of stories, it might be hard for users to scroll through them all. We need a better solution for this, but for now, I'm sticking with the horizontal scroll for the activities section.

To wrap things up, I'm excited to keep working on this project and share my progress with you all. If you want to follow along on my journey creating this product, don't forget to subscribe to my Sarasvishva blog. I'd love to hear your thoughts!

Got an idea for a cool feature? I'm all ears! Just head over to https://featureflow.tech/ask/cm141gjgm0009yz8isc5g7ryt/forit and let me know what you're thinking. Your input helps make this product even better.

And if you're feeling generous and want to support this project, you can make a donation at https://www.feedfund.space/as/sarasvishva. Every bit helps, and I'm super grateful for your support.

Hey, want to be one of the first to try out this product when it's ready? Join our waitlist! Just fill out this quick form: https://tally.so/r/mZYaoA I'll make sure you're in the loop as soon as we're ready to launch.

Oh, and if you want to know more about me and my other projects, check out my Bento page at https://bento.me/shivam29feb It's got all the links to my work and socials in one place.

Thanks for reading, and stay tuned for more updates!