"Bteam is a web platform that revolutionizes the way people within the shipping world collaborate, manage their projects and organize their professional lives. Its core consists of five interconnected modules: Messaging, Channels, Cases, To Do, and Addressee; resembling the tools of a novice integrated digital office."
Product Research
Information Architecture
UI/UX Design
Visual Design
Web/Mobile Prototyping
Michael Anastasakis – Business Specialist
Benefit Software (2016-2017)
I started as UI/UX designer, and as I was getting involved, moved towards full product designer. My major additions to the project include: setting the design foundation for the mobile app, designing the "To-Do" module and its integration to the rest of the platform, and redesigning the architecture of the Channels and Addressee modules. My work produced over 150 mobile wireframes
and 40 web elements, and dozens of pages of product research, analysis and design guidelines.
More than 20 storyboards covering different scenarios for using the app were created and analyzed. The scope of this stage was to asses how the mobile app will complement the web app, and examine how the system will be used both from the comfort of an office chair, as well as the conditions inside a vessel.
Storyboard Example: Handling an incident (defect) on vessel with the use of a Case
Through system analysis, the app was broken down to simple building blocks and the inter-modular interactions were established. After integrating "To-Do" and making final alterations to existing modules; the app's sitemap was created in order to set the main objective for the prototyping stage.
Sitemap of the mobile app, created at the end of the planning stage
For the first step of the prototyping process, all wanted actions and functionality were put together in basic hand-drawn sketches. Through this stage a preliminary UI architecture was created, which later inspired the creation of the first low fidelity mobile wireframes.
Visual Thinking and Notes regarding the UI of the mobile app
User navigation analysis was performed on low fidelity wireframes. Many different scenarios of what the user might want to accomplish through the app were taken into account. The data collected at this stage was later used in order to optimize and shorten the user paths where possible.
Mobile User Flow Example: Scenario where after receiving an email reply, the user checks some details (i.e. attached documents) inside the Case to which the email conversation is linked to. Then, adds a new comment to the channel in order to inform teammates, and request reply in order to be informed about new developments.
Web User Flow Example: Scenario where starting from a personal To-Do item, the user wants to check the whole task sequence of the project.
Below is an interactive demonstration to showcase the work made on the web app: the integration of the "To Do" module, the redesign of the "Case" dashboard, and the incorporation of the quick access side bar are only a few of the additions made.
Scroll down to see a full Case example, navigate to the "To Do Browser" tab; or access the Channels side bar (bubble icon, on very top right).
