How can you translate a desktop user experience into a smart phone form factor.

Want to read less? Read the shortened version.

The Short Version

So here’s the scenario. You have a desktop notes application. It’s got it’s own set of unique features and quirks. How do you turn that into a mobile app.

Well there’s a few parts to that question. But the part that this is going to focus on is around form. The interactions a user has on a desktop vs the interactions on a phone.

Screenshot 2024-02-05 at 16.31.25.png

When working with mobile, your field of view of how a user interacts with your app narrows. You lose tools you can use within design, such as space, portrait is the new landscape, right click is (almost) gone, no more small buttons, tooltips.

And yet a lot of doors swing open.. Swipe interactions, keyboard configurations, side menus, nav menus.

Designing for mobile is a completely new game.

My goal for this iteration was simply to explore how a mobile app might look and feel. To start I picked a core area of Narafy, the space view.

The space view is where a user can select Stacks (tags) in combinations to see all notes that use those stacks. My first task was mapping the feature set that a mobile application would have to contain.

Screenshot 2024-02-05 at 21.28.05.png