Day 108 — Upping our App Game

Today I refresh app content & styling and have some fun with animations

Today I did a bunch of app styling and content tweaks to reflect what we’ve learned in our last few user tests. In general, it means making the app more fun — with animations, gifs, better styling, and more engaging content.

I’m by no means a developer, so I’m a bit out of my league, but:

  1. I enjoy doing it.
  2. It’s fun to learn.
  3. It needs to be done.

Armed with these reasons, I had more than enough reason to dive in. Plus, using Expo and the Simulator, it’s easy to get quick feedback on code so I don’t break anything (too much at least).

Here’s what I did today.

Setup

Running on Multiple Simulators:

Right away I realized I wanted to see the responsiveness of our design on multiple target platforms. I have a few different devices I use, but using the simulator on Mac is also great, and I found this really nice way to boot up multiple simulators at one time.

#!/bin/bashdeclare -a simulators=(“FCB30E21–1523–478D-80C4–0BD8182B0B7F” “43A7FA7B-FE4C-4486-BF34-F76E96B1FBC4”)for i in “${simulators[@]}”doxcrun instruments -w $i#xcrun simctl install $i ~/.expo/ios-simulator-app-cache/Exponent-2.14.0.appxcrun simctl openurl $i exp://127.0.0.1:19000done

Source: https://stackoverflow.com/questions/53924934/can-i-run-my-expo-app-on-multiple-ios-simulators-at-once

Trying to type up that first one, I found this simple hack and thought it was also useful.

Cmd + Option + 6

Source: https://medium.com/@neotheicebird/how-to-add-code-snippets-to-medium-cc7ca5c3fbe2

Stuff I Fixed

Without adding a bunch of new features, I wanted to integrate VideoAsk as a more engaging video experience to our app. Initially it just didn’t really work with our existing video display: it would play the video but responses would not show up.

After some searching, I found the help I needed and made this fix:

allowsInlineMediaPlayback={true}

Source: https://www.videoask.com/help/embed/360043110611-embed-your-videoask-in-native-apps

Poking around yesterday, I discovered GIFs work in our app. Welp, there goes my weekends :).

So I updated our boring splash screen to something a little…splashier :).

Personally, I think square buttons look a lot cleaner, so I updated these as well.

Before:

After:

We’ve been testing gamification in our last few exercises and have heard really good feedback. Because today was generally a day of scope creep in the interest of fun, I took my graphics and created an animation that shows up when users complete a lesson.

This is what we now show after users complete a lesson:

Plus these are sprinkled into the app as an additional incentive.

Eventually, we’ll build this all into the app in code, but this is a nice MVP to easily test out the gamification concept and learn what works / what doesn’t.

This one I discovered while exploring risks for putting our app into the world. It’s completely for liability, and there’s way too much text on one screen. But it’s a start.

I changed the colors for our responses to make them a bit more presentable.

Stuff I broke (and I don’t know how to fix…yet!)

Inevitably, I came across some issues as I was making these updates. Some I was able to resolve but others I had to put down and move on. Most of these are small things that should be easy for a real programmer. I’ll continue on them tomorrow :).

TeachingScreen.js

  • Add Back Button (but not progress bar)
  • Remove top padding so video fills whole screen
  • Disable continue button until video is done (?)
  • Splash screen timing (show for an extra .5s vs. showing loading indicator)
  • Customize button color by screen

AnswerFeedback.js

  • Change button color to white and text to color of response card (currently cannot change text to anything except white)

Animation:

Conclusions:

  • Reverse image/text not working

Other:

  • Move warning screen (black sheep) from Intro module to onboarding flow

What’s Left

I’m really happy with the progress I made today. At times it was a bit meandering, but it’s fun to just explore and be creative some days, and plus the output is already 2x better than what was there before.

Basics Section

  • Add Level Complete Animations (& Achievements)
  • UX Polish for Question Screen Component

Feelings

  • Add Mental Health Q&A Section
  • Add Level Complete Animations (& Achievements)
  • Add Conclusion Screen

Next

  • Add Future Module
  • Add VideoAsk Video

Startup founder surviving in his parent’s basement.