Rapid Mobile UI Design – Workflow

How to turn user stories to prototype in 5 steps.


What do we need to do? – An analysis of end users' needs and their environment.


FlowchartA brilliant brief is critical for developing quality projects, especially when it comes to MVP, where we don’t have enough time to rebrief and redesign the whole product during design sprint. So we create user stories in the initial project phase, and then use them as an integral part of documentation (scope of work). As soon as we've got the stories ready and singed off by the client, we can create their derivatives - user flows, which essentially are designated paths for users in the app. Flows give us the big-picture of the app interface and navigation. This phase also allows to pinpoint initial bottlenecks.

How to do it? – Rapid low-fidelity prototyping


Wireframe_example Basic tools like pencil and paper alongside flows are a good start for solving common problems like "which type of navigation should we use" or "should users be able to see this at first glance?" When neuralgic points are covered, it’s time to digitize the idea using Sketch. Screen by screen, button by button, we’re creating rough visuals of whole app. Following that, the designer connects dots into first visual outcome of the previous work done – a simple interactive prototype. For that, we’re using inVision because of its simplicity, easy integration with Sketch, and built-in feedback tools for discussing the solutions with clients  until everybody is happy with the shape of  the product.

Let’s rock! – Look and feel


Style Guide When it comes to this part, we know exactly what users want and how we can help them achieve these things. So, it’s finally time to get some fun! Inspiration, visual research, moodboards, icons, colors, shapes… this, after all, is what makes us tick :) But there is a purpose behind fun. In this case - establishing the style of app using existing examples and the freshly created samples. This approach saves a lot of time, MVP's crucial resource. We try to please our clients in the first stage of the visual design, so usually the first approach is the last. Outcome of this phase are a few screens and icons which will describe the style of the whole app.

Here comes the beauty – Hi-fi prototype


UI AnimationIt’s an extra step, but a truly helpful one. Basically it’s like multiplicating low-fidelity mockups with the look’n’feel just established. The result i a nice, sleek, beautiful prototype, which can be tapped on device much like a fully working app. As in low-fidelity prototype, we gather feedback through inVision and clear every doubt to make you smile :)

„What’s the font? Could you move it 2 px to the left?” How to avoid such situations – Documentation, Assets and UX/UI QA in development.

We've already managed to get everything designed, shiny and polished, but how to transform the prototype into an app? This ain’t an easy task, but we’ve found a way to stop developers from asking questions like those in the section title. It’s called Zeplin - a great little tool for transforming the previously created Sketch files into interactive design specs which are clear for developers. Also, during the previous phase, the designer is checking which of the elements should be exported as separeted assets so developers can focus on features instead of cutting out slices from graphic.

#design #ui #interface #mobile
Kuba Stanek
I'm just trying to make people smile by saving their time, magnifying their joy and helping them avoid their mistakes. I’m just designer who loves his bike and every piece of beauty around him.