Transcripts
1. Welcome: Hi, my name's Ronnie Peters from 360 Design. This is Irving, chief attention officer, and today, we're going to be prototyping a mobile app. What I want to do is, develop a prototype before I actually go to the coding stage. What's important about that is that it's going to save me a lot of time, and it's going to save me a lot of effort, and I want to be able to get it on my phone, that prototype, and be able to share it with my friends and colleagues so that we can look at the idea and proof of concept. Likewise, I want to talk about the different tools that we're going to use. You could use a myriad of different tools. There are a lot out there, things like Sketch, Illustrator, Photoshop. You could even be writing and sketching on paper if you wanted to and doing paper prototypes. We're actually going to go straight to the computer screen and use a suite of tools that I've selected. I'm a creative. I was fortunate enough to be involved with some of the first websites for the blind, and it got me thinking about user interface design and help people actually interact with digital media and communications a lot. I now head up a design firm called 360 Design, and we're focused on user experience and the intersection of brand.
2. Project: At 360 Design, we focus on creating user experiences that surprise and delight in self communication's problems. So, what we're going to do as this class, is build a mobile app, a prototype for a mobile app for a client called Metrie. They develop doors and mouldings, and we're going to create a really exciting app for them all around doors. What I'm doing is I'm thinking about some of the things that we've done in the past, some of the user experiences that we've had that were particularly successful and thinking about how we could actually apply them to create a very interesting and engaging and useful experience for this particular client, and this problem. So, what's the one big idea here? The one big idea here is that we want to be able to have people explore and discover this range of products for this client and do it on their mobile device. The target group that we're working for are architects and interior designers and people who are doing renovations in their home. What we want to do is use mobility and the mobile phone as a way of being able to allow people to explore doors and show them in their space.
3. The Big Idea: So, I'm thinking a lot about the kinds of things technically that I can do with this app, and all the amazing features that it has. Things like the new 3D Touch, audio, video, mobility and all of the things that go along with that. The other thing that I'm really thinking about is what's the big idea for my app. Think about really successful apps like Uber, like Seamless, like Yahoo Weather. They do one thing and they do one thing really well. So, when you're thinking and planning or app, which we'll go into in a few minutes, be thinking about what's the big idea what's the big concept that I actually want to have as the core experience in my app. How am I going to delight people, surprise people, and really develop and build something that is very clear, very concise and does one thing well.
4. Mobile as a Medium: Before we get started on the creative process, I just want to talk a little bit about apps and the big idea what's the concept we have. When we were tasked with designing a mobile app, or actually a series of mobile apps for the book series, what we were really interested in doing is what would actually complement the book series, not repeat it. We could take the contents of a book and you could simply put it into a mobile app and create a page turner and something that you could actually read, basically the contents of the book. But that's not taking advantages of this medium. So, what I really want to do is look at what mobile apps are really good at doing. What mobility is? What people's interaction is? The fact that they're anywhere when they're actually using one of these and what can we do to take advantage of all of the technology that comes out of here that's very different to what you actually get in the linear book experience. The advantage that we have with a mobile device, I can be anywhere, it's completely non-linear and it's got all tools, audio, camera, video, touch, etcetera that they don't have in the book experience. So, how are we going to take full advantage of this? So, that's some of the things that I'm actually thinking about before I even start building the mobile application.
5. Functionality: So, I'm thinking about this app and here is a room. Let's say, that we've actually walked into and the app's going to be all about being able to visualize what this room looks like with a different range of door products in it. I'm thinking back about one of the apps we designed Super, Head Esploder X. In this app, one of the main features was that you could actually take pictures of your friends and capture them. Then you could put them into the game. Take a picture, use the photo, and then basically, I could resize, move that photo around and then save that and then use it in the game. So, I'm thinking about that technology and what I want to do is use that concept in this particular app. So, what I want to be able to do is open up the door app. So, I walk into a room and I can see this particular doorway, and what I want to be able to do is bring in my client's doors over the top of this one, take a photograph of that, share it with my clients, share it with my friends, share it with anyone involved with this particular interior product project. Then I want to know where I can actually buy that particular product. So, that's the big idea. It's going to be really engaging and now we're going to go ahead and figure out how we're actually going to go and build this particular prototype app.
6. Tools & Steps: There are many different tools that you could use to prototype an app. We could start on paper, generating wireframes, generating user flows, and then prototyping screens out, we could lay those out and put those up on the wall just start creating and visualizing the app and what's on the actual screens. We can use tools online and online we have a lot of variation and a lot of different tools that are at our disposal. I'm going to use Axure RP and I'm going to be using an application called Flinto. We're going to be using Photoshop and we're going to be using Illustrator. You don't have to use those tools, there are plenty of other tools out there, but what's really important is the process that we're going to go through today to get from idea to finished prototype. That's what really matters.
7. Intro to Axure: Let's take a look at the tools that we're going to use for concepting and prototyping our app idea. So, I've got Flinto which is the application that we're going to actually builds the finished prototype in. We're going to be able to share that and we're going to use mail to share that with other people and to get it onto my phone. This Axure RP where we're going to build wireframes, sitemaps and a lot of the elements that we're actually going to use in the Prototype app. We're also going to use Illustrator and Photoshop to support us building icons and various different components that we're going to use. We may view this in a browser as well. Here's Axure with the left-hand navigation that shows various different screens that I've designed and files that I have opened within Axure. I've prepared some things in advance here, and we'll go through these. The first one is that I've done an overview screen. The overview just allows me to keep track of where I'm at in the project, the steps that I've taken, what I've done. I usually put a date or time after these, just so that I can see that, and especially if I'm sharing this file with others and working as a team. We can see progress and keep all of this up to date. I've got a process-flow diagram which I'm going to show you, which is the process that we're going to go through, various different design elements that I've accumulated, and then some of the different screens that we've started to put together, a sitemap flow, and then the screens that we're actually going to put into the prototype. But let's get started with process. So, we've talked a little bit about the big idea, and the concept, and that's what we're going to start in the discovery process. Who is this app actually for? You may even want to write down the persona, the type of person that you are actually targeting with your app, who's your target audience for this? The size of the potential market, what's the big problem that you're trying to solve? What's the big idea of the app? What platform is the audience actually using? Should this go on an Android phone? Should this go on an iPhone? Maybe do some competitive analysis and see if anyone else out there is actually got an app like this one. Then we're getting it into the definition phase. We're going to look at some of the details of what's in the app, what's the actual content. Then we're going to go through to the actual design phase itself. The reason I've got a number of arrows going around here is because we're going to start the design process, then we're going to go into a prototype deployment. We're going to test that. And then based on testing it, we going to go back and do some redesigning. So, you can see that this process here might take a number of different steps or trials before we actually go into the final design process that we're then going to go into taking into code, and deploying it and then once we've deployed it we're going to measure it and improve it.
8. Discovery, Definition, Design: For this App in the discovery phase, who is this for? We've talked about this a little bit. Our target audience here is architects, and interior designers, and people who are renovating or building a home. We know that persona pretty well, we've done a lot of work with this particular client, we do a lot of web work and a lot of branding and promotions for them. So, I understand this market pretty well, and who this is targeted at. The size of potential market, we think there are enough people out there, this is a viable app that we're going to build. The problem that we're trying to solve is that we really want to engage people when they're in their space, they're looking in this space and like, "How? What would this look like with this particular product in this room? " So, that's the problem that we're trying to solve, and the big idea is that we're going to be able to open up our camera on the phone, and we're going to be able to slide in these doors, and choose lots of different doors, then we're going to be able to take a picture of that door in my space. Then, we're going to be able to share it, whether I am sharing it with an architect, whether I am sharing it with an interior designer, whether I am sharing it with someone that I want to look at the space of this room, or simply take it with me to a Home Depot or Lowe's to be able to actually buy that particular product. So, that's the big idea here, the core of the app that we're actually going to build. I'm not sure that anyone else has done anything quite like this, so I'm pretty juiced about designing this particular App, because this is going to be quite unique in the marketplace for this particular target audience in this particular product. The next step is the definition phase. So, let's define this particular App. Let's look at the particular features and functions that we want to have in here and what's the content. All again, I know this content really well. I know these door products. I know what we have in the way of images, what we have in the way of copy and content. I also know that there is a map feature that we have on our Website where I can find out where to buy this particular product. I'm going to think about incorporating all of those things into this particular App, and those are going to be the core of the experiences. So, first of all, it's about bringing our doors onto the page, showing them in my space, in my room, then it's going to be taking a picture of that, then I want to be able to save that, share that, find out where I can buy that. That's really the core of the experience. So, that's the definition phase. Now, you probably want to write all of this down, you may want to whiteboard this, you may want to put this into some kind of a document, and share this. So,you'll look at this in detail, and you make a few different iterations of versions of this. But I thought this one through and that's where I'm at with the definition phase right now. Next, we are going to get to the design phase. So, this is where we really start to get into the user experience and map out, wireframe out what this app is going to be all about. So, we're going to get into some of those details on pages, but let's just talk about those really quickly. I'm going to be developing what's called a sitemap. So, I just map out all of the different pages that are on there. Not too dissimilar from a sitemap, I am going to do a flow diagram. So, I'm thinking about the way in which someone is actually going to move through this App. Then, I'm going to do some wireframing. So, I'm going to look at individual pages, and some of the elements or screens, and the elements that are actually going to be on there. Then, we'll start putting those different components together, and then start building our App. So, that's the beginning of the design phase that we'll look at now.
9. Sitemap: Let's take a look at a sitemap. So, in the sitemap, what I've started to think about are all of the different screens that I might need to design for this particular process. Again, I could have started this on paper. I could have sketched this out. I'm going straight away into action here to actually draw these elements. So these are just individual boxes that I've drawn on the screen and flow diagram, and then the beautiful thing here is that I can actually go in, and I can take this, and I can actually link this up to one of my pages. Later, I can actually then publish this sitemap as a website, and I can have people actually click around it. So I can actually click on the loading screen here, and I can go to that loading screen page, and I'll actually be able to view that, and then I can click this and then go to another one. So, this is actually a way of building a rough prototype, just an action before I even get it onto my mobile phone. So, what am I thinking about here? I know there's going to be a loading screen. What happens when you tap an icon on your desktop, it actually loads the app, and while that app is loading, we can put a graphic up there before you actually get to what I'm calling the home screen. Then, from that home screen, I'm thinking about all the different pages that I might have. So, collection of doors, where to buy, contact page, about page that might be leading off these doors that I'm going to put over my camera screen, leading to a door detail page that I'm going to be able to capture the door, and then I'm going to be able to share it. So, that was one sitemap. That was one idea that I had for this particular app. Then, here's another one, which is a slightly different way of approaching this. I'm going to go from the loading screen straightaway to the capture screen. So, here, I'm already starting to think about different user experiences and different ways of moving through the actual application. So, the previous one with kind of two steps before I got to the core of the experience, this one gets right into it and it starts immediately with the camera capture that I'm thinking about. I capture a door in my space and then I share it, so it's really a quick process to getting to this sharing point where I really think the kind of meet of the user experiences and where you'll get the most delight and the most sort of engagement. Then, we've got the door details, which I can get to immediately again off the viewer page, and then I can go to the map and find out where I can buy this product. I can contact the brand, or find out more about the brand and the app, et cetera, et cetera. So, this is just an alternative way. So, I really encourage you to start looking at different ways of organizing your pages. This was one of them. This was another one. Before we even get deeper into the design process, I'm just thinking about the user and the pages that they're going to be confronted by, the content that they're going to be confronted by, the experience that they're going to have. Again, you might want to think back about some of the apps that maybe you use, like Uber that I was talking about, like Yahoo Weather that I like. We were involved with Seamless and the Seamless app, and designing UI and UI elements for that, and these are apps that just really focus on honing on getting people what they want as quickly as possible through the app experience. So really think about that as you're developing and designing your sitemap.
10. Flow: As I'm developing the sitemap, I'm also starting to think about the flow. So, this is the engagement that people are going to have, this is how they're going to move through the app experience, and these are going to be the interactions that they have. So, it's similar to the sitemap but I'm less concerned with pages, and I'm really concerned with actions and how I group these actions. So, I know I'm going to have a welcome start page here. I know I'm going to have some kind of home screen, so this is on the version line of the sitemap that we looked at. Then, I'm going to give people a choice that they want to find out how to use the app, do they want to go and start looking at the door products and taking pictures? What's the action from there, or the next section? They could go to product details page. They could take a picture. They could go to the picture page, then they could share through these different social media channels, they could choose colors. Then, they could find out where to buy, or they could contact the brand. So, I'm thinking about those flows and how this could be arranged. But this looks a little bit busy to me. So, in doing this one, I started to really think about is there a better easier way of actually putting this together, and that's how I came up with the second concept which if you see it here even just in this diagram, it looks even simpler. So, I get those two versions just so that you could see the difference between one and the other. So, I'm thinking about the loading screen which we have to have no choice there, but then we really go straight to the core of the app experience where I want people to be able to take pictures, look at the door products, and then start engaging, sharing, and doing all those things or going deeper into the product details if they want to finding out where to buy, contacting the brand, or learning more about the app itself. So, this one I think is a much simpler path and way to go. Just so you know, just to take a look at how did I build some of these things. Let's just go into some of the things that I've done in Photoshop here. Here are some of the icons that I just put together very roughly. Again, this is a prototype, so I just built these icons so that we're going to cut what we copy and paste and put them straight into action here so you can start to see some of the actions that I'm thinking about that people are going to actually have.
11. Design Elements: So, let's take a look at some of the other things that I've done here. I've created a page called design elements, and on this page here, I've just thrown together all the little pieces, those icons that we looked at that I designed in Photoshops, some buttons that I put in here. Here are some of the door products, here's that room that I want to use in the background, here is some colors from the brand guidelines, from the brand and some of their logos. So, I've just thrown all of these elements onto one page. This is what I like particularly about action, that I can have these kind of holding areas, and then I can just come and take these elements, and use them as I'm starting to design screens and wireframes.
12. Screen Size & Resolution: Before we actually start wireframing pages out, I just want to talk a little bit about screen size and resolution. For this particular app, I'm going to design it for iPhone 6 plus, that's the phone that I have and I'm using so that's what I'm going to use. Now, during my discovery phase I looked at my target audience, I found out what most of them are using in terms of the device that they're going to be on and I'm designing specifically for that target audience and for that device. So, I'm just going to choose iPhone and a couple of things here about resolution, now because this is a prototype I really don't care too much about it looking absolutely crystal clear and sharp. This is about getting the idea and the concept out there. This is not the final design. But if I do look at screen resolutions the original iPhone was 320 by 480 pixels. The iPhone 6 is 750 by 1334, and the 6 plus is 1244 by 2208. Now that's an enormous size to be doing prototypes in. If you actually look at the size of that particular screen it's way too cumbersome and bulky for my liking. So, what I'm going to do is actually design my wireframes at the iPhone 6 size and then when I get them into my prototyping application where I stitch them all together and turn this into a mini prototype app, I'm going to scale them up, and I don't really care about that again. There's going to be some fuzziness in the resolution, but I really haven't given that much thought to the final design. This is just a prototype at this stage. The other thing I want to talk about is screen orientation. So, as you probably know from using apps you can turn your screen horizontal and some apps will re-orientate themselves and scale everything to a horizontal screen and then you turn it vertical and they'll go into a vertical position. Again, this is a prototype and I just want to get this idea and concept in front of people and test it out to get my flows going and to get the screens design properly and think about the elements that are going to be on the screen. And because of that I'm deciding just to do this prototype in a vertical format. So, I've taken screen resolution out of the picture. I'm going to go for a screen size and resolution that's easy. I'm going for an orientation that's just vertical, and thirdly I'm just going to go for iPhone. Okay. So, I'm simplifying the world that I'm going to be working in, again just because this is a prototype.
13. Wireframing: So, we've looked at our target audience. We know that they're on iPhone. We'd only building a prototype, so we're going to go for a size that actually just works for us and again, because the orientation, we're just going to go for vertical. Again, because this is a prototype at this stage, and I'm not too concerned about this needing to work in both horizontal and vertical. We're just going to stick with a vertical orientation. So, here's my loading screen. I'm going to call the app opening doors for now. Here's the company logo. Again, just putting these things onto a page and then I'm thinking about home screen where this would go. So, here's my home screen and I've got a choice that to choose door. Now, this is going off the sitemap number one and this was where I put this additional screen in there versus version two where I was thinking, why don't we just go straight into the actual app itself, and give people the door experience that I want them to have, and have them engage immediately? So, here are some of the elements that I put together that we saw on the design elements page. I'm just taking some of these things, copying these, and I'm bringing them into these pages. So, I can start to use these elements as part of this design to make these screens. Now, one of the great things that actuals that does is masters down here. So, I can actually make elements like my top navigation paths, and that can be consistent throughout, and I can just drag and drop those masters onto any page that I'm designing, and then they'll be consistent throughout. Then, if I edit the master, it will edit it on all of the different wire frame pages. So, that can be extremely time-saving and advantageous. So, this is where I'm thinking, I'm calling this the home screen, but this is basically where I actually start using the app. Then, if I click the link at the top, I go to a details page. So now, this is going to be a long scrolling page. So, there's more information here than fits on one page. So, I'm just going to build this as one big long page and later, we'll figure out how to make this scroll properly. So, what I'm starting to do is look at this sitemap, and use the elements that are on that sitemap, coupled with the choices that people make in the flow to start to think of what's actually on those screens and pages. So, this was the original idea for the homepage, not very exciting and only one major choice there. Then, that was going to lead to this door page and if you remember from the sitemap, we've got doors. We've got where to buy. We've got contact. We've got about. Then, we've got product details. So, that's a lot of things to have on my screen taking up real estate all of the time, but I'm not necessarily going to be using. So, I just wanted to show you that it's my the starting point, and then why don't we just take this, and put this next to that, and I'll talk to you about some of the thinking that's going on behind where I actually want to end up with this page. So, that was the old homepage, but now, with one level down and in the first iteration, but this is now where I'm really thinking of going with this new home screen. I've taken all of these buttons across the bottom and I've put them inside this hamburger icon. I'm going to think about later, how I want to be able to expose that navigation and take people to these other pages within the app experience? But what it's done is it's increased my screen real estate, which is so valuable in a mobile experience like this one. So, just showing you these couple of ideas to start thinking about the process that I'm actually going through as I wire frame out the pages that are on the website.
14. Axure Recap: So, let's go quick recap of where we're at. My company over a few page here so I'm just keeping track and writing down the steps that I've taken and the process that I've gone through. The process page that was, I put this up here for your benefit to show you the steps and stages that I'm going through. So, that I wouldn't normally put into the app. I got this page here where I started to put all of my icons and design elements, logos from the company color choices based on the brand guidelines and then this collection of elements that I'm going to be using for the design process. So, I got those in here. Page sizes we've talked about I just keep that there perhaps as a reference. We've gone through a couple of different sitemap versions and seem to be leaning more towards this one now. This is the point where I could if I wanted to actually take both of those sitemap ideas and prototype both of them and then test them against each other. I'm actually just going to build this particular one because I think this is just a better solution, but the fact that I went through this process of trying out a couple of different things during the wireframing process was very useful for me. Then, I went on and started to build some of the screens, so very simple wireframe of a loading screen. The original home screen for the first idea and then the subsequent pages and then the one again, that I'm actually going to build which is this one, a floor detail page. I'm sorry, door detail page and then I've got other pages, like where to buy page. I haven't yet done the contact page and some of the other pages that, the about page, for example, that we know that we want to have in the final app.
15. Connecting Your Sitemap: I've spoken earlier about how we can actually build an HTML prototype using iShare, so that we could very quickly put these screens together before we even go on to building an actual app to go onto my phone. So, let's just take a look at one or two of the features here. In the sitemap, we've got this our where to buy. We're going to go in here and we're going to connect it to a reference page, so there is a way to buy. We're going to go into the doing details. Select a reference page there. There's the Door Detail page that we got. So, I haven't built these other wireframes yet. But, what this is going to allow me to do is actually click from this to those specific pages.
16. Linking & Publishing to HTML: In the meantime, I've done a little bit of housekeeping and I've tidied up the left hand side here to make things a little clearer for myself. I'm going to go back into the sitemap here and I'm just going to make sure that these are connected to the right places. This particular screen here, which is currently called dual collection one, I'm actually going to re-link that reference page up because that's now going to go to the new place because this is the new schema that I come up with. Then door detail, I just want to make sure that that reference page is going to the right place, it is. That's going to the door detail page, so that's okay. The loading screen, I just want to make sure that that reference page is correct, and it is. So, those are the screens that I've actually designed, and I'll be able to link those all together. I will also be able to go into some of these screens and connect them as well. Now, this particular screen here, I'm just going to link this logo up to next page in the sequence just so that I have that. It's not an actual link that we would have in the app itself because the loading screen is going to go to the homepage. But I'm going to link it to what we're calling, door collection. There we go. So, if I actually tap on that, you link this up as well. Create a link. That'll go to the door collection page as well. Then, when I'm in the door collection page, I've connected this to the door details page. I know I wanted that to happen. Then we've got a brown door which I wanted to have that's connected to that page. Then if I go to the brown door page, we can see I can get back to the white door. Let's create a link that goes to the home screen. So, I'm just going to take this and I'm going to say create a link, and then this is going to go back to the door collection page. So, there we go. So, anytime I tap on this, that will just go back to that page. So, let's stitch all of these things together as a very quick HTML prototype. So, I'm going to go and publish, and I'm going to say, "Generate HTML Files", "Generate" As you can see, I'm now in a web browser environment. I can go here and I can click on that particular sitemap page and I can see all of those different pages. So, this is quite useful for me just as an organizational principle, just to see that I've got all of these pages, see how they're connected together. I think we said when we were on the loading screen. We're going to be able to click the icon that was going to go here. This was going to take us to the browns, green. Then if we click the icon, it will take us back home. If we click this, it will go to the details page. All right. So, very, very quickly there. I just created a flow and a few click-throughs. So, this is one way of prototyping, but it's not on my phone. It's on website. Now, I could publish the URL, I could share that. We frequently do that to share with clients or share with the programmers after we've done some more tidying up and a little bit more design work and finished some of the other wire frames to these pages. But I want to get this onto my phone.
17. Flinto Intro: I'm going to bring up Flinto. In Flinto here, what I've started to do is assemble all of the different screens that I designed in Azure. Now, as I'd said before, you could have done this in Illustrator, you could have done this on paper, and then scan these and/or taken pictures of them, and slice them in Photoshop. There are all manner of ways in which you can bring all of these elements together. I just showed you one way of doing it. It's the way I like to work currently but there are many different ways of actually getting to this point. So what we're looking at is different iPhone screens, and what I've done is placed all of the different elements there, and what I'm showing are adjacent states of screen. So, this is the home page or the door details page, and the screen next to it, I am showing where I've activated the menu, the hamburger navigation. You can see I've made a few minor changes. I've switched over the branding to put the hamburger icon into the very upper left-hand corner. I've done that so that I can have this panel slide over where I can see the different states of navigation. I've got various different door treatments here that I'm going to be sliding in over the background. Also, there you can see our product details page here. This is actually the whole page, and we've got a slide feature so we can slide up and down, scroll up and down that page, be able to look at that. Then, what we've done is stitched all of these pages together so that we can activate different colored doors. So, there were some very specific things that I wanted to do, and why I want to get this into this application is because they have some beautiful transitions here and I can customize these transitions. One of the most important ones is how I actually slide the door back and forth, and that's why I wanted to bring all of those elements into Flinto to make that happen.
18. Transitions: One of the most important and central features to this app that we've talked about is how I want to be able to slide these doors over the camera. So, I'm going to activate the camera automatically when the app opens and then I want to be able to slide these products over this camera view that I have open in my screen. So, let's just take a look at the transitions there, I'm going to go over here and say, "Edit Transition." This is one of the great features of Flinto, it allows me to show, here we'll just do it in slow motion, the before screen which has a white door over it and what I want to be able to do is swipe the white door and bring in a wooden door, so let's just look at that again. So, at a very specific action here, I've said that I want the door to be at an angle and it's on the right hand side, I want it to slide over and then I'm going to position it, I'd be doing this with my thumb as a user but then it forms in a central position it's absolutely vertical. There maybe a pension zoom features, I could scale that and when it comes to actually developing this app, I'm going to talk to the developers, I'm going to write notes along with the prototype to tell the developers how that particular feature would work. But this one, is something that I really want to be able to custom design and by animating it show the developers exactly how I want this door to slide in. So that's a very specific action and I'm thrilled that I'm actually able to do that using a very simple set of tools. So, let's just look at some of the other transitions. We talked about the hamburger icon, so that's another transition that I really wanted to do specifically. This is the screen prior to clicking on the hamburger icon and then if I click it, this page slides over and the navigation slides in. Let's just look at that again in slow that down. So, the action that I got here, this is before I click on the hamburger icon and then I click on the hamburger icon, and you can see that the navigation was actually scaled down and it's slid in, it was at 20 degree angle and then it became to a horizontal position. So, let's just exit that. So, those are a couple of transitions there, we've got the same thing going on down here, again bringing out the hamburger icon in the primary navigation when I'm on the map feature, that would of course happened with all of these screens but I'm not going to go through and animate all of that for these, that's going to take me too long and I don't really need to do that again for this prototype feature. But one of the other things that I do need to do and we had talked about, is being able to change the color of the door. So, this screen here will actually link to this page, so you can see the red line highlights up. So, if I click on the brown icon there, brown door will come up. If I click on the rose color, the rose door will come in. So, these are just some very simple transactions and I've just done a cross-fade as the transition method for that particular feature. Then it comes to long scrolling page and we know that we're going to need to scroll down, so let's get back to activate, here we go, you can see that this is the scrolling area and I put in some instructions here that it's got a slight bounce to it and it's going to scroll vertically up and down on the page. So, very quickly, I went from concept ideation in terms of a sitemap, wire-frames, did some brief flows, then created the wire-frame designs for these particular screens, I pulled them in here, I copied and pasted them. I've started to create some transition elements and I have the beginnings of a prototype here. So, let's go and take a look very quickly in their preview mode, as to how that actually might work. So, here's the preview screen, let's just go to the home screen there, so here it is and there's that door action that I wanted, so this will be a thumb swipe on the phone. So, you can see I'm in the white door there and I can swipe over and bring up this wooden door, I can swipe the wooden door over and I can bring up this glass door. So, I've got my action going there that seems to be working exactly the way that I wanted it to, let's look at that hamburger feature. Okay so go from there to where to buy, there it is back to this page.
19. Exporting to Your Phone: So now, that we've got to a point where we have a number of different screens and we've tried various different transitions, and effects, and links, I now want to get this onto my phone so I can start to feel how it actually works in a smartphone device. I want to send it to some of my colleagues as quickly as possible and get their feedback, and learn from them what they see is working and what's not working, and how they like the app and the whole app experience. I'm just going to share it and I'm going to send it to myself as an email, I can send it to other people as well. So, there we go. I'll call it Flinto prototype, and that's going to arrive on my phone.
20. Finished App: So here's my email with the Flinto prototype in it, and what I've got here is the Flinto app which I've downloaded that then loads the prototype that I've built into that and here it is. So, this is my app with the swipe feature that I was very keen about seeing how that would actually work. So that's great. That seems to be going okay for me. Here's the product details page with the sliding feature, the scrolling, long-scrolling page. Let's just hit back, go back to this page, go back up to the homepage here. Some of the other features we were looking at is the where to buy feature so that's this page here. I haven't done anything yet with the search feature or changing my zip code. So those would be some of the other things that I would be wanting to look at now and maybe this is a scrolling area underneath with all of these different locations on it. That would be something that I'd want to start looking at or what happens when I actually tap on some of these markers on the map. Let's just go back to the homepage from here. The other main feature that we're looking at was the ability to be able to actually color or change the color of the door that I've actually slid in over the camera view. All right, so, there you have it. In a relatively short period of time, we've gone through a number of different steps, first of all, looking at the features and the functions that we want to have this app, who it's actually for, really looking and thinking about that target audience, thinking about the platform that we actually want to build this on, in this case, iPhone iPhone 6 Plus in this instance. Then we went to the sitemap, flows, wireframing process then we took the wireframes, we put them into Flinto and then we created these transitions and we have created something that we can now share with other people and then I can now experience and really determine whether is this actually working for me the way that I want it to? Do I actually like this swipe feature? Is there perhaps a better way of doing that transition? Do I want to have a white background behind these? Maybe not. Maybe these colors could actually be more in space here through my camera view on this particular background. I also haven't done the next main feature which would be what happens when I take a picture here, click on the camera and then share it. So those were some of the other important things that I want to be able to add to this prototype and that's where we are so far at this point in time.
21. Wrap Up: So, we've gone through various different steps and stages and using different tools to get the concept idea prototyped and onto your smartphone. Thank you very much for doing this course, and I very much look forward to seeing what you do and what you produce and the prototypes that you come up with. Please feel free to reach out to me and share your concepts and prototypes. I'd love to see what you do, and I look forward to having the connection and hopefully seeing your app in the iTunes store sometime soon.
Ronnie Peters, Founder and CEO at 360 Design
