IDEA TO APPSTORE - Design Process UX/UI Remote Design Sprints

we rarely go through a project and show really how it looked you know how the actual process of the project looked but I thought for the design nerds out there I might be interesting to see how a project goes from you know zero to being an app on the App Store hello everybody my name is Jonathan Courtney I am the co-founder of the design agency a Jane smart and today I saw that one of the apps we'd been working on for a little while just appeared on the App Store and that app is oak meditation and it's the second version of it so we helped redesign completely redesign the app from scratch over the last few months we spent maybe a total of four weeks on the project and it's really really amazing to see it on the App Store and I realized that throughout all of our videos and the things that we've been putting on YouTube and on medium we rarely go through a project and show really how it looked you know how the actual process of the project looked and this specifically was an interesting one because it was almost completely done remotely so we use design sprints but we did it completely remotely from start to finish so I thought it might be interesting to show you how that looks and I'm gonna do it in a pretty low file way I'm gonna do in a screencast this is not the usual a Jane Smart YouTube video but I thought for the design nerds out there I might be interesting to see how a project like this goes from you know zero to being an app on the App Store yeah so we're all super proud that it's on the App Store it was a lot of work but super super happy to see it it's always great to see your apps working and we actually used this app as well which is a great great opportunity tiny bit of context I met Kevin Rose Kevin Rose is the guy who created oh ok ssin we actually reached out to Kevin to ask him if we if he'd be interested in us working on a couple of things that we talked could be improved with the product initially our original project so I I was in San Francisco I sat down with Kevin we had a chat about all the different things we could do and we decided on a just having a really small project at the start where AJ and smart would focus on dramatically improving one very specific part of the app and that specific part was how you select meditate different types of meditations it's a meditation app by the way now what actually happened is I went back to AJ and smart here in Berlin and I told the team look let's you know Kevin wants us to to change this one part of the app but let's just go all in and let's aim for like completely ripping it apart and putting it back together within a one-week design sprint so let me show you how that actually happened and let me show you how we got from start to finish I'm even going to show you the the programs we use so the very first thing that happened was we did a kickoff call with Kevin I think this was like the just the week before Christmas you can see here on my screen and how that looked was me and three other people interviewing Kevin Rose using the expert interviews technique from the design sprint to get as much information out of him as possible and while we were interviewing him we were creating how might we notes and how might we notes are things that you can see in our other videos but also also show you how they look here so just to show you the kickoff call so you can hear what he's talking we're writing so we did a you can see it's a one hour and 20 minute call with Kevin and while we were calling with him we were adding the notes that we were getting from him to this real-time board so real-time board was the collaboration software we were using so we were in-house at AJ and smart the agent smart team we're all here based in Berlin but because Kevin Rose is based in San Francisco we had to do this completely man you are completely remotely so while he was writing those things down we were creating how might we notes and adding them to the real-time board so how might we make breathing very present how might wait so there was a lot of different things that were kind of you know interesting that we were just able to tell as much information from Kevin as possible and also in a standardized way so everyone on the team understands the notes so that we could also pass to pass it to different team members within AJ and smart if people were changing teams okay so that's the first thing we did we also then used those notes to create a the goal in sprint questions with Kevin in the kickoff call so we kind of suggested what the goal could be in two years oak is a platform for geeky mind hackers it takes difficult quant to difficult to quantify practices like meditation that makes the results tangible we also created the map which you can see in the design sprint this have really helped us to understand the flow of the product and what we also did with Kevin was we did the lightening demos exercise where we asked him to go and find a couple of products that he really liked and show them to us and talk about why he liked them so we can have an understanding also of subjectivity when it comes to design and we also went away and found a couple of dozen of products that we found really interesting and found could could help us push us in the right direction so the next step was we went away and we decided we came up with a couple of concepts now at AJ and smart we always do hand-drawn concepts first and we vote on these so you can see the different hand-drawn concepts here this is my one hey hey hey we even did some mood screens but mostly what we did is we just before we went into any effort and design we sent him these hand-drawn concepts and with these hand-drawn concepts he was able to leave feedback in line exactly where where he what what he liked what he didn't like and he also voted these red dots are from Kevin we asked him to vote on the things that he liked so that we had an idea before we would go and design it we had an idea of what kind of directions he liked right we also shared I created a Pinterest board of different moods that I felt he would like based on the first call we had with him and a lot of the things that I found here were different Japanese architecture different types of Japanese stationery which I'm also obsessed with and a couple of the color tones also came from this so you see maybe at this point you might be wondering if you're a classic designer you might be wondering like why didn't we talk about the user yet that's a whole other topic but in a lot of the projects we do we're not interested in the user yet we're making our own assumptions right now before we present things to the user yeah I know that some people find that a little bit controversial so a couple of the things in here a couple of the color tones a couple of the aesthetic directions were really really interesting to us here at AJ and smart and we decided to use these as a basic outline we also we wanted to take the original laugh the original app was all done in vector graphics and we wanted to replace those vectors with water colors and that's also something that Kevin sort of had a something he wanted to to push in that direction as well so watercolors were something we really really wanted to focus on and you can see like one example that we put together here just to show we wanted to lighten up the app the app was quite dark as well okay so we had the first we had these sketches then we had Kevin rate the sketches and talk about them we also had him send us videos of him talking about the sketches as well so that we had an idea of what he was actually kind of liking what he wasn't liking and then what we did is we went ahead and created the first prototype so we went into figma so this is the figma app and we created the very first prototype based so first we did a storyboard a tin house I unfortunately can't find photographs of that and and all of that was hand drawn and then from the storyboard we went step by step and created that storyboard in figma completely different look and feel for the product originally we were just supposed to work on this one page but we decided to go all in send that over to Kevin and then he was able to give us feedback by the way we're still in week one so this is probably just like day three of week one so he was able to we were able to send him over this prototype as like just to show you it even has animations in it we try to make the prototype as realistic as possible so that client in this case Kevin actually can give real feedback and and really can understand where we're going I'll show you just an example of the feedback here it makes these buttons and these disciplines feel more substantial when there are bigger icons like that yeah I think this is my favorite design so we did a couple of different variations as well of the prototype so he at least had the opportunity to choose pick and choose a direction before we went all in just to show you again this is fig mom um with figma we were all able to collaborate on the project so by the way even though I'm presenting this project I didn't do all of the design work at all at the very start I was kind of more like working on the concept and unlike the the visual direction and that just the product strategy and but once that was done the designers at a Jane Smart specifically phaidor Tim and Rob they took over and started designing the screens and these guys are really really amazing at that in at the same time so one of the concerns that Kevin had and I think you can see it here a big problem I've had is finding decent illustrators so he was worried that you know he would love to do these illustrations but he was worried that we wouldn't be able to find people to do that because he had trouble doing it and so luckily look here you see it again love this but we'd need to find an illustrator luckily a really good friend of mine is an amazing illustrator her name is Sarah kill coin and I had her come over to the office showed her the different directions that we were looking at I showed her the Pinterest board short of the screens and the general concepts and she just started painting some really beautiful hand-painted work here 90% of what she painted didn't end up in the F because it's you know obviously pretty we went through a lot of it iterations but what's in the app now you know the badges everything is completely hand painted and that's just something I'm super super proud of and she did an amazing amazing job so Sarah joined the AJ and smart side to get these illustrations so Sarah kill coin check her out if you need any illustration work done amazing she's also Irish like me so now so what we had after a while so we used placeholder illustrations all of these illustrations we found you know on stock photo websites or on Google and we just stuck them in and we we use those as like reference material until Kevin and that's what the old app used to look like so a bit more techie and a bit more dark and stuff like that still great still great work but we wanted to change it so the final so basically that with the phret at the end of the first week we pretty much agreed on what direction to go in what visual style and then what we did is once we were like once Kevin was like yeah that's how I want the app to look that's how I want the app to work because we changed around the UX and UI of it completely and once we agreed on all of those and there was a couple of system changes we needed to make we completely redesign the badge system and the progress system from scratch then what we needed to do is do every single screen so that it was deliverable to the developer so we did every single screen in the app one by one actually this is still not the final handover version but it doesn't matter and yeah so we even even down to the you know acknowledgment screens and settings screens this was one of the early concepts where we wanted to have these bonsai trees all hand-painted hundreds of them and in this site in the end we decided not to go in that direction and also I have to say like really working with Kevin rose on this was such a pleasure because him as a designer himself he was just able to make so many decisions with us as well so after a while he realized that he didn't really like the bonsai trees and they wouldn't scale so we went for these more circular icons but yeah basically the the app went from you know hand-drawn to high fidelity screens and prototypes within a very short amount of time and I think in total we probably put about you know two weeks of intense concept work before we got to really the final let's do this and then probably another two weeks of creating all the screens maybe there's like oh yeah for iPhone and for iPad and you can see there's there's quite a lot of different screens here as well we tried it quite a lot of different directions and the final version super proud of it still a couple of things left to come out and this is all town nothing to see here but yeah so that's that's pretty much unfortunately like I'm after losing a couple of videos and a couple of things that I wanted to show but I think that gives you basically a little bit of an idea so we used real-time boards to work with the client and and do all the voting do all the post-its stuff and basically get everything in there so we had one central place oh sorry there was one of the thing we did also use Basecamp so we use Basecamp at AJ and smart to keep the updates very clear and transparent between yeah basically between us and between Kevin but that's not like super super interesting so yeah we went from start to finish then we started delivering to Taylor the developer she's also really really amazing and yeah now I'm holding in my hand it's only been 1 2 3 4 months since the start of the project so super super quickly getting on the App Store and it's yeah it's really really cool so that's just a little bit of a glimpse into doing a remote design sprint I know I'm leaving a lot out about how the exercises actually worked in house and stuff like that but I just wanted to give you kind of the key points of how that worked so we kind of facilitated the entire thing and just helped Kevin go step by step so it just wasn't completely random and yeah but that's basically that's oak I hope you check it out I hope you like the new version of it if you're already using it and thanks so much for watching goodbye [Music] [Applause]

Channel: AJ&Smart

Views: 192,475

Keywords: AJ&Smart, design sprint, ajsmart, how to design an app, how to design a product, product design and development, design sprint workshop, app design tutorial, design sprints, design process, ux design, design sprint case study, UX design agency, user experience designer, remote design sprints, ux design process, idea to appstore, ui design, UI Remote Design, Design Process UX

Id: ZgMG_OflDq0

Length: 15min 58sec (958 seconds)

Published: Wed Jun 20 2018