Design Killer Apps for Mobile Shoppers | Beckii Adel | Skillshare

Design Killer Apps for Mobile Shoppers

Beckii Adel, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (19m)
    • 1. Introduction

      1:17
    • 2. Preparing for The Class

      0:39
    • 3. Exploring

      0:40
    • 4. Creating a Mood Board

      0:50
    • 5. App Design 101: Best Practices

      2:27
    • 6. Researching App UI/UX

      1:06
    • 7. Listing the Essentials

      1:27
    • 8. Sketching Rough Wireframes

      0:48
    • 9. Setting Up

      1:05
    • 10. Wireframe Iterations

      1:11
    • 11. Design Iterations

      0:43
    • 12. Wrapping It Up!

      0:35
    • 13. Designing my Everlane App

      5:54

About This Class

Beckii Adel, Designer at Dynamo the digital design agency in Montreal, gives you an in-depth look at her creative process when designing an app. The class objective is to design the key screens of an eCommerce app for the student's favourite fashion brand. Using the brand's existing styles and graphics, the students will be creating mood boards, doing plenty of UI & UX research, sketching rough wireframes, and iterating on their wireframes and designs until they come up with their final designs. 

Transcripts

1. Introduction: Hi, I'm Becky Adele. I'm a designer at Dynamo, a digital design agency in Montreal, Quebec. We design and build websites and APS for growing companies around the world, including glossy a shopper's pure herbal hue and Cry ends week just to name a few. I always tell my designer friends that if there's there's one thing that they need to create during their creative career, it has to be an app. It's like a whole new world when compared to printer Web, and I'm totally head over heels in love with it. So here's your chance to design an app of your own. My sculpture class is called Design Killer APS. For more while shoppers, we're gonna be designing the key screens Oven e Commerce App For your favorite fashion brand, we will focus on designing screens and functionality that make an e commerce app unique. The home screen category display on the product details screen. We will take an in depth look at the process of how to design an app from start to finish. As a student, you will be creating mood boards doing tons of research, mocking up four frames and iterating on your own designs With this experience and my tips and tricks, you'll be able to apply it to any future APS that you'll be designing, so let's get started. 2. Preparing for The Class: first of all, thank you for signing up my skill short class. I really hope you enjoy it. To prepare for this class, you'll simply need to download an application or two to create your designs in personally. I love Adobe Illustrator and will be using it for this class. I also know designers who prefer to use voter shop, which is totally cool, too. You can download a free 30 day trial of any of the adobe applications on their website. Other options are sketch Accenture and Balsamic, all of which are applications built to mock up and design naps. Links to those sites to learn more and Donald them are listed in the resources section of the project assignment. 3. Exploring: Now is the time to figure out what fashion brand you want to base your app on. Take a look in your closet. What fashion brands do love what e commerce websites do You constantly find yourself drawn to select your brand and let the exploring begin? I'll be creating my APP for Everly. They have high quality products that are beautifully designed, just as their website ISS. So the first step is to become familiar with your chosen fashion brands website. So go window shopping, go through the site and analyze the flow that you go through from the moment that you land on their home page to when you're about to click. Check out. But dont unless you're planning on shopping instead of doing this class. 4. Creating a Mood Board: go through your chosen fashion brands works I thoroughly analyzing their style. And I'm not just talking about the clothes. I'm talking about the graphics, the typography, the colors, the textures, the buttons, the photography that iconography, the everything, what fonts and type styles do they use for their titles? Subtitles. Body Tex and Links Do they use Saw Sarah fonts? Sarah Both. How and where do they are talus eyes or bold text? I want you to go through the fashion website and make screen captures off every piece and every style that they use with those screen captures. I want you to make a mood board by placing them all together on one page and illustrator photo shopper in design, save it as a J pic and posted up to the Project Gallery. 5. App Design 101: Best Practices: When it comes to designing APS, there's a whole new set of rules and guidelines that you usually don't have to deal with on other mediums. Thumb reach ability When you hold on to your phone, there are more accessible and less accessible areas on the screen. Of course, these zones change depending on the size of your phone. So when designing an app, it's always good to keep this in mind when figuring out where to place your buttons. Do you really want your user to reach the top of the screen? Repetitive Lee button size? Our fingers are bigger than the size of a mouse cursor, so Apple recommends that we make all our buttons or link herbal areas a minimum of 44 by 44 pixels in order for the user to easily be able to click with their fingers navigation, the top and bottom barbs of the APP are the safest and cleanest places to put navigational elements as it leaves room in the middle of the screen. For the actual content, However, many APS remove the bars completely and simply have floating buttons, which in some cases works really well. Ah, highly recommend that you take a couple minutes to read design explosions, mapping on IOS, where navigational elements of Google maps and Apple maps are compared. I've posted the link in the references section of the project Assignment. The Hamburger. The hamburger is an icon that represents a menu. It's an icon was usually three horizontal lines that, when clicked, pulls out a hidden navigation. This functionality comes in super handy on small screens that don't have enough room to display many buttons or icons in the top or bottom bars. Do not use the hamburger as you would a junk drawer. The place We just throw things in it to hide it. Please keep this space organized, and Jeffrey, only the most important links should go in this menu. Google Material Design This is a beast on its own, so are highly recommend that you look through their guidelines to get an in depth look into Google's analysis of their visual language. This is also linked in the references section of the project assignment. Essentially, it's about how digital designs mirror and react like mature objects when a user interacts with it. It also has a very purposeful foundation where everything about material design was extremely thought through to provide the user with a flawless visual experience. 6. Researching App UI/UX: research, research and research some more. Throughout this entire class, you'll be going back and forth between your work and doing research. I want you to go through Pinterest and the other websites that I listed in the references section of the project assignment. First, look for specific you I examples that could inspire you for your home screen of your app. Pay attention to the layouts and the content of the screens. Some maps may have on Leah navigation on their home screen, while others might directly have products. Analyze what possibilities there are for Europe. Also, keep an eye out for any UX examples you may like by us. I mean the interactivity. If you click on a photo or button, what happens also, how will you incorporate material design into your app? Save your favorite images into a folder on your desktop and then continue to do research for the category display and the product detail screens when you're all done, created research page for each screen and post them as J. Pays to the Project gallery so I could see your progress 7. Listing the Essentials: Let's face it, the Internet is a big and potentially scary place. There's lots of information everywhere. Our drop is a designer is to simplify and to create the best user experience possible while making our clients happy. In this case, we want users to convert to paying customers, so let's focus strictly on the e commerce. Let's start with the home screen, open up your fashion brands website and take notes on what needs to be included. In my case. Ever Lean needs a logo, shopping bag, navigation and category called Actions or C T. A s for category display. What needs to be included? Forever laid. I need to include the navigation shopping bag section titles, product images with their names, price and color. Depending on your site, you may even need a search or filter functionality. Every lane doesn't include one on their state, so I'm gonna stick with what they got for now. For product details, screen what needs to be included for everything we need. A main image with additional photos. Product name price with a breakdown, color options in the drop down menu. Sigh selection at a bag button and then details about the product themselves. But the style size and they feel about the factory 8. Sketching Rough Wireframes: remember when we did all that research for each of the key screens? Well, that's about to become super useful. Grab a pencil and paper, and I want you to start creating some war frames for your up with the list that you just made. I want you to go through each of the screen research examples that you found and see how other acts have included each of the essential elements. For example, how do other APS display the category? C. T is on the home screen? Where are they placed? Find the best solution for your chosen brand and roughly mock it up on paper to get an idea of size and placement for all the essential elements you listed. This is gonna help guide us for when we actually start designing. Post your wire frame walk ups to the Project gallery so I can see your progress. 9. Setting Up: now that we have some rough wire frames, organ iterating on them. Everything will be coming together at the stage, so make sure the have your mood board research examples and wire frames completed and close by. Throughout this lesson. Open up your software of choice and created new canvas that measures 750 by 1003 134 pixels for an iPhone. Six app. If you're not an Apple fan, don't worry. Feel free to design your app for on a mobile device of your choice, pauses video and take a moment to recreate your rough wire frame digitally. Next, open up your fashion brands website and let's figure out what sponsor using our highlighting a section of their text. Right clicking and select Inspect elements. If your brand uses more than one fun, make sure to do this for all the main style types ever Laden uses both a serif and a saucer . If so, by using the inspect element tool, I could see that they use century schoolbook an aerial. Luckily, I have both of those storms so I can use them in my mock ups. If you don't have the fonts that your chosen brand uses, you can download a similar font from Google fonts or font squirrel dot com 10. Wireframe Iterations: Let's look at a wire frames and analyzed how balanced or unbalanced there. In my case, the product detail screen has the most amount of content and needs the most amount of structure to make it not only intuitive for the user but also visually pleasing and my rough wire frame. I mocked up something easy and simple for each of my essential elements, but I'm not entirely happy with it. I have issues with where to put the price, how to display the color and size options, where and how to display the price breakdown. And even if any of the three detail sections should or should not be hidden in the collapsible area, through it aeration, you'll be able to try out different options, and I highly recommend that you refer back to your research examples. If you don't have any good examples of a particular case, don't be shy to do more research. If anything, it'll be to your advantage to do the extra work. To simplify my creation process. I like to duplicate my canvas in orderto work on my iterations. This way I could see what works and what doesn't work. It's also a great way to be able to step back and see how far I've come for my first markup post your best wire frame. It orations to the Project gallery so I could see your progress. 11. Design Iterations: Now that we got a solid Leo, we can start adding in the brand's personality. And finally bring the wire frames to life. Slowly start going through your wire frames and add in the fonts that the brand uses. Look back to your mood board and see how they style there. Headers, subhead, er's body Texan links. Do they use a variation of type sizes and weights? Incorporate those styles and your wire frames. Try out a whole bunch of options through Maurin orations and see which ones reflect the brand. Best start. I didn't in the Bryans photography into the placeholder boxes and adding in the brand's colors. Once you're done, all that go the extra mile and even mock up with the interactions might look like design the drop down navigation menu or shopping cart. Have fun with it. 12. Wrapping It Up!: and that's a wrap. Thank you for participating in my skill share class. I really hope that with us behind the scenes glimpse into my creation process that you'll be able to apply what you've learned to any future acts that you'll be designing. I look forward to seeing your final projects, and please make sure to include your whole process, including your mood boards, research examples, rough wire frames and your best wire frame and design iterations. The more I can see the better I'll be able to give you a full critique, so thanks again, and I hope you enjoyed it. 13. Designing my Everlane App: I always love seeing how other people create their projects from start to finish. So I'm gonna give you guys up behind the scenes. Look at how I designed my ever lane up when I'm making a mood board for an existing brand, I like to go through their website and make screenshots of every type of graphic and graphical element. By doing this, I have a physical example of how their brand is visually represented online. I place all the screenshots on one canvas in no particular order, and with this I feel like I have a pretty good understanding of what the brand looks and feels like. When I was in high school, I had a technical during class where I was a super nerd and got a pluses and even did the other student's homework. At this point, my life, I was actually considering becoming an architect. It's crazy to think that I am now doing something along those same lines. But for websites and APS, sketching out wire frames look super boring and pointless. But they're so helpful. It's an easy and simple way to display and understand how the app will be structured before getting knee deep into the design, my friends are exactly what they sound like. Wired frames. All the elements are made from lines and include absolutely no design. When you know what the essential elements are, you configure it where each piece needs to go. If you ever second guess the placement of something, go do some research and see how other APS do it while keeping in mind the best practices that I mentioned in an earlier lesson. The biggest mistake of that anyone can make while their design at is trying to fit everything within one screen, which is kind of like the above the fold myth for Web people Scroll especially on mobile devices, So take as much space as you need. And don't squish all your content when it comes to eatery on my wire frames. I just tried a whole bunch of options to try and figure out what works. I compared the brands, existing website functionality to my research examples and see how the functionalities translate from web to mobile. Also try to replicate the functionality of what I like in other ops, but for the specific brand that I'm working on. For example, when I tried to admit Minkow, the ever lane website, displays their color and size options in the APP. It just looked boring and weird. So I did some research and found that another app, despite all their colors and sizes centered like this, I thought it was kind of interesting, so I mocked it up. It still felt weird to me. So I went back and walked up a couple other options on, and I finally re exported the first idea and continued to reiterate and refine it. Until I got to this, I would usually suggest that you do at least 10 iterations, if not more, before you select her favorite and continue. When I was in university of my profits to ask us to do 30 it orations per class for homework. Now I just do a ton more research and carefully narrow down my inspiration, so I know exactly what to mock up. Designing is the fun part. I look at my mood board and see what styles air used and replicate them for the app. It's like a giant puzzle, them trying to figure out what styles work and where they should go. This is where experience in any type of graphic or visual design comes in handy. Consistency is key, and not having too many types, styles or distractions is what will keep your design clean and looking good. On my category display screen, I tried out a whole bunch of options about how I could display the product, name, price and color by adding in the brand's types styles. And once again referring to my mood board, I was able to select my favorite and then push that forward going back to the color and size options. I thought that since I needed a drop down to display all the colors that I could use one of the other mock ups that I did in the wire frames. I didn't want any content to be hidden when the section would actually drop down. So I decided to push all the content that's underneath when the user interacts with it. So here are my final designs for my home screen. I wanted to keep things simple and make sure to include all the essential elements, which were the logo, navigation shopping bag and category CTS. For my category display, I included a banner image which was not essential element, but I felt like it added to the overall design underneath. I included section titles and then the product images with the product name, price and color. While doing my research, I came across Instagram's UX and really liked how. When you go through their feed, the user name sticks at the top of the screen until the next user name replaces it. I thought this would help improve the overall u Y and u ex of my app. So I mocked up with this functionally might look like on a separate canvas, my product display pages filled with content. Yet I tried to keep it as simple as possible so the user isn't too distracted or overwhelmed with content. By spacing everything out, I was able to keep the screen looking clean and organized. All the essential elements are included, and I even included that transparent pricing section of their product page, which I thought was pretty important because it's part of what makes ever lane so unique as a brand. Because I like to go the extra mile. I also marked up with the navigation menu would look like, as if that isn't the user was interacting with it. I make sure to include arrows on each drop down module as a visual education for the users that in action is required to proceed. And finally, the shopping bike. I kept it super simple by using the same size images as the category display and left aligned the text on the right side, keeping in mind the styling of the text to keep it consistent with the other screens. Being a Type B perfectionist, I know that there is much more for me to continue working on and improving. For me, the most challenging part is trying to art direct myself on what actually needs to be improved and worked on. I find it helpful to do more research and see how successful APS have designed their elements. And with that, I'm able to look back and analyze EF minus up to part or lacking something. After finalizing all my designs, I like to mock them up within an iPhone device simply for display purposes. If this store in actual design to become a real app, I was sent over the package ai file to the IOS developer for them to build. But since This is only a personal project I just did to designing and using whatever applications or services are available to me. So if you want your designed to feel more alive, you can try out. Envision through envision. You can upload your screenshots and add hot spots so that you can interact with it. You can even add an icon and downloaded to your phone, so it literally looks like a real app.