Motion Mobi

USER RESEARCH & UI DESIGN

Motion Mobi is an internal web tool used by developers at Dogtown Media to keep track of app metrics, report any bugs in the system and log data relevant to the functionality of the client’s product. It also serves as a web portal for clients to keep track of the app usage and metrics from their end.

My Role: During my 10-week internship at Dogtown Media in Summer 2018, I was tasked in leading the effort for redesigning the Motion Mobi website. I was responsible for identifying the key issues with the existing platform and coming up with new designs to tackle them.

The Problem

Motion Mobi’s interface looked quite outdated and lacked some functional aspects which hindered both the developers and clients use of the portal. The UI was confusing and information presented seemed quite disorganized. The VP of Engineering at Dogtown wanted the portal to reflect UX best practices to enhance the flow and improve its usability over all.

The Process

Heuristic Evaluation

I conducted a Heuristic Evaluation of the existing platform to get a sense of what was not working with the current UI.

KEY TAKEAWAYS:

1. Lack of error preventive measures or indicative states
2. Weak information hierarchy
3. Outdated UI
4. Confusing Navigation

User Research

I also spoke to employees at Dogtown to find out abour their experience with the portal to note down key pain points with the platform and problems incurred with the users. Most of the problems aligned with the findings from the heuristic evaluation.

Ideation & Wireframing

After using all the information collection from user interviews and the heuristic evaluation, I designed low fidelity wireframes to play around with redesigns for the portal.

The Redesign

The final redesign for Motion Mobi incorporated a clean and intuitive user experience with an over all modern look for the dashboard. The main changes implemented within the portal included the following:

CONSOLIDATED NAVIGATION BAR

The original design had a main horizontal navigation on top and a vertical secondary navigation on the left of some pages. This was quite confusing for users because both the navigation bars looked very similar. Hence, I decided to consolidate them into one vertical bar for quick and easy access.

BETTER VISUALIZATION OF DATA

Data visualization lacked distinction due to weak font hierarchy and structure. I added a few changes in typography and layout to make the numbers stand out so users have the ability to scan the important stats in a quick glance.

ERROR STATES AND CONFIRMATION BOXES

Multiple error states were added to guide the user with any errors incurred during the sign up process through specific indicators. Confirmation boxes were also set in place to prevent the user from making any mistakes by accidentally clicking certain buttons.

The Redesign