UI and UX ideas for Marvel
Regularly I reach out to the Marvel team with feedback regarding the product. I love to think about ideas that could make the product better or fix some problems I encounter and which I believe others face as well.
It’s amazing how the team listens to their users and to see the product evolve. You can visit the web app probably every two weeks and if you look closely you spot new tweaks or updates in the UI. It seems the product gets a lot of love and attention to detail. And I’d say it justifiably does.
As a Product designer at Doist (we make productivity apps like Todoist and more) we’re working and refining products that we build and use ourselves. For some it might be hard to work on only one topic, but for me it’s something I love to do. Being a user of the product is always an advantage when building it. I’ve been using Marvel basically since it started about three years ago when I found it on Product Hunt and I’ve become a fan of it.
In the following I want to present a few ideas for the Marvel product team that I’d love to see implemented at some time or considered in some way. I know that every product is a work in progress, so the following ideas should not be seen as criticism, but rather as inspiration. This is a view of a passionate and heavy user of the app.
What does Marvel do?
Marvel is a tool that let’s you create interactive prototypes. I mostly use it to mock up new designs of a particular feature or landing pages, share and discuss them with everyone from the team. It’s my tool of choice.
So, here are the ideas:
Project navigation and drop down
Problem: Status Quo: Navigating from the current project to another requires you to go back to the complete projects overview. I often want to switch projects many times a day rather than going back to the overview page. Creating a new project quickly is also an action I’d love to have more accessible.
Proposed solution: The project tab gets a dropdown, just like the account dropdown. It opens a view that shows options like…
… “All Projects” that goes back to the project overview page
… next to the “All projects you can find a new “+” plus button that brings you to the new project view
… See the currently selected project as first option in the list. Underneath is the list of recent projects so you can quickly jump to another one.
How it could look like:
Activity dropdown
(My gut says the team is already working on this.)
Problem: The current activity view opens a complete new view when clicking the notification bell. One advantage is that you get an overview of all the activtiy. The problem for me is: I just want to quickly glance at information and go back to my current project. You currently can do that with the back and forth buttons of your browser but for me it breaks my workflow. So, it definitely works, but it could be easier.
Proposed solution: A dropdown that gives you an overview with latest activity like comments or actions. Next to avatars you can find action icons for visual indicators alongside the text snippets that give context. Advantage: Quickly dismissable and easy to expand via the “See all activity” button at the bottom.
Hover information for existing projects
When browsing projects (and I have a lot of them 🙈) I’d love to have the ability to peak into them to see context. The idea here is to hover over the project name and get an info popup presented. This contains a preview of the first screens of the project, the platform and team information (if shared with a team). Hover isn’t that discoverable and mostly just secondary information, but I imagine that this small information snippet could be helpful.
Recent projects widget and Quick actions
The current 3D touch quick actions include “Create Project” and “Explore”. For power users I mostly want to check out my recent projects. With the introduction of iOS 10 widgets are getting more powerful. Marvel could take advantage of this and introduce a widget that displays the latest and recent projects, making them accessible even faster. Users can add the widget to their notification center. Additionally, I’d love to see the “Draw” option added to the quick actions making it possible to open Canvas to scribble on the go.
A new Canvas tab on mobile
I’m a big fan of the newly introduced “Canvas” feature. Canvas let’s you draw and design directly in the app. Super cool. I’ve been testing it on my iPhone and iPad Pro and it’s very nice already!
The workflow on mobile to use this feature is pretty buried right now. You need to create a new project or a new screen in an existing project before being able to draw in Canvas.
Current workflow to start a new drawing:
- Start a new project
- Name it
- Select platform
- Add a new drawing screen
or:
- Open a current project
- Add a new drawing screen
In the future I’d love to see a more prominent way to do so. Marvel could introduce a separate tab in the main mobile app just for drawing quick ideas. When I’m on the go or traveling, new ideas rush into my head and I want to bring them to life as fast as I can.
So the new workflow would be:
- Open the Canvas tab
- Add a new drawing screen and start scribbling ✍️
Later, the user can add these screens to a recent or new project to create a prototype.
Make sharing a prototype faster on mobile
The idea is to add a “Share” option when swiping a project to the right similarly to deleting one when swiping to the left. On iOS, it could look like this:
Other ideas:
- 📱 On mobile: Search projects
- 📱 On mobile: Be able to sort and search projects
- 📱 On mobile: Improve swiping options on projects to get the shareable link more quickly
- 🖥📱 Add an option to create custom labels to projects to easier sort and find them
- 🖥📱 Show platforms labels for each project
If you’re a user of Marvel, let me know what you think about these ideas. Feel free to write a comment or reach out on Twitter @alexmuench
Would love to hear your thoughts! 🙂
—
Follow our Todoist Design team
