Redesigning sloppy.io’s web app

Dashboard | sloppy.io’s redesigned web app

The Existing Web App

  • Dashboard view showing a user’s projects & 1-click templates for quick deployments
  • Create project wizard view allowing creating a new project with multiple services & apps
  • Existing project view allowing to edit the project, analyze statistics, and view logs.
  • Account view where the user could update their profile & manage subscription
Old Designs of the Sloppy.io’ s Web App

My Role

My tasks

  • Gather & evaluate user requirements in collaboration with stakeholders
  • Collect user feedback, making a list of problems in the existing user journey
  • Illustrate design ideas using hand sketches as solutions, followed by wireframes & prototypes
  • Design custom icons & illustrations
  • Achieve visual consistency via harmonious UI elements & style guides

Challenges & Constraints

  • Being a designer, understand the existing product from the point of view of an expert developer
  • Introduce visual hierarchy on the dashboard, which contains a plethora of user actions
  • Reduce visual clutter while managing expectations of existing shareholders
  • Make educated assumptions due to lack of user research & analytics
  • Time to improve the web app was limited as it had to be presented in front of the investors soon.

Problem Statement

Business Goals

  • Retain existing customers by solving problems they face with the app.
  • Provide good UX & make the design aesthetically pleasing to impress & convert trial users into subscribers.

User Pain Points

  • Missing helper tooltips & basic information when creating a project
  • Missing feedback for actions
  • Missing form validations
  • Cluttered UI, confusing at some places in the user journey
Existing design for “Create a Project screens” vs Improved Designs

Rationale for redesign

  • Improve the overall user experience by making sure users can complete their tasks without friction.
  • Follow the latest design trends providing a modern & familiar experience to the users.

Ideation

User Flows

User Flows

Sketches — Pen & Paper

User Dashboard Sketches

Wireframes — Balsamiq App

Finalised User Dashboard Wireframe
Final wireframes of Account Pages & new Features like “Volumes”

Designs — Sketch App

UI style guide

Visual Designs

  • Focus on clarity
  • Aesthetically appealing
  • Easy to understand & use
  • Feedback elements like tooltips, confirm dialogs, alerts, etc.
Create a New Project
Visual Design of the web app

Testing

Testing amongst the team

Deploy a new project using “clickstarter” feature

New Features Added

  • Billing Screens with substantial improvement in Subscriptions
  • New Team feature for users to share project access with other users
  • Changed quick-starters (create a draft with pre-filled information) to click-starters (deploy predefined projects with one click) so that the deployment success ratio is higher
Billing & Subscriptions
Subscription & Updated Billing Screens
Update address & payment methods in Billing Screens
Team Overview Screens

Final Words

Results

Key Learnings

Things I could have done differently

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store

Srishti Matta

👩🏽‍💻 Currently Converting research into solutions, creating thoughtful & unified interfaces & systems. 🔍 Also looking for a full-time job in Berlin.