Mobile app prototyping: UX for e-reading with Javier Lianes

Javier Lianes is exceeding user expectations with his prototyping redesign of the Amazon Kindle user interface

Madrid-based UX Designer, Javier Lianes, has been using Justinmind to reconstruct the user experience for fellow e-reader users. A tech infatuate and avid reader, Javier can often be found glued to his iPad, lost in an eBook. But despite his passion for reading online, Javier’s experience with e-reader devices has been quite disappointing.

In our case study, we ask him about his qualms with Amazon kindle – despite the hype – his proposed solutions to design challenges, and how he prototyped these with Justinmind.

Satisfied UX designers make better products

As a freelance designer, Javier is his own boss. This often means working unassisted around the clock to get digital assets and UIs built and sent out to customers. To deliver consistently high-quality designs on time, Javier’s workflow needs to be flawless, and gaining momentum in the UX process often comes down to how efficient his design tools are.

Any UX designer can tell you how important it is to find the right mix of tools. If you’re not comfortable with the tools you’re using, it’s going to show in your designs. And if you’re busy finding your way through unintelligible UIs, you’re not focused on solving design problems for the user.

So when it came to his next big design challenge – redesigning the Amazon Kindle UI – Javier was on the lookout for the perfect tool. That’s when he came across Justinmind.

Intuitive UIs and seamless design experiences

Javier started prototyping with Justinmind whilst at a UX course at the Escuela Trazos he attended in Madrid. He was looking for an intuitive interface that wouldn’t take too much time to grips with.

From the word go, Javier loved how easy it was to get his head around Justinmind. He found all the layers and UI elements exactly as he expected them to be.

“Justinmind surprised me from the word go. It screams clarity, accessibility and quite a departure from current design tools.”

When the time came to get started on his e-reader UI redesign, he took Justinmind along for the ride. His prototype provides an alternative solution to the classic Kindle. Take a look below!

Mobile app prototyping: rubbing shoulders with Amazon’s kindle

Designing the UI for Amazon Kindle iOS

Within no time, Javier was up and running with Justinmind. He used the iPhone mobile app template to design the layout of his prototype’s screens.

Javier wanted to create cleaner, fresher visuals for his fellow e-reader bookworms. In his opinion, Kindle’s dark-themed interface is a little depressing. Kindle opts for gray-tones for its main UI screens and a lighter theme for the reading screen. To tackle the doom and gloom, Javier opted for a light-themed throughout the app prototype. We personally love the continuity!

He then used a combination of Justinmind’s pre-built iOS UI widgets, such as the Status bar and search box, and his own images, to create build up the iOS structure in his prototype. It was as easy as dragging and dropping them to the canvas.

Building out the interaction

Javier focused on slick performance and coherent navigation patterns when bringing his kindle app prototype to life. He wanted to make sure that users could glide through the UI with ease and access their kindle books from the kindle store without wasting time browsing multiple menus.

To keep the navigation flow neat and concise, Javier opted for a bottom navigation bar. It would include just 4 components: favorites, downloads, settings and search icons. Using linking events, Javier started to build out the functionality in his app prototype.

“I loved the simplicity of the drag-and-drop UI elements and events. It was easy to apply them without having a deep programming knowledge.”

To create the scrolling touch screen feature of a kindle reader (to allow for the user to move up and down the screen) Javier used Justinmind’s parallax elements. He added a pinned bottom element to the bottom of the app’s home screen. The pinned bottom is a sticky element and remains fixed even as the user scrolls up and down the screen.

Justinmind Data Masters and Data Grids were an essential combination for this project. He used them to create the chopping cart experience, as well as inventory, bookmarks and user personalization.

The ultimate test: Javier’s user testing process

Javier’s prototyping process includes 3 phases. The first is an exploratory phase where he creates paper prototypes and then observes how users interact with them. The second phase includes an evaluation of the user interactions, and he creates more elaborate prototypes to solve some of the usability problems in the first phase. The final phase is a validation phase, accompanied by a good heuristic evaluation.

User experience: Javier’s formula for delight

“Involving the user in the UX process is the best thing that has happened to design since the discovery of the Golden Ratio,” Javier says, laughing.

Javier works to improve the lay of the land for the user. When asked what user experience meant to him, he responded:

“Imagine a park with several gravel paths. The paths connect and intertwine. They create different routes but are all signposted to the same place.

The wanderer ignores the paths. He finds his own way, searching for alternate routes and shortcuts that will take him to that place more comfortably.”

Just like the wanderer, the user often skips the signposts and creates their own route to get to where they want to go. The best possible route is where great user experience lies – the user journey – and it’s the UX designer’s job to lead the way.

Javier’s UX revolution: discovering the prototyping tool to end all tools

Javier contemplates the shift in the web design industry to user-centered practices, as well as the tools that have made this possible.

UX designers aim to create usable and delightful products for their users. But historically, as Javier recalls, businesses have imposed on designers to focus on the customers with purchasing power, rather than the everyday users.

But we are seeing a shift towards user-centered design, with stakeholders finally taking the end user into consideration. For instance, Netflix took down Blockbuster by treating its subscribers as users, not customers.

With users now at the center of product strategy, it is the designer’s duty to focus product design around the end user. Tools like Justinmind help to meet this need.

For Javier, both low and high-fidelity prototyping is essential for capturing his ideas, identifying errors and making improvements to the user experience. As a freelance designer, prototyping helps him save time, resources and headaches. By working problems out before more complex design and functionality are developed and where errors become quite expensive, the cost-benefit ratio is much higher.

“Justinmind is the tool that helps me take my designs to the next level. I have the freedom to design and get amazing results.”