Our assignment this week for Designing Meaningful Interactions was to create wireframes for 4 screens from an in-flight food ordering app. I have been hearing a ton about Sketch 3 so I choose to use that for the job.
After hearing Katherine’s feedback on the directions we discussed in class, I decided to present the menu in it’s entirety to our users. I do agree that it’s important to get a sense for everything on the menu when you’re making your choices. Before I jumped into creating the wireframes, I first did a content audit very similar to the one we did in class.
Once I mapped out all the content based on the requirements that Katherine provided, I started putting together the wireframes. I decided to make wires for the main menu screen, the add item screen, the shopping cart screen and the payment options screen.
Let’s start with the main menu. I made the menu one page that’s divided up into sections and has anchored navigation and progression dots (users can easily navigate to a particular section by using the navigation). If the user chooses to scroll through each section, you will see the highlighted page in the main navigation and the progression dots adjust based on the section. Another UI element is the sticky sub-headers that are quite common in the mobile space and I thought they would work well here. The sub-header for each section is fixed in place as the user scrolls until the next sub-header bumps it out of the way. If the user clicks on an item, it will brings up the “Add Item” lightbox, which is coming up next. Lastly, the user can easily navigate to their shopping cart with the icon in the top right. The numerical badge on the shopping cart indicates how many items they’ve added to their cart.
Next up is the screen to add items to your shopping cart. I decided to go with a light-box given the large amount of options for each item and that it allows the user to quickly navigate back to the main menu. When doing responsive websites that will be viewed on mobile and tablet, I tend to stay away from light-boxes because it’s not the best experience on mobile; however, given this will only be used on a contained “custom” airplane tablet, I thought it was a nice choice.
For the shopping cart, I wanted to make things as simple as possible, all while giving the user the ability to easily edit and delete items, as well as navigate back to the main menu.
For my last screen, I did the payment options screen as this touched on one of the few emphasized requirements.