Messito Interface

Background

Messito is a subsidiary of FORTYTWO Group. This is an online service where you can send out SMS campaigns and messages to several numbers at once. As head of design at FORTYTWO I was in charge of the interaction and design of the interface. To my help I had a team of talented front- and back-end developers. Here is an outtake of our process and the outcome of the program that is now live on www.messito.com.


 

User cases

We began with setting up several user cases that might occur within the Messito platform. We put together small groups consisting of users and members of the project team. We gave them several SMS related tasks and asked them to figure out solutions on how to solve these problems. What we wanted to find out was what kind of information they needed in order to solve these tasks.

Usecase_messito

 

Use case actions

We went on making a list of all desired use case actions. These were gathered from the group exercise and team- and management input. The major actions were selected and together with the front-end developers we begun to create workflows and customer journeys’ to make the navigation flow that would cater the main functionalities. For us it was important to get a functional base before looking at the visual layout of the GUI.

usecaseActions

 

 Widgets

To cater for all of the desired functionality we deiced to use a widget based platform. In order to understand how to get the functionality we wanted in the widgets we went back and forth between whiteboard discussions and illustrator sketches.

Flow chart of “Adding a recipient”

flow_recipient

 

Group discussions on widget layout

widgetdesign_messito_1

Flow chart of widget layout.

widgetdesign_messito_2

 

Creating a base platform

After sorting out the main functionality we went on to create a base frame for the interface. This phase went through several iterations testing the usability of the platform with the previous use case results and actions.

layout_messito_1 layout_messito_2 layout_messito_3

 


 

Graphical design

We had the base functionality and layout in place. We could now move in to creating a graphical design and the final layout of all the elements in each widget and in the main platform.

Testing different layout flows between screens when sending a message

widgetdesign_messito_3 widgetdesign_messito_4

Designing different settings screens and making a template for fornt-end developers.

widgetdesign_messito_6

Platform layout with the widgets, colour managemnt, menu design and notifications.

GUI_color

 Notification screens

colour-GUI_3_3_warning-signs_flat

Menu functions

D-_BackupMay2014_Shared_6-Messito_GUI_Sketches-Phase-1_GUI-sketch-Messito-meue

Handover

Up till this point we worked side by side to create the layout, design and functions together with the coding. From here the developers took over the project and finalized it for the launch. My final part were to tweak small things and make sure they stayed as true to the designs as possible.


 

Live GUI

The GUI is now live and launched in its first phase. Some screen shots of the live interface.

View it live at www.messito.com

login_live

 

livescreen

 

livescreen2

 

 

 

imac_mockuyp_messito