Design Hero — Mobile Experience
Site map
For my site maps, I tried two different versions with varying levels of complexity. The first one only has about 4 main screens with a few screens leading off of that. The second one has a lot more and I think that this map might make it difficult to navigate correctly. I want there to be a pretty seamless transition between pages, and have the user understand how to navigate back and forth from page to page.
I think right now the wireframe I did for the home page is not as complex as it should be. I was intending there to be a bit of an animation between the different pages and have the two halves of the circles move to opposite ends of the screen to show the menu options.
Prototyping Animation Practice in Figma
Menu Exploration
Originally I had the menu represented by a circle in the middle of the screen, but I soon realized that this might not work with the UI icons that already exist and may not be intuitive enough. I started playing around with some other ideas, and I want to continue to try to find a way to merge the hamburger menu with the circle motif if I can. I might end up using the kebab style of menu to see if that works better.
3 Sketches per page
Initial Prototyping
I have a few wireframes of how I’d like to play around with the interactions and the different modes of swiping. Something I talked to Andrew about is consistency within the interface. Right now each page is different from the other in terms of the types of swiping etc. This is something I really want to focus on as I move into the visual design of the mobile interface.
Andrew and I also talked about one of my interactions where I have a “spinning wheel” interface. For this, I have to make sure that I keep a bounding circle around all of the objects so that the wheel spins in a cohesive pattern.
Above is a quick video of the different interactions I’m trying to incorporate at the moment. I’m really enjoying playing around with this and seeing what I can do on Figma.
Final Site Map:
Walkthrough:
Reflection
Overall, I think that this project really opened my eyes to a different kind of design. I see a lot how systems thinking and taking different scalar ways of consideration are extremely important to UI design. This is something that is still extremely new to me, however, I would really enjoy doing more projects like this and seeing everything you can do with designing for interfaces!
