I wanted to share my latest UI design concept for the GSoC 2025 ideaList project, which focused on creating a responsive layout for mobile devices. This Figma design covers most of the essential elements that outline the overall user interface concept, even though I haven’t implemented the complete UI(Like which is repeated).
If you notice any important aspects missing or have suggestions for improvement, I’d greatly appreciate your feedback.
Here’s the Figma link for you to check out:
As I’m still new to Figma, I’m learning as I go and know there’s plenty of room for improvement. I’d really appreciate your honest feedback on the design, especially regarding layout, usability, and colour selection (I admit, colours are not my strongest area yet).
Thank you in advance for your time and valuable suggestions. I’m looking forward to refining this design with your input!
Thanks for your feedback. I noticed the similarity you mentioned to the AI2 project screen, and I’m aiming to balance familiar UI patterns with some fresh ideas. I realize this redesign is a significant undertaking, and I'd love to hear any specific suggestions you have on how to tackle some of the more challenging aspects. Could you elaborate on what parts you think might be too ambitious or offer any tips on simplifying the design?
In 12+ years of working with Appinventor, I have never tried, nor ever felt the need to try, to develop an app with Appinventor on a mobile device. This state of affairs will probably remain until I am no longer capable (of anything). I just cannot see the point of working with Appinventor on such a small screened device. I know there are many people who do, because their phone is the only device they have, so good on them, but for me, Appinventor demands a computer, a minimum 15" screen, mouse and keyboard. IMHO, that should be your target interface. You will no doubt have a counter-argument, and that is your prerogative.
Thank you for your feedback. I see your point about the challenges of small screens, and I agree a desktop setup is ideal for many. However, The project aims to support the growing number of users who rely on mobile devices, especially where desktops aren’t common. Since App Inventor is open-source, reaching mobile-only users aligns with its mission. My goal is a user-friendly design that meets their needs while addressing the limitations you’ve highlighted. Your insights are invaluable, and I’m eager to refine it to balance mobile and desktop needs. Thanks again
Many websites do not have an interface written specifically for mobile devices, but their main interfaces can adjust in size to mobile devices. I do not know how adding UI works, what about the designer's phone view and mock views? Will this also have to be rewritten specifically for mobile devices?
Thank you for your thoughtful feedback I completely agree with your Points.
However, when I explored the MIT App Inventor interface and tested it by shrinking it to a mobile size (using browser inspection tools), I noticed a challenge. The desktop view, with all its UI elements—like the drag-and-drop blocks editor, component tree, and properties panel—becomes very cramped and tiny on a smaller screen. For example, the blocks, which users need to drag and drop, become almost impossible to interact with using touch inputs. This led me to think that simply scaling down the desktop layout might not provide the best experience for mobile users, especially given App Inventor’s complexity and reliance on precise interactions.
That’s why, in my Figma design, I proposed a mobile-specific layout that reorganizes the UI to better suit smaller screens and touch-based navigation. I drew inspiration from apps like Gmail and Discord, which handle complex interfaces on mobile effectively. For instance, in Gmail, a hamburger menu opens a side panel where users can select different sections (like inbox or labels). Similarly, in Discord, a left panel lists servers, and tapping one reveals channels like "general" or "memes," with smooth navigation using back buttons or swipes. I envisioned a similar approach for App Inventor: a hamburger menu could open a side panel with options like "Blocks Editor" or "Component Tree," and selecting one would bring up a touch-friendly layout with larger, tappable elements and intuitive navigation (like a back button to return to the main menu).
I think the sheer number of UI components in App Inventor (blocks, palettes, editors, etc.) makes it tricky to just "adjust" everything into a small screen responsively. A responsive design might work for simpler sections, like the project list or settings, but for core features like the blocks editor, I worry it could compromise usability without a more tailored rethink. That said, I’d love to hear more about your approach! Could you elaborate on how you’d envision making the current interface responsive enough to handle all these components on mobile? Your experience could guide me toward a more balanced solution.
Thanks again for your input—it’s incredibly helpful as I learn more about UI design!
I have built several websites that do just as @Patryk_F is suggesting. If the screen is of a certain size, then the interface will automatically change to suit. This is usually done with media queries in the css. Whether the same can be applied to the AppInventor web app ?
For context, we have an increasing percentage of users who are, in fact, creating with App Inventor on their phones. In low wealth areas, a phone is sometimes the only device a user has access to.
According to our analytics just over 10% of users of ai2.appinventor.mit.edu used it from a mobile devices in the last 28 days. The justification for making a mobile-first focused version of the UI is to improve their experience. Also, in some schools students only get access to tablets (not included in that 10% figure) and we have a way to run both the web editor and companion app in parallel, but navigating the UI is naturally more challenging than on a laptop sized display with a mouse.
I did not see any stories linked to them, so I was guessing at context by their row and column placement.
The Builder aspect of AI2 is actually very similar to what you do in a tech tree/construction/exploration game like No Man's Sky (my current game), but with nowhere near the level of hand holding afforded by a good game.
(Don't buy the game, it will use up all your time and leave none for school, career, life. Just watch some Let's Play videos.)
App development is a series of goals and sub-goals, like
[+] ( ) pre-load my reference tables
[-] (X) set up TinyDB storage scheme for tables
[-] ( ) prepare manifest of files and targets
[-] ( ) set up record keeping for the load process
...
This basically a multi-level To Do list, tied to your code.
AI2 has no support for that.
AI2 is like one of those multi-tray tool boxes, with the foldouts showing all the tools, but the box sits to the side with no knowledge of your project.
In a small screen development environment, the sockets and empty spaces in your blocks and Designer Arrangements are opportunities for pop ups offering menues of things to fill those spaces. This is different from the always-present frames on the AI2 desktop environment.
Such an environment needs to keep context stacks, to keep track of where you are, whether in the fourth Vertical Arrangement of Screen yadayada or the middle of the second nested For Each block in the When Web1.GotText event of that screen.
Consider adding bookmarks to such places, because no one can sit and develop for hours at a stretch.
@ABG I understand that the absence of linked stories made it challenging to grasp the context, and your analogy of the AI2 builder to a tech tree really resonated with me.
I appreciate your suggestions about adding contextual pop-ups and bookmarks to improve navigation, especially on smaller screens. These insights will definitely help me refine my process.
Thank you so much for your detailed feedback and insights. I truly appreciate the time you took to review my Figma screenshots and share your thoughts; I will keep everything in mind as you advised. I know that my Figma design doesn't make much sense yet, but I plan to add more details after the proposal submission. The design was just to give an idea of how the UI might look, and I have included much more description in the proposal as well.
