We use cookies to enhance your browsing experience and gather insights for performance improvements.
By continuing to use this site, you agree to our use of cookies and our Privacy Policy. Learn more
Accept
Accept
Explore
close button
Need help with your project?
This field is required
Incorrect phone number
Incorrect Email
This field is required
Please fill in all fields
You have not given your consent
Next
Next
Your role in the project
Services
Budget
Please select one option in each category
You have not given your consent
Submit
Submit
several colorful figures
Request sent
Our manager will contact you shortly.
Close
Close
Oops! Something went wrong while submitting the form.

Journy: team management service for merchandisers

MOBILE APP REDESIGN

POWERED BY PURRWEB STUDIO

ABOUT PROJECT

JOURNY is an easy-to-use mobile app that monitors and manages field teams in real-time providing a 360-degree view into all field activities.

Field teams can benefit from route optimizations, dynamic forms for data collection, pre-scheduled tasks, taking geotagged photos, collecting purchase orders and more.

App screen
Map

  • DESIGN

    Julia Sanyuk

  • PROJECT MANAGER

    Sergey Nikonenko | Kate Strokina

  • COPYWRITING

    Sergey Nikonenko

  • DEVELOPMENT

    Sergey Ivanov | Sergey Ponomarev

App logo

PROBLEMS OF THE OLD VERSION:

  • outdated UI;
  • lots of missing features that prevented consistent UX;
  • difficult differentiation between statuses of visits;
  • design was only Android specific. That design can not be used on IOS devices.

REDESIGN GOALS:

  • check users’ feedback and app analytics;
  • refresh the UI but keep it calm;
  • find out missing features;
  • come up with the new filter/status concept;
  • design became universal and can be supported on both IOS/Android devices.
Map
2 BLOCK PAGES / DASHBOARD

Before Problems

  • Inconvenience to check past visits (e.g. 1 year ago) - user’s request
  • No need to show the whole week to a user, he’s only interested in the visits for
    a single day
  • No way to understand visit status
App screen
Two screen

After Solution

  • Added the feature to trace the history back with the calendar
  • Restructured the layout of the whole screen to manage the focus of the user on a specific day and it’s visits
  • Implemented a new color status map and map legend

2 BLOCK PAGES / DASHBOARD

App screen
App screen
3 BLOCK PAGES / VISIT

BEFORESOLUTION

AFTER

  • Designed the rescheduling
    functionality
  • Added ability for a user to
    check the visit location on
    the map
  • Changed the visit layout
    to make it scalable for
    multiple surveys
After app screen

no way to cancel,
reschedule a visit

user can’t track the
location of a specific visit

layout was’t scalable to
add several surveys

Before app screen
Map
3 BLOCK PAGES / VISIT
Before screen

4 BLOCK PAGES / SURVEY

Before problems

  • outdated layout in general
  • a very long survey screen
  • a survey couldn’t be split into several steps
After screen

4 BLOCK PAGES / SURVEY

After solution

  • Refreshed the layout UI: changed the color palette and typography
  • Made the step form instead of infinite survey screen
MOBILE APP REDESIGN
5 BLOCK PAGES / LOG IN

before problems

  • 1
    no need
    to have
    an avatar
    - users didn’t use it at all
  • 2
    menu
    items are
    too
    close and users were
    always mistakenly
    tapping the wrong
    section
Before menu screen

after solutions

  • 1
    increased
    the
    distance
    between
    menu items, kept
    the original icons
  • 2
    got rid of
    the avatar
    in menu
    and replaced it with the app
    logo
After menu screen
MOBILE APP REDESIGN
5 BLOCK PAGES / LOG IN
6 BLOCK PAGES /

PROFILE PAGE

Before profile screen

before problems

an old-fashioned layout of the profile screen

mobile app redesign

after solutions

  • 1
    changed the button size, colors and fonts
  • 2
    polished the ui for profile and menu screens according to a new styleguide
After profile screen After profile screen After profile screen
6 BLOCK PAGES / PROFILE PAGE
7 BLOCK PAGES /

COLOR

Text Color

Black brown - main color #202020

Color

  • Green sea - main color #219653
  • Light steel blue - main color #BFBFDB
  • Gray slate - complementary #627E89
  • Lavender - complementary #E0E0F3

Style Shadow

  • Shadow #D6DCF1; blur-10, y-3; opacity 50%
  • Shadow #8BAE9A; blur-10, y-3; opacity 100%
  • Shadow #C3C3DA; blur-10, y-3; opacity 50%

Complementary color

  • Saffron #F6B830
  • Craiola Fern #6AC259
  • Light carmine pink #FF7573

interaction

The appearance of elements on the site

APP DESIGN UI/UX - JULY 2018

Animation for the slider

journy purrweb

Field teams can benefit from route optimizations, dynamic forms for data collection, pre-scheduled tasks, taking geotagged photos, collecting purchase orders and more.

Businesses can increase efficiencies and revenue by bridging the gap between management and field teams.

Many screens
8 BLOCK PAGES /

ICON

Icons

All icons All icons User