INTRODUCTION

For my Graduation Project at NID, I interned as a UX designer at Grow

Initial Brief

Design the desktop web application used by Nutritionists ('Experts') and their Managers (Head nutritionist, Customer relations manager)

Deliverables

Research and Analysis, Ideation, Wireframes, Design system, Style guide

Side Tasks

Review Customer mobile app, Design Landing pages, Analyse Marketing Funnel

Existing Web app

The existing one is essentially a chat application. It is not built to suit the user's need.

DESIGN PROCESS

Inspiration

Double Diamond design process, Elements of UX for web, Lean UX and Atomic Design

ITERATIONS

Iteration 0

This was a two week design sprint to jump start the project. Carried out contexual enquiry and interviews. Prototyped the top IA and chat screen.

View MarvelApp prototype

Iteration 1

Studied competitors and business software. Explored interaction metaphors.

Various ideas for chat screen and top IA were tested with uses. Feature scope was finalised with stakeholders.

View Marvel Prototype

Iteration 2

Analysed Users' Tasks through Remote research and Quantitative analysis.

Chat process, Diet chart creation process and Payout process was mapped.
To-Do list and Notification design were identified as key solutions

Design was prototyped using a sequence of wireframes and tested with users.

Iteration 3

Automation was added key solution and UI was improved.
Each user flow was tested using an extensive prototype (discussed later)

Iteration 4

Worked on visual design and tweaked UI

RESEARCH

Discover

Identify Question to answer (or Hypothesis to validate)
   Select Research method(s)
     Plan Research (Create Prototype, Questions)
        Conduct Research
           Analyse

Analyse Existing system:

Heuristic Evaluation of current web app

Study of Online and Offline Artefacts

Analyse complaints given by experts from the bug tracking sheet

Analysis of competitor apps (fitness, nutrition apps) and enterprise web apps (CRM, team communication, task tracking, Marketing softwares) on mobile and desktop platform



Analytics:

Looked at the chats of all the clients that registered on a particular day. Applied Critical Thinking about the Marketing Funnel and ways to improve conversions. Revisited them after a month.

Analysed Expert’s performance from two month's data

Qualitative Research:

Semi-structured In-person and Chat-based Interviews with users and stakeholders

Contextual Enquiry

Was part of the Nutritionist WhatsApp group

Read chats, analysed them

Got screen recordings of user’s working, Analysed it

Got hotkey data, Analysed it

Empathy - I chatted as Nutritionist, as a listener on 7cups website

Became a client to the company and to a competitor to get the client's perspective



User testing methods:

Participatory Design

Cognitive walkthroughs

Unmoderated Remote Testing using prototype

RESEARCH LEARNINGS

Design Considerations

The design should load fast and work well on a slow internet connection

Experts should see the pings asap even when they are in a different browser tab or screen. They should be able to quickly switch chats.

UX KPIs

Time on Task - Reduce time spent on Picking chats, Pitching plans, Following up, Bulk messaging, Creating Diet charts

Time on Task - Increase time counselling clients

Task completion - More number of tags and notes filled

Immediate reply from Experts to new chat messages

Improvement in ratings in Play/App store - lesser complaints from new customers about no one replying on the app

Paid get good experience - prompt reply, diet charts

STRATEGY

Stages

Design Goal

Design for Stage 2 : Chat with Experts with basic automation and scripts

Design
Solution

Bots that Automate mundane tasks (‘donkey work’) that expert’s do

Bots that monitor status of various processes and create to-do tasks and escalations

New-ping notification in all screens (in bottom bar, favicon, browser notifcation) so that experts do not miss it

A To-Do list for the satisfaction of 'checking off' tasks. Useful for reminding and tracking experts
The tasks are populated by the Bots and manager

Make the process of pitching to new chats faster and easier

Make switching between chats faster through automatic chat summaries

Ensuring paid clients get correct coaching by means of a 'Client Record'

Make it faster to create and edit diet charts in a structured data format needed by client app.

A Calendar view to know when to give diet charts and do manual follow ups.

A Clients view with search, lter and Bulk Message. Experts can quickly check client details and chat with client from this screen itself

Quick Analytics that show daily count of chats picked and monthly conversions. Serves as an indirect leaderboard to motivate experts

Integrated payout calculation, supporting manual corrections. Shows names of experts who delay the payout process for entire team (public shaming)

Manager Dashboard for monitoring escalations, chat load

Expert's performance screen for Manager

System Design

INTERACTION DESIGN

Nested symbols in SketchApp were used

Json data plugin for randomising different data fields were used

The constituent design elements and UI patterns were identified.

Site Map

Proposed Scenario and Wireframes

Proposed user flow

Wireframes created for each user flow to user testing

View UserFlow and Screens in MarvelApp

View UI Components and Details

Interactive Prototype

'Manually changing the date of the Next Diet Chart' use case was tested using an interactive prototype

View prototype in Framer

VISUAL DESIGN

Design
Language

Material design language was used as starting point.
The concept of Elevation and shadows was used. Bold colors and animation were not.
The focus was on user tasks and minimalism for followed to reduce user distraction as this is product with sovereign-posture

Below image shows the elevation of various UI layers

Mockup

Below images shows the mockup of the chat screen and Manager's Dashboard

RESULTS

Since the proposed design is under implementation, the UX KPIs cannot be measured. However, the user feedback on the design was positive.
I worked with the dev team to get important features into the existing system

Creative Commons License

© Shashank Balaji