From Idea to App Store: A Design Sprint Case Study
Take a look at the process of designing a successful app
If you’ve ever worked on an app, you can only dream of that feeling of pure joy when you open the App Store and see your app featured on the homepage. Then you open Product Hunt and it’s featured there too! The app was the brand-new, rebuild from the ground up version of Kevin Rose’s meditation app ‘Oak’, which myself and my colleagues at AJ&Smart were lucky enough to work on. I was personally a little worried about the redesign being taken badly (people often don’t like change) but the response was overwhelmingly positive.
I rarely get a chance to show people exactly how we design products at AJ&Smart because many of the products we work on are under heavy NDA, but Kevin kindly agreed to let me show everything!
Don’t feel like reading? Fine with me! I made a video of the entire process! Probably good to check this out for the nerdy details.
We used Remote Design Sprints
The main process we used to rethink the app and collaborate with Kevin (and his developer) was the Design Sprint by Jake Knapp. As we were on separate continents and time zones, we did this completely remotely.
Since I’m assuming a lot of you already know the step-by-step of a Design Sprint (or if you don’t you can check out our other stuff here) I’ll not bore you by going into allll the tiny details and exercises, and will focus on the points that made this sprint different.
Total project time: 4 weeks (until passing over to a developer)
Original Scope: Redesign the Meditation Select screen of the Oak app (this actually turned into a total redesign)
Interesting info: The entire Sprint was run remotely, because Kevin Rose is based in San Francisco, and AJ&Smart are over in Berlin.
So, before I dive into what we did, it makes sense to give some background…
A few of us at AJ&Smart were actually using the original version of Oak as a meditation app, and we took a long-shot and reached out to Kevin Rose because we had a few suggestions about how it could be improved.
I then met Kevin in San Francisco, and was telling him about our ideas for product improvements, and together we decided that AJ&Smart would help him redesign the Meditation Select screen of the app, buuut little did he know that when I returned to Berlin and spoke to the team about it, we were so excited about the project that we decided to surprise Kevin and do a total redesign from scratch, ripping the app apart and building it back together again.
What is the Oak app? Oak is a meditation and breathing app designed for geeky mind-hackers and includes guided meditation sessions, where users can track their progress and goals. It takes difficult-to-quantify practices like meditation that makes the results tangible. An original version was released by Kevin Rose in 2017.
With an excited Sprint team pulled together, we gathered our zen-like focus and dived in, and life at AJ&Smart became all-things Oak for a few weeks…
Step 1: Initial kickoff call & remote expert interview
We kicked off by jumping on a conference call with Kevin Rose, with the aim of getting the team up-to-speed with what Kevin was thinking about the project, getting as much information from him as possible, and for us to really scope out the project. We actually treated this call like we would the ‘expert interview’ part of a Design Sprint — while Kevin was talking we were writing down ‘How Might We notes’ on postits. We made extra effort here to note these as clearly as possible, since we were working remotely with the client and there was less opportunity for explaining the rationale behind things.
We managed this all remotely by using RealtimeBoard — we created little virtual postit notes and filled them in on the board. This made it super easy for us, and Kevin, to see everything in one place and update it in real-time while working on different continents!
Total call-time: 1 hour and 20 minutes
Step 2: Creating the goal & Sprint questions
We then, during the call, created a goal and Sprint questions. We suggested what this should be based on everything we had discussed with Kevin.
Step 3: Create the map
Exactly as we do in a normal, in-person Sprint, we created the map, which really helped us understand the flow of the product. The original scope here was to focus on the on-boarding, as you’ll see highlighted, but we actually expanded past this and did a total redesign.
Note: we wouldn’t normally recommend expanding the scope of the Sprint like this, unless your Sprint team has a lot of experience running large-scale projects and has the capacity to pull something like this off well.
Step 4: Lightning Demos
In a normal Sprint we’d actually physically find examples and then present them to each other, but to optimise this part of the Design Sprint for it being remote, we did a few things differently:
Pinterest: I used Pinterest to find inspiration for the Design. We knew from speaking with Kevin that he was super inspired by all-things Japanese design (which made my Japan-nerd-self really happy) so I did some Pinteresting and found things like Japanese stationary, interiors, and products to show to Kevin. These things actually inspired a lot of the colours and visuals that would later end up in the app. Here’s the board if you want to see it!
Kevin’s inspiration: We asked Kevin before our initial call to find some products that inspired him, and to present these to us on the call, so we can have an understanding of subjectivity when it comes to design and to push us in the right direction. In the usual Design Sprint Lightning Demo-way, we told him it of course didn’t need to be other meditation apps and that he should look for inspiration in other products and industries.
Step 5: Creating the first concepts
So the next step was we went away and we decide we came up with a couple of concepts. At AJ&Smart we always do hand drawn concepts first and then we vote on these. We even did some mood screens, but mostly what the aim was here is, before we went into any effort in design, we wanted to send him these hand-drawn concepts so he could then leave feedback in-line exactly where where he was and tell us what he liked what he didn’t like.
Step 6: Voting on the concepts
We then asked Kevin to vote on the things that he liked in these concepts, so that we had an idea of the direction he liked before we started on the design. We also had him send us videos of him talking about the sketches, with Realtimeboard open, so that we had an idea of what he was liking and not liking.
One piece of feedback we got from Kevin at this stage was that he loved the illustrations we had included, but he was concerned that we wouldn’t be able to find a good illustrator to work with on the project, but luckily we knew someone who could do this really well, a friend called Sarah Kilcoyne (who is also Irish = bonus points). I had her come over to our office showed her the different directions that we were thinking of going in. I showed her the Pinterest board showed the screens and the general concepts and she just started painting some really beautiful hand-painted work.
Side note: You might be wondering, if you’re a traditional designer, why haven’t we talked about the user yet. That’s a whole other topic, but in a lot of the projects we do we are not interested in the user just yet. We’re making our own assumptions right now before we present things to the user to be tested at a later-stage. Yeah…I know that some people find that a little bit controversial.
Step 7: Prototyping
Based on all of this insight and feedback from Kevin, we then moved forward to creating the first prototype. We also decided at this stage that instead of using vector graphics like in the current app, we would replace those vectors with watercolors, and that’s the direction that Kevin wanted to push in as well.
Our screen design tool of choice is Figma. We went from the hand-drawn storyboard step-by-step and started creating it in Figma, then exported the screens to Marvel for prototyping.
Step 8: First feedback from Kevin
At this stage we wanted some initial feedback from Kevin, so we sent over our first-draft prototype. We wanted the app at this stage to feel as realistic as possible, so that we get rich feedback from him, so we were sure that the prototype had things like animations. We sent over a few variations of the prototype, each with a slightly different design, which allowed Kevin to pick his favorite before we went all-in with design.
Time update: At this stage we’re at day 3 in week 1.
Step 9: Alignment
By this stage, the end of week 1, we all had alignment on what the new version of the app would be, and we had full buy-in from Kevin, so we could confidently move forward to create all the screens.
Step 10: Creating the screens
We spent about 2 weeks working away at creating the screens. Fedor, Tim, and Rob, our awesome Designers were heads-down and zen-d out.
Step 11: Handover to developer
At this stage we passed everything over to the developer Kevin was working with (Taylor Robinson, she’s amazing!).
Aaand with a few check-ins here and there, 3–4 months passed and before we knew it, the new Oak app is on the app store and getting loads of love from around the internet!!!
Kevin was super happy with the result…
Let us know what you think of the new Oak app, and tell us if you’re thinking of running a remote Design Sprint — I’d be happy to answer any questions you have about the process!
Check out Oak on the App Store, and if you want more process breakdowns like this then sign up to our product & innovation digest here.
My Remote Design Sprint top tips:
Be extra-specific when making notes and writing the likes of the How Might We postits — these may need to be read by someone on the other side of the world when you’re not there to explain what you meant.
Double-down on alignment check-ins: there’s a lot more scope for misunderstandings and confusion in a remote Design Sprint, so it’s important to make time for extra check-ins to make sure everyone is on the same page
Extra focus on the Lightning Demos: again because there’s scope for confusion, it’s important to realllllly understand the client’s mindset and what they[re envisioning. It’s harder to do this while not in the same room so we’ll always put a lot of emphasis on them showing us what inspires them, and we’ll also do a bit of extra work on this too (like the Pinterest board)
Have the right toolbox: tools become very important when running a remote Sprint. Don’t let technology ruin your Sprint or let important stuff get lost in emails. See below for what we use when running a remote Sprint
Remote Sprint toolbox:
RealtimeBoard — a collaboration tool where you can basically set up a workspace that has everything you need for a Sprint (digital postits, voting dots, storyboarding, etc)
Basecamp — for project management. It’s important to always track clear and transparent notes that all team members can access.
Come say hey and learn more about Design Sprints and Product Strategy on my Instagram | Youtube | Podcast
Join myself and Jake Knapp for a free 1.5-hour webclass on how to run and sell Design Sprints!
