Travel Log: User Flow and UI Design

This is the second part of a series of articles on the development cycle of a react native app. You can find the first article here.

Step 3: User Flow

User flow, according to this website is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product. Now that we have clearly stated the features our app has (a.k.a the expected user tasks), we can start to think about how they might go about accomplishing them.

This, I would say, is the most important part of my application development cycle. I will be referring back to this step multiple times in the future while I develop the app state, the database, and also the redux actions. It is however not complete by itself, so I will be going back and forth between this step and the next.

This is step is also important to develop tolerant systems. In mobile and web development, you would want your application to be as tolerant as possible. This means even though the user makes a mistake and doesn’t take the expected path, they should still be able to accomplish the task without facing any hindrances. For example, if a user clicks a button 5 times while the button was only to be clicked once, if not designed with that in mind the app might fail terribly. Imagine if pressing that button would trigger an asynchronous action that is meant to be run only once, it would now run 5 times. But having the expected path of the user along with the actions to be taken gives you an idea of where a user might make wrong decisions. On the same note, an app shouldn’t expose sensitive info when a user takes an expected path like trying to access material behind a sign-in wall before signing in.

That said, let’s get into building the user flow. I usually use Figma to build my user flows; here is one I made for this project. It is self-explanatory, so I won’t bother to explain it here.

Step 4: UI design

This is the part I am most excited about next to coding the app; this is where the app will be alive for the first time. Before my current development cycle, this was the step I jump into, but over time I have realized the previous steps are very helpful in the developing stage.

One of my biggest problems in this step is over-estimating what is technically possible. Sometimes it is easier to design something that can’t yet be coded. So you should also look out for that. For instance, I haven’t worked with maps before in react native, so I will have to come back to modify the design in such a case.

Another pro tip I have picked up over the years is to look for community designs for inspiration. I don’t consider myself a great artist or UI designer even though I know how to use Figma. What I usually do is look for related apps in the Figma community directory for design inspiration. I look for a project that has the feature I had in mind and modify them to meet my needs.

I start my design by selecting a color pallet. Then I would follow the user flow diagram to create the different pages. For instance, by looking at the user flow above, I start with the home page. On the home page, I use a top-down component approach, where I will build react native equivalent components. At the middle of the page, there is the highlight view followed by the navigation at the bottom. I structure these components the same way I would in react. This will greatly help me once I start coding the components.

Here is the result of the draft.

As I said earlier, I used Figma designs from the community directory as a starter. I really appreciate these designers; I am very grateful. If you want to check out there original works here they are. [1] [2]

Stay tuned for Day 3! Feel free to leave your comments, experiences, and anything you want.