Fast Mobile App prototyping using InVision Studio + Expo

Written by Vladyslav Zavalykhatko — Mentor at HackYourFuture

Preparing your idea for showing to a customer or a potential user of your app can be difficult. Words don’t deliver a sufficient level of understanding, mockups drawn on paper may look cheap and obviously poor, still investing a lot of time in the early stages is not always a good strategy. While the main reason for a startup failure remains launching unnecessary products, the question of showing something the earliest possible and getting precious feedback is utterly relevant.

Different ideas may be tested in various ways. Depending on budget, time, and complexity, a team can stick to creating an MVP, a presentation with core features shown, or creating a simple version of a product on a different platform and gradually evolve it. Thus, one smart colleague of mine once mentioned a messenger bot as a perfect tool for testing a business assumption. Here, though, we will try to look at one common use case — idea for a mobile/web app. We will create a UI and a basic prototype for a habit developing mobile app.

This article will neither dive deep into programming, nor into UI/UX, but rather will be a guide about how to start. It is highly recommended to have basic JS + React understanding.

Modern software and libraries can leverage the time a company possesses significantly. One of the questions to answer nowadays is what exactly is the best to use for the task in front of you. The abundance of tools might cause bewilderment, so we will stick to one specific set which can help us to move from an idea to a prototype in a short time (the selection of instruments is primarily based on my experience, but I’ll try to mention some alternatives). We will create mock-ups in InVision Studio and a native prototype with Expo. Sometimes you could skip the first part completely, and jump directly into coding, changing elements on the fly to reflect new ideas. I personally find it tedious and not productive. Even if the final implementation isn’t identical to the UI from initial idea, having it as a separate, fast-editable draft, brings a lot of convenience and clarity.

Making interactive write-frames with InVision Studio

InVision Studio is a screen design tool easy to start with. It has a free plan for 1 project and the pricing at the moment of writing is quite affordable if you ever need more. As an alternative, one could use Figma or Adobe XD. The UX community doesn’t seem to have a strong consensus on the best tool yet.

Before moving farther, make sure you’ve installed InVision Studio, signed up, and created a new empty project with an artboard for mobile.

One awesome boost InVision provides is an easy access to ready-to-use elements. Contra UI Kit is a nice set of components for building wire-frames. After downloading, we can import the file to the library and use the elements from the components tab. By combining two elements from the list (Listing / general and Screen title / Home Title — Center), we can make the list of our habits:

InVision Studio with the first wire-frame

To get the full control of editing components, we have to detach them from the originals (Right click -> Detach Component). I had to do it to remove the subtitle from the list item and to drop the left icon from the header.

The second wire-frame will present the details of the item and some actions available for it. I made it using Progress, Text 7, Normal Title — Back, and Share. InVision Studio also allows us to add Interactions, so we can make our design clickable.

Adding interactions

To try the interactions and see how the design will look, we can use the preview feature, and for sharing we can publish to InVision. After publishing, you will get a link similar to this one.

At this point, we have a clickable design to be used as a foundation for our native prototype built with Expo.

Native prototype for mobile

For creating a prototype, we will use React Native, which is a great piece of technology by itself. It has been touted by a strong community around it backed by Facebook as a tool to not only make your Android/iOS apps based on a single code-base, but also as a way to reuse the code between mobile and web. While the second statement may require some hassle, the first one rarely raises any questions (except occasional statements from big software companies). Expo alleviates the aforementioned problem with creating a web version and removes difficulties around support of native layers of the apps (until some point, you’ll never have to open Xcode/Android Studio and no knowledge will be required for start). While being a relatively new player, Flutter is gaining popularity as a React Native alternative. This article does a good job comparing them, though the main point in our case is that starting with RN is much easier because of the JS language and React architecture.

The code I came with is available on GitHub. It’s pretty simple if you’ve already got some experience with React. Next we will follow the development process and check the main parts created.

As a starting point, you will need an editor of your choice (I prefer VSCode), NodeJS, and Expo.

While creating our project using expo start, we should select Managed workflow, blank. It will give us a bare needed setup.

Now, to develop the app farther, we will utilize react-navigation for routing in our app, and react-native-elements, which gives us a lot of prebuilt components. To install all the dependencies run:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack react-native-elements

We will need 3 files in total to implement the app — a root of our app with the navigation set up, and a separate file for every screen. Farther this might be improved with navigation being put in a separate file.

The Root with the navigation is easy to build by following the tutorials for react-navigation and stack-navigator (this one implements the type of transition we designed in the first part):

const Stack = createStackNavigator();
 
export default function App() {
 return (
  <NavigationContainer>
  <Stack.Navigator>
  <Stack.Screen name=”Habits” component={HabitList} />
  <Stack.Screen
   name=”Habit Detail”
   component={HabitDetail}
   options={({ route }) => ({ title: route.params.item.name })}
  />
  </Stack.Navigator>
  </NavigationContainer>
 );
}

We have two screen definitions wrapped in a NavigationContainer, one of them contains additional options prop passed to set the title of NavigationBar. React Navigation has a friendly, still comprehensive documentation, so it may be used as a nice starting point to dive into it if needed (and to understand the code better).

HabitList contains a list of hard coded items added to have some content in our app. The components look like this:

export const HabitList = () => {
 const { navigate } = useNavigation();
 
 return (
  <FlatList
   keyExtractor={(item, index) => index.toString()}
   data={list}
   renderItem={({ item }) => (
    <ListItem
     onPress={() => navigate(“Habit Detail”, { item })}
     title={item.name}
     subtitle={item.subtitle}
     leftIcon={
      <Image
       style={styles.image}
       source={
        item.done
         ? require(“./assets/habitDone.png”)
         : require(“./assets/habitInProgress.png”)
       }
      />
     }
     bottomDivider
     chevron
    />
   )}
  />
 );
};

FlatList represents a list of items, ListItem is react-native-element’s implementation of the items themselves. For every item we add an onPress event, which will navigate to Habit Detail screen with an item attached as a parameter. Image implements an icon for a task.

For the HabitDetail screen, we use several Text and Image components. The whole code on GitHub also contains styling, which does the whole trick with placing the elements on the screen. Worth mentioning, that in this version I didn’t create real components for progress bars, but if there is an interest, this and this libraries look promising.

export const HabitDetail = ({ route, navigation }) => {
 const { item } = route.params;
 
 return (
  <View style={styles.container}>
   <View style={styles.infoContainer}>
    <Image
     style={styles.icon}
     source={
      item.done
      ? require(“./assets/habitDone.png”)
      : require(“./assets/habitInProgress.png”)
     }
    />
    <Text>{item.subtitle}</Text>
   </View>
   <View style={styles.progressContainer}>
    <Image
     style={styles.image}
     resizeMode={“contain”}
     source={require(“./assets/progressFull.png”)}
    />
    <Text style={styles.text}>{“No skipped days since added”}</Text>
    <Image
     style={styles.image}
     resizeMode={“contain”}
     source={require(“./assets/progressProgressing.png”)}
    />
    <Text style={styles.text}>{“6 more days to form a habit!”}</Text>
   </View>
  </View>
 );
};

At this point, we have an app with basic logic and navigation built for mobile. Without a doubt, it needs design tweaking, but we’ve made a nice foundation and to demonstrate the original idea. As Expo supports web as well, one of the farther steps can be to add different styling based on a platform and extract a web-app. To show our app to somebody else, we can publish it.

The overall process after we got an idea might take around ~8 hours, which is a great time-investment for making a simple, still working prototype.

From this point, the sky’s the limit. Most likely along with improving UI/UX, you might look into adding API with NodeJS or Firebase. A strong advantage of the work done so far is that the prototype can continue evolving into a real app. Expo at the moment of writing has already tons of prebuilt components, and if at some points native layers have to be accessed, it provides an ejecting feature to make it possible.

Links

The complete code can be found on Github.

Thanks for reading. If you got any question feel free to reach me over Linkedin or Twitter.