Mimic and Prototype a Mobile App
Design Challenge
Project Links
Figma Project:
https://www.figma.com/file/NnF19XvjUz2bMtFx2Ml5Zg/IterateUX-UI-Design-Challenge-20210823?node-id=2%3A5
Figma Prototype:
https://www.figma.com/proto/NnF19XvjUz2bMtFx2Ml5Zg/IterateUX-UI-Design-Challenge-20210823?page-id=2%3A5&node-id=115%3A1143&viewport=268%2C48%2C0.24&scaling=contain&starting-point-node-id=115%3A1143&show-proto-sidebar=1
Prototype Demo:
https://youtu.be/VTMpOobGKa4 (5:42)
Figma Build Demo:
https://youtu.be/wQwPFPdai0g (28:22)
https://www.figma.com/file/NnF19XvjUz2bMtFx2Ml5Zg/IterateUX-UI-Design-Challenge-20210823?node-id=2%3A5
Figma Prototype:
https://www.figma.com/proto/NnF19XvjUz2bMtFx2Ml5Zg/IterateUX-UI-Design-Challenge-20210823?page-id=2%3A5&node-id=115%3A1143&viewport=268%2C48%2C0.24&scaling=contain&starting-point-node-id=115%3A1143&show-proto-sidebar=1
Prototype Demo:
https://youtu.be/VTMpOobGKa4 (5:42)
Figma Build Demo:
https://youtu.be/wQwPFPdai0g (28:22)
Background
On Monday, August 23, 2021 the IterateUX community issued another weekly design challenge.
The guidelines set forth this time around were...
• Design specifications: iPhone 12 or older versions "iPhone 8,9,10,11"
• Design specifications: iPhone 12 or older versions "iPhone 8,9,10,11"
• Mimic the design that we provide, you may and can change the content of the design. So let your creative writing shine!
• You can work by yourself, with a friend, family, or even a pet on this project!
• Use any tool (Figma, Adobe XD, or Sketch). If you want an extra challenge try to use a tool that you may not have used before.
• You might have noticed that there is some content that is cut-off, fill the content to whatever you want it to be! Then explain when submitting the project why you choose to pick that content.
• Once you complete the project please provide:
· a small description
· a screenshot of the design
· a link to the design
· Optional: Share a video link on how you created the design
Challenge mode: Prototype your designs and video record them to share with the community!
• You can work by yourself, with a friend, family, or even a pet on this project!
• Use any tool (Figma, Adobe XD, or Sketch). If you want an extra challenge try to use a tool that you may not have used before.
• You might have noticed that there is some content that is cut-off, fill the content to whatever you want it to be! Then explain when submitting the project why you choose to pick that content.
• Once you complete the project please provide:
· a small description
· a screenshot of the design
· a link to the design
· Optional: Share a video link on how you created the design
Challenge mode: Prototype your designs and video record them to share with the community!
Reference image provided as the basis for the challenge.
Getting started
I debated using Adobe XD as I saw some immediate opportunities to make use of its Repeat Grid functionality to quickly populate text and images across a design, but instead chose to use Figma and explore its Community Plugins for one that would add similar functionality. I knew I wanted to create a some horizontal and vertical scrolling sections. I also wanted to create a couple screens to demonstrate a broader menu that the user might see before getting to the details around a specific menu item and how toggling options for the entree might be reflected visually.
In addition, I committed myself to...
• Making good use of reusable components.
• Making good use of reusable components.
• Setting those components up with different variants to represent different implementations and states.
• Taking advantage of Figma's auto-layout functionality so that components could shrink or grow depending on their content and leverage Figma's ability to generate Flex-friendly CSS.
• Making use of text and color styles to ensure consistency across the design.
Down to business
Since the challenge was to mimic and prototype the existing design, I skipped the entire first diamond in a double-diamond approach and jumped straight into developing. As I worked through the mock-up though, I discovered a few things that I believe would warrant a consultation with our imaginary users/personas and could lead to some additional ideations.
The challenge mentioned that the device specification was for an iPhone 12 or older model. However, at the time Figma doesn't have presets for the iPhone 12 in its choice of frame sizes or in its prototype device settings, which enable a visual reference to the phone's layout and a "touch" cursor in the prototype (versus a mouse cursor).
I still wanted to challenge myself with the iPhone 12 though, so I set off to determine the dimensions I'd need. I found the answers I was looking for on the Apple Developer's site for Human Interface Guidelines. I used the Layout Grid feature in Figma to create a Layout Grid style with a one column layout with 16px margins on the left and right sides of the artboard and an 80px high row pinned to the top of the artboard to help align where my top nav/header would go and where I should avoid placing other elements.
I still wanted to challenge myself with the iPhone 12 though, so I set off to determine the dimensions I'd need. I found the answers I was looking for on the Apple Developer's site for Human Interface Guidelines. I used the Layout Grid feature in Figma to create a Layout Grid style with a one column layout with 16px margins on the left and right sides of the artboard and an 80px high row pinned to the top of the artboard to help align where my top nav/header would go and where I should avoid placing other elements.
Using the eyedropper tool, I was able to snag the hex color values from the reference image and create color styles that would be used to ensure consistency in the project. Using color styles also makes it easy to adjust the hex values if specific values are provided later and they differ from what I might have assumed from an sample of a pixelated reference image. Rather than finding every place where I may have used a slightly off value and update each instance, it's much easier to update the one style and have it reflect across all the artboards.
I used the WhatTheFont site to scan the reference image for close font matches and decided on Gilroy-Bold as the closest match that I had access to. By typing over a copy of the reference image in Figma I was able to quickly create some text styles with the appropriate font, weight, character spacing, and line spacing.
Using the Chick-fil-A website and Android mobile app, I was able to get copies of many of the images used throughout the design. As I don't have access to Photoshop at the moment, I used paint.net to remove backgrounds and shadows from the images, crop them to suit my design, and resize them to something manageable and consistent. I was able to pull an SVG copy of the company logo from Wikipedia. Unlike a raster image, I could bring the vector file directly into Figma and resize freely without worrying about losing fidelity and could easily recolor to match the reference design.
With my Layout Grid, Text and Color Styles defined, and image assets gathered and cleaned up, I was ready to start creating the project in Figma's Design View.
Components
Looking at the reference image, I could see a few places where I knew components would come into play. There was a top navigation that I'd want to repeat on all of the artboards as well as some cards that were repeated on the reference image. I wanted to make those cards easy to customize, so I built a few variants of them (e.g. with or without pricing and available vs. unavailable) and used smaller components (topping images, status indicators, and buttons) inside of them.
Looking at the reference image, I could see a few places where I knew components would come into play. There was a top navigation that I'd want to repeat on all of the artboards as well as some cards that were repeated on the reference image. I wanted to make those cards easy to customize, so I built a few variants of them (e.g. with or without pricing and available vs. unavailable) and used smaller components (topping images, status indicators, and buttons) inside of them.
Components and variants created as part of the exercise. Fonts and Color styles are also visible.
In these components, I also used Figma's Auto-Layout feature to ensure that text wouldn't escape the boundaries or could keep neighboring items the same distance away if it were to shrink or expand.
Overall, I believe that I made good use of the components though I could have utilized them even more for some of the sections that are re-used on multiple artboards like the horizontal "Cheese Option" scroll and "blocks" like the "Included Toppings", "Extra Toppings", "Make It A Meal / Combos" and menu categories that have common styling and are repeated across multiple frames or even on the same screen.
Overall, I believe that I made good use of the components though I could have utilized them even more for some of the sections that are re-used on multiple artboards like the horizontal "Cheese Option" scroll and "blocks" like the "Included Toppings", "Extra Toppings", "Make It A Meal / Combos" and menu categories that have common styling and are repeated across multiple frames or even on the same screen.
As part of this project, I got an opportunity to try a feature that's currently in beta for Figma, but I think will really help with a common gripe regarding prototyping. Interactive components are really useful for when you want to show a button's hover state when the prototype user hovers or to update a checkbox/radio/toggle state when it's clicked. Instead of needing to awkwardly open/swap/and close overlays, this beta feature allows you to add interactivity to a component through a new "Change to" option where a variant of the component can be used on your choice of trigger. This is a very cool feature and I hope it sees a full release soon. In my design, I've used it on the little red status indicators on the topping cards (onClick) and when hovering the "choose option" buttons on the cheese choice cards.
Making use of Figma's Interactive Components Beta Feature.
Building the Screens
With the building blocks of the project in place, I began building up the layers and placing the components. For this project, I changed up my process a bit from previous attempts - instead of grouping objects (Ctrl+G), I wrapped them in frames (Ctrl+Alt+G). Coming from a front-end background, the concept that a frame is equivalent to a <div> element and a "group" is really nothing more than an easy way to drag things around the screen and keep them together made sense to me. I also made a lot of use of the Auto Layout feature by selecting most frames and hitting Shift+A. This made it really easy to copy/paste items and have their parent container expand without the need to manually resize anything. It takes a bit of getting used to, but ultimately it becomes pretty intuitive about how to space objects from each other, add padding to get their positioning just right and it really speeds up the process of building out your designs.
Frames and Auto Layout were extensively used in the creation.
Plug-Ins
I'd mentioned wanting to try to replicate some of the functionality of Adobe XDs Repeat Grid feature. Auto layout handles some of the same vertical/horizontal expansion as I noted above, but what I really wanted to get working was the ability to populate images and text across the design just by dragging images and text files onto the canvas. I was excited to find the Data from Local plugin which did pretty much all that I wanted it to. Please see the quick video below for how easy it is to populate text and images across a design with only a few clicks and dragging files from your local machine into the plugin.
This worked out well and I used it to populate the images and text (product names and prices) on the general menu as well as the sandwich names and prices in my "cheesy slider" component. I only got tripped up a few times when I dragged images directly onto the canvas/component like you would in Adobe XD instead of dragging them into the little plugin window. This was easily rectified with a quick Ctrl+Z, but often meant that I had to go though a re-select all of the elements I wanted to update again.
Prototyping
The reference image clearly had content that extended beyond the vertical bounds of the screen and this was alluded to in the project guidelines. I knew that I'd be adding some vertical scrolling to the design, but I saw an opportunity to play with some horizontal scrolling sections as well with the cheese options by putting some perhaps less-popular or unavailable options towards the end (right) of the section.
Frame with "Clip Content" disabled showing the extent of the vertically and horizontally scroll-able areas.
I then wired up the various screens which are link-able when clicking on the "cheese choice" cards, the back button in the upper left, and from any of the menu items on the general menu screen.
Summary
Overall, I thought this was a great exercise and I'm happy to have gotten some more experience with prototyping, some new plugins, and Figma's Interactive Components beta feature. I was able to complete the challenge and even the "bonus" items pretty easily. I enjoyed presenting for the videos (even though I was sick) to get some practice in explaining how to use Figma's features and the choices I made when putting together the designs.
There were a couple items that I felt could use some further attention and if this were a real project, I'd want to get some feedback from my users.
• The reference image doesn't show any "Call to Action" button in regards to ordering. This seemed like a major misstep as I don't believe the users would want to scroll through the full screens to add an item to their order. I questioned if there was a reason why it wasn't always available on the screen. This would definitely warrant some feedback from the users and likely would have been caught when dealing with lo-fidelity wireframes before getting to the point of high-fidelity mock-ups and prototyping. I added a basic button to the design, but this could be revisited and iterated upon.
• I questioned the "cart" imagery in the app as I've yet to see a cart in a fast-food restaurant before and this seems to violate the usability heuristic of matching systems to the real world. However, since this was a challenge to mimic the design, I begrudgingly left it as-is.
• When comparing the reference image to the actual Chick-fil-A mobile app, it's apparent that the designer made the nutritional information much more prominent. Without access to any sort of user research, I assumed that this was intentional with users wanting to make healthy choices and having that nutritional information readily available. If that's the case, I'd want to spend more time demonstrating how changing cheeses and toppings on a sandwich might drastically alter those numbers in a dynamic fashion.
• I was pretty happy with how my "change the cheese" screens came out in the prototype, but there's certainly room for improvement on the general menu and in demonstrating more parts of the app. For example, how would the order process look? How would delivery/pick-up options be handled? I included a general menu just to highlight that there would be other screens in the app, but only spent a minimal amount of time on the actual styling.
• With some more time, I'd like to revise a few components so they're more "mobile-friendly" for example, the status indicators on the toppings only change if you click on them (not the card that they're a part of) and the "Choose Option" buttons on the cheese choices only change when they're hovered over. These hitpoints are obviously too small for a mobile app and there isn't a "hover" state on mobile, so some more work is needed on these.
• With some more time, I'd like to revise a few components so they're more "mobile-friendly" for example, the status indicators on the toppings only change if you click on them (not the card that they're a part of) and the "Choose Option" buttons on the cheese choices only change when they're hovered over. These hitpoints are obviously too small for a mobile app and there isn't a "hover" state on mobile, so some more work is needed on these.
• Id love to incorporate some motion design into these prototypes to make it a bit more engaging. A few ideas that I had were to include some kind of animation with the "Add to Order" option for a fun "reward" and important feedback on the user's action. I think there's also an opportunity to transition from the general menu to the menu item detail screen in a more imaginative way.
Hopefully these items don't detract too much from the overall exercise, but instead highlight the importance of knowing what your users want and expect from the experience and show that there's always room to ideate and improve. After all, we did skip the whole first diamond in our double-diamond approach with this exercise ;)
Please feel free to leave feedback or let me know of any cool Figma plugins that you've found helpful in creating your UIs. Until next time, thanks for reading!
