Designing a Mobile App Refresh

Designing and implementing a mobile app refresh • 5 min read

Is there always a need to redesign?

My Role

Leading UX design, and assisting React Native implementation where needed

5 weeks

Project Time

While at Signaturize, part of my role has involved in reviewing the initial prototype and app and then building on what we've created to flesh it out into a full product.

The challenge

In 2019, the product we were developing was for creating and designing 3D interiors. Over the course of development, the React Native section of the app (which was used for managing and browsing your projects) had been built up to cater to all basic functional needs.

However, this had led to screens being overpopulated with information; little priority given to the user flows that we were trying to promote.

And though the existing interface and experience had been initially designed, the process for implementing this often led to additional functionality not being covered by the design, which would break the iterative design process.

Research

As we were yet to go to market, the extent of the user research we could do was limited. However, we could perform limited usability tests with a handful of responsive enthusiasts.

More information on the research gathering stages can be found here. The key findings were as follows:

Users wanted better identification on their projects. Generally, designs would be distinct, users felt that despite their differences, all of their projects could too easily be confused with each other.
Users were focused on their projects and designs, and in the short term were less interested in finding out what inspirational material we had to offer to help them design better interiors.

The improved homepage empty state, and Explore page

Focusing the scope

One of the key takeaways was that the app needed more segmentation and clearly defined areas for different tasks. While the product had many sections, there was very little visual delineation between them. Additionally, projects were presented to users but were still complex to actually open, despite that being one of the main goals.

Solutions

We came up with the following solutions:

Adding an App Bar. A simple addition for improving the navigation throughout the app was the addition of an app bar. Though initially it had been ruled out, it was clear with the continual growth of functionality, and the future roadmap, that a simple menu was too complex for most users.

Creating a distinct user space for personal projects. This allowed users to enter the app and focus on what mattered to them, putting user choice first.

Introducing the "Explore" section. Developing naturally from creating a distinct user space, it made sense to have a section exclusively containing content provided by us. Using terminology users are familiar with (Explore can be found in many products), it gave us an opportunity to flex the limits of what can be achieved by the app, without overwhelming the user.

Improved and interactive empty states. Adding an interactive element directly into the empty state allowed us to speed up the user's first experience within the application, drawing them straight into a create flow. It also let us educate users by signposting a section of the app that they would otherwise be unfamiliar with.

Learnings

There were several key takeaways from this work. A primary one was that although designs and flows may already exist, just because they can be changed doesn't mean they should be.

We ended up retaining many flows, and simply redesigning layouts because at its core the flow worked, it just wasn't quite displayed correctly. We could've instead spent time in other areas rather than attempting to redesign an area that was working well.