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.
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.
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”
Group discussions on widget layout
Flow chart of widget layout.
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.
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
Designing different settings screens and making a template for fornt-end developers.
Platform layout with the widgets, colour managemnt, menu design and notifications.
Notification screens
Menu functions
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
