How we designed Dekimasu
5 Steps from an idea to an App
At the end of this crazy year, Dekimasu was born. Hope the sharing of our little App’s story brings some comfort and courage. Dekimasu(I can do it)!
Step 1: find a solid idea to work on with a great team
My first internship was as an editor for an Appstore called Best Apps similar to Apple’s App Store where I got the chance to test, review, and analyze all kinds of Apps. The “Best Apps” posts I wrote had millions of views and the apps we recommended are either useful, fun, or a piece of art. Most of them are unknown independent apps that are simple but beautiful. From that time on, I believe a good product doesn't need to become Facebook or WeChat that can do tons of things with billions of users. Instead, just serves a small but precise goal really well, or just a carrier of the creator’s spirit.
In the past 7 years, I’m always in the discover mode — seeking product ideas to work on. Many ideas are sleeping in my notebook, some have been sketched out, some got the high-fidelity design and prototyped but did not get to the development phase. Only several got to the final stage: launched.
Dekimasu is one of the hundreds that had a solid idea with accountable and passionate teammates. The idea comes from Chris Brown, and his wife Menglin, who is my friend and previous teammate. They both fans of Japan and been learning Japanese for more than a year. Chris found that learning and remembering kanji might be the most challenging part of Japanese learning. That’s why he wants to take advantage of spaced repetition to improve that learning experience. And there’s nothing to serve the exact needs in the market yet.
Early this year, Menglin showed me Chris’s first version prototype that has 3 screens: learn, test, and reveal. And they were blocked by design.
Chris is an iOS developer(Amazon) and Menglin(LinkedIn) is an expert in machine learning, plus me, a product designer(MongoDB). We all love Japanese culture and are experienced Kanji learners. What a wonderful team to work on this idea! We also aligned our team’s goal for the project before start: a big learning experiment.
Step 2: confirm user story and scope (~15% time)
We had a conversation about all my concerns for the content, market, and goal for this product. Chris and Menglin had a brilliant long-term vision for Dekimasu, but now blocked on the first step — where should we start?
Though initially the app is designed for Chris, we want to share it with more people. So I asked Chris to help writing down the key user stories, assumptions, and authorities of the third-party content we will use in the app(we got the author’s permission to use the content in his book).
MVP(ugh, we hate to say this) or App 1.0.0 has to be super sharp, simple but valuable enough for users to achieve their goal. We list everything we want to have as much as possible, then breakdown and remove the parts that are “good to have but not required” until nothing can be removed. That’s where we begin, and it turns out the outcome of 1.0.0 is almost exactly as planned. We also have a growing list of not-doing and backlog to put aside things we might consider to add later.
Step 3: design functions and flow (~25% time)
Based on the scope and features, we started wire-framing all the screens we needed and build the structure. It seems easy, but it takes weeks of intensive discussion and rounds of iteration for us to find the best solution and confirm the function logic to cover all the scenarios. Since it’s a side project with limited time, this step mainly focuses on the structure and information architecture, not worth wasting time on the visual details yet.
At this moment, Chris and I are working in parallel on the next phase of the design(UI) and development(function/logic).
Step 4: find the design direction and iterate (~40% time)
I asked Chris for some keywords that can describe the app’s feeling, and he told me Classy, Trust, Detail-oriented, and Elegant. By searching for related inspirations all around and grouping them together, we had a better idea of where to and not to go.
Then I started drafting the Splash screen and the Lessons screen, to set a theme for the design. Frankly, visual design is not my strength, so this step takes the most time and painful. looking at all the abandoned designs, I self doubt many times can I really do this? The answer has to be: Dekimasu!
When we finally got there, all the struggle fades away, and just delight left.
The Splash screen(above) gives the foundation of the look and feel of the experience, and the Lessons screen(below) has the most UI work that influences the feeling of the app a lot. We tried different ideas, and land on the Kamon one. Those little Kamon takes hours and hours of time to draw, I can almost feel the Japanese craft spirit when I tweak the details. Chris is not just a developer, but an artist, too! He drew the Kamon for Lesson 2 and 4 and always offer me great ideas and suggestions.
Lesson learned: the simpler the outcome, the harder to make.
In my first round of exploration, I designed a set of icons below which is cute. And I really into the idea of a rounded CTA button that has a door open animation. I thought it brings the user a sense of ritual before they start learning or reviewing. I even picked a sound effect for it.
But after discussion, we believe the icons above are too cartoonish that not match the classy style we want. The open door animation also feels too much that breaks the harmony of simplicity when we look at the app as a whole. Though it’s not easy to abandon something I spend effort on, I convinced myself and move on to explore the next and better solution.
Lesson learned: Don’t stick to any idea, no matter how much you love it.
My favorite design is the progress indicator. I started with trying the bar, dots, pie, and circle, but none of them really impress me until I apply the same sun from the splash screen that rises from the horizon when users made progress. The metaphor is so positive, intuitive, and elegant. Plus, it’s also scalable, deepens the branding, and not too complex to realize.
Step 5: handoff, testing and make improvements; submit to the App Store (~20% time)
Chris and Menglin are in California while I’m in NYC. The collaboration between the three of us is smooth and effective thanks to Figma and Slack. We only had the initial kick-off meeting and did not have a single meeting after that. The 130+ comments on Figma recorded our discussion, design iteration, and improvements.
After confirming all the main screens’ design, I gradually move them to the handoff page with polished pixel-perfect UI. There still a lot to consider to make the developer’s life easier — all different status, detailed labels, and responsive rules for different screen sizes.
Chris also helped me understand Apple’s accessibility and dynamic type sizes and take it into consideration when designing the UI. That’s something unique for iOS Apps that web design often ignore. For the icons in the App, we used SF Symbols for better accessibility support.
Then it's Chris’s turn to show off his coding magic. We got our Test Flight version 1.0(1) almost immediately after the design been confirmed. It’s easy to share screen recordings and bugs found in Apple’s ecosystem. No wonder more independent developers prefer to build iOS apps.
We tested several rounds internally until no serious bugs found. Then invited friends and family to test. They shared a lot of valuable insight and suggestions to make it better. We tried our best to address their issues by redesign or quick code fix. We know our user research and testing it’s far from enough, but that’s not our blocker to launch.
If you are not embarrassed by the first version of your product, you’ve launched too late. — Reid Hoffman
After all, we would only get honest feedback from strangers who really wants to learn Kanji after we push the app to the public. Some real blockers for any App to appear on the App Store might be a developer account(Apple Developer Program annual fee is 99 USD); a website(required); App icon, descriptions, and screenshots; Apple’s review(can take days or weeks).
Those are the main steps we took so far from my perspective. I bet Chris and Menglin have more stories to tell 😁.
The app launch is not the end, it’s only the end of the beginning.
If you are interested to learn Japanese kanji, join Dekimasu Slack channel. We would love to hear more feedback and ideas from you to make it better. Learning Kanji is challenging, Dekimasu!
