Bella Scena

Overview & Users

Bella Scena is a multifunctional productivity app brought to you through the folks at Wonderly Software Solutions, an entity deeply committed to designing and developing software that will have a positive impact on humans.

Primary users for Bella Scena are individuals and teams looking to boost their productivity in a meaningful and less chaotic way.

Challenge

The main challenge for this project was to find a way to bring clarity, meaning, and responsible productivity to people across businesses and organizations all while focusing on the importance of human-centered design.

Solution

Design a web app bringing together a calendar environment, to-do list functionality, and a brand new approach to organized meetings aimed at creating a calm and effective approach to personal productivity.

Methods & Deliverables

Exploring User Needs

User Research & Testing

We utilized the Maze web app for online design testing and reporting to help us work through usability investigations for several different prototype flows. This provided a way to sort through different functionality options for various design iterations and narrow in on the best setup and environment for future users of Bella.

We included Typeform surveys to round out our usability investigations with Maze. This allowed us to supplement Maze analytics and reporting features with open-ended and more in-depth kinds of questions related to our design prototypes.

Brainstorming Initial Designs & Flows

Sketching

We relied heavily on sketching and whiteboarding throughout the project to explore and iterate on our design ideas. Weekly in-person design meetings helped us with brainstorming our thoughts and provided us with time to draw out components, screens, user flows, architecture, etc. After our sessions each week, we used the invaluable sketches to create our wireframes, prototypes, and final visual designs.

Creating Screen Outlines & Layouts

Wireframing

For some of the creative ideas we were working on during the project, it was important for us to create low- to mid-fidelity wireframes before moving on to full visual design prototypes from our sketching sessions. In some cases, we created a small set of wireframe flows with different functionality or interactive elements for the same basic environment within the app. This allowed us to talk to existing users about the different flows and really narrow in on specific and desired use of the Bella app.

Setting Up Interactive Flows

Prototyping

Throughout the project, we worked on the creation of a large set of screenflows that show different creative ideas and functionality for the various parts or sections of the app. We mapped out use scenarios and situations in our prototypes to show how users would interact with Bella on a daily basis and beyond. This allowed us to tell various user stories through the various prototype flows. For this particular project, we chose to create a hub or index screen that served as a starting point for all prototypes using a Sketch to InVision workflow. The image shows the prototype network we created with our screenflows.

Finalizing the User Experience

Visual Designs

The following are selected screens from the final visual designs for Bella Scena.

Calendar & To-Do List

Allows the user to see an overview of their list of to-do’s as well as view their 5-day, 7-day, or monthly calendar. This screen serves as a sort of a calendar and to-do dashboard for users.

Instant Meeting

A meeting that can be created “instantly” for simple note-taking, document sharing, and participant invitations.

Create a Meeting

A more robust, planned meeting that can be created with detailed meeting information, individually created agenda items, document sharing, and participant invitations.

Live Meeting

After the create meeting process, users start their meeting as scheduled with timed meeting tracking, a focus on the agenda, and live, shared note-taking within the meeting for all participants. To-do’s can be created for meeting participants to review and accept for their own to-do lists.

Project Summary

Bringing together a to-do list, a calendar, and a variety of organizational meeting-types using a human-centered design process was the main objective for this project. Through intensive weekly brainstorming, planning, sketching, wireframing, and prototyping, the Bella Scena app was created. Personal productivity will have a new friend in Bella.