There are two things that make a product developers worry. What is the technology that you are building, is it efficient enough, does it function well, is it innovative, etc.. And second, what is the user experience of it? The tech may be killer, but does the experience justify it. UX’ importance has increased many folds in this decade. It is well understood that the only thing, if the user really has of your app, is its experience.
Gone are the days when we will take certain liberties in the interface because the software doesn’t allow some workflows. We used to develop software and then make the UX. We can’t do that anymore. All the right paths need to align properly, all the messaging needs to be perfect, and thus the UX design should be driving the software development. This calls for a tool where you can design the UX of the app before the software development is planned.
There are quite a few such available online. I use figma.com as it is a free online web app. Follow these simple steps to get started and feel comfortable with it within minutes.
Simple Ok Cancel App
Step 1 – First create a project and bring yourself to this screen. Use the top left tools to create a frame and choose it’s dimensions. Now create a rectangle, and a text box inside it. Select them both, and group them together.
Step 2 – This is where magic starts happening already. Select your group and right click on it, and select “Create Component”. This will create a package or a unit of your group, which can be repeatedly used in the rest of your project.
Step 3 – Now your button unit is ready, duplicate it and create a “Cancel” button. Note the cancel button’s icon. It is an instance and carries all properties of the source button, unless you override something, for e.g. here the text. Wow!
Step 4 – Great. Now let’s create two more screens. You can do so by duplicating the existing screen. Make them in a way that they represent what happens through your two buttons.
Step 5 – Interesting stuff now! Select the main button and Choose Prototype. You can point that button to navigate to one of your screens. Amazing.
Step 6 – Map all the buttons to the screens you want them to go. Fantastic! Your UX prototype is ready for testing.
Click on the top right “play” looking button and you will get a test run of your UX in another tab. And it should work like below.
All that was possible within 10 minutes, and you have a functioning user experience of an OK-Cancel app ready to test. How awesome is that?
I have not even mentioned the effects like shadows, strokes, rounded corners. You can also add images, and put things inside a scroll area. Basically you can design your entire app before even thinking about what libraries you want to use for development. Even better, the functioning prototype can be handed over to the programmers to make their life easier. Hope this was of help, let me know your thoughts in the comments. Thanks!