I started by exploring high-level layouts and navigation. I wanted to get this right before I even looked at the detail views. You can see my earlier explorations in the following Figma file.

I originally designed the app as a single screen but as I added more sections, the main view no longer fit on even the largest iPhone screens which made discovery and exploration more difficult. That was a problem.

Switching to tabbed navigation helped, but then I had to re-evaluate the Settings button in the navigation bar. Settings usually aren't content and should be accessed infrequently, so it makes sense to tuck them away.

But Settings are content in Interactful. Seeing how components respond to dark mode, accent colors, and dynamic type sizes is a core feature. Users want to quickly see how different settings affect the interface. Moving Settings in the tab bar helps them do this.

Early Feedback

I sent a working prototype to a few trusted friends for feedback. This helped me refine many interactions. For example, I heard the Gestures screen wasn't very intuitive. Originally, each gesture had a small indicator to provide feedback to the user about the gesture's state but it was too subtle. So I combined the indicator with the touch target and made it much larger.

Of course, this introduced another problem: each gesture had a separate section and the larger indicator made it difficult to see all gestures at a glance. A list-style picker helped keep the interface clean while progressively disclosing the full range of options for improved discoverability.

Snippets

Most components have related documentation which opens in a modal sheet but sometimes users just want the code itself. Users can select between developer and design documentation so it felt natural to simply add a snippets section to that segmented control. This kept the interface simple and gave users a single place to view additional details. But it also made snippets harder to access and — even more importantly — there was no way to tell if a component had a snippet without opening the sheet.

I explored many other concepts and decided to have separate buttons for documentation and snippets. This made the interface a little more visually complex but it was worth the substantial increase in usability.

After many iterations, I released Interactful to the App Store. After a few weeks, I looked at the data to help inform my future design and product decisions.

I discovered that snippets were the most popular feature in the app and Layouts was the most popular section. This surprised me. I thought documentation would be more popular but snippets outperformed it 4:1. Knowing what resonated with users helped me focus my time on improving the most valuable features.

Iteration & Refinement

I was never totally happy with the Layouts section but I decided to prioritize improvements based on the usage data. My initial version had a static bottom section for controls like grid axis and column count. These controls required significant vertical space which took away from the content.

I replaced it with a bottom sheet that surfaces the most important options and can be expanded to show additional controls or collapsed to provide maximum real estate for previewing the content. I used Interact's own Animation feature to experiment with different parameters to get the animation between states just right.

I just had one more problem. The bottom sheet extended across the full-width of the screen which was fine on small screens but was less-than-functional on larger screens like iPad.

To take advantage of larger screens, I replaced the bottom sheet with a floating panel that defers to the content. This version only two states — the default state shows all the controls and the collapsed state exposes only the most important ones — there's no need for an intermediate state.

Putting It All Together

I felt great about the app and I'd received some excellent feedback. Now I just needed to ensure that people understand everything the app had to offer. Thankfully, I knew which feature were most compelling from the analytics so I crafted a video to highlight those.