Analyze your UI made in Sketch.

You have finished your app screens in SketchApp and ask yourself “Will my design work for my target group of people?”. But how to measure your design and it’s usability and the resulting user experience? Maybe this article will give you the answer.

Design, Test, Analyze

Some month ago I discovered a powerful tool called QUANT-UX. While it is still in beta, they published a Sketch plugin some days ago. QUX let’s you measure the usability of your prototypes, wireframes, designs and so on. The very small app example which I want to design is a simple shopping app for women. There they should buy clothes, shoes and accessoires. The app design will not go in detail because I only want to focus on finding the right product in short amount of time (no real world example).

First things first: Research and persona.

During my research process it is good to think about my target group. For my example the persona group should be women in the age of 35–50, married, with 1–2 children, with job, experienced in shopping on a mobile device. As this is only a quick example for this article, your persona in real world should be more accurate.

Design a wireframe/prototype in SketchApp.

If you have your final app already finished you maybe don’t need this step. But if you want to test for example the onboarding of users with different options, a wireframe or fast done prototype is the right point to start. For my user journey I made a wireframe in sketch with four screens.

App screens wireframed in Sketch.

After finished the wireframe I want to upload my screens to QUANT-UX. Luckily they offer a plugin to upload all artboards. You can download the plugin here: https://quant-ux.com/sketch-prototyping.html

During export you can also scale the artboards before they are stored in a *.qux file.

The task for user during test (story).

for my short article there are only two tasks which the female user out of my test group (persona group) has to fulfill:

  • At first she should log in
  • After logged in, she should buy a green shoe by navigating through app and clicking the green shoe which is added to basket.

Create project, upload file(s) and connect the story.

Since QUANT-UX is in open-beta you can test everything for free. After login you can click “Create a new Prototype” to add your first project. The user interface of QUANT UX is clean and self-explanatory.

New project

In project dashboard simply drag and drop you generated *.qux file to your browser.

Dashboard of QUANT-UX

I will not go in detail with all the powerful protoyping and design tools offered by QUANT-UX but your “start-screen” should be defined as a start screen (sounds strange but this is your first screen in simulation ;-).

Define the start screen.

Connecting the screens is easy and done fast by linking layers or creating hotspots. A big point for QUX is, that you can validate the form data entered by your test user or link the screens via a logic element (at the moment “or-connector”). This comes in handy when you have some select dropdown list and let the user choose where to go next.

Connected screens

For my small example everything is connected and now I can start my test by sending the project link to my test group (could be everybody around the globe). You can also define the flow of a task by recording the steps of this task.

Analyzing your test results.

After your test group has finished the test you can analyze if your task were fulfilled or if the user journey was fluent as expected. If not the results will help you to find out where your UI could be optimized.

User Journey
Scroll Visibility

Summary.

As I stated at the beginning, this article shows an workflow of how to analyze you UI’s created in SketchApp. It is not a real world example (in case of everything :-) and the possibilities are nearly endless. You saw, how easy and fast it is to upload you artboards to QUANT-UX. With this tool you have the chance to test on every stage during your design-development.

Analyzing your design while designing will save you a lot of time!

Share YOUR test app’s in comment section here. Would love to test them!

Show your support

Clapping shows how much you appreciated Sascha Lichtenstein’s story.