Project Spotlight: UX Design, Interactive Design, UI/Visual Design
Bella Scena
Calendaring, to-do’s, and meetings all in one productivity app
Project Overview
Combining a calendar, a to-do list, and meeting functionality into one app was a monumental but meaningful project. An agile approach helped a small group to complete brand development, illustration, user experience design, interaction design, and UI/visual design for the project. During this project, my role was focused on the user experience, interaction, and UI/visual design of this web application.
Client: Wonderly Software Solutions
The brainchild and strategy behind Bella Scena was the Wonderly Software Solutions agency. Strong leadership and collaboration from Wonderly were instrumental in the creation of this platform.
Agency: Halftone Digital
Small but mighty Twin Cities digital design and experience agency providing a full spectrum of services including branding, interaction design, and user experience design. Known for inclusive, intuitive, and empathetic approaches to projects. Visit the Halftone Digital Website.
In a 2020 Forbes article, Elad Natanson wrote “the growth trajectory of productivity apps is exceptional. And adoption is proof that productivity apps can and do help. Especially with more and more people working remotely (even pre-COVID-19), apps are essential to bridge physical distances and enable communication and collaboration between workers in different locations.”
Source: Forbes, Are Business Productivity Apps Ruling Our Lives?
Exploratory & Comparative Research
There are many productivity apps that provide various options and functionality such as calendaring, to-do lists, and meeting organization and management. However, most apps don’t approach all three of these major categories in the same interface.
A set of sixteen popular productivity apps is shown here in the visual, along with Bella Scena as the seventeenth comparison app. Of all the apps listed, only Bella Scena and two other apps had specific functionality aimed at the three main categories of calendars, to-do’s, and meetings. These three powerful apps, Bella Scena, Bitrix24, and Google Workspace, are highlighted in yellow.
Documentation and Guidance for Developers
For the Bella Scena project, there were several opportunities to create helper documentation or guides for the developers on the project. One example is the guide for proposed To-Do States in the Bella Scena app. Developers can use this documentation to reference the layout, UI, and content of all To-Do’s in one place.
Our super handy prototype index provided easy access to user flows. The developers were able to quickly find and view prototype flows by area or topic within the Bella Scena environment through InVision. This also helped us with presenting wireframes or high-fidelity designs to our client week by week.
Another documentation example related to the Bella Scena project is the calendar view of various to-do’s and meeting examples to be used in design and development of the app. Again, developers can refer to this guide for quicker and more direct access to how to-do’s and meetings look on a calendar in the app.
The “aim of a productivity app is to optimize productivity and improve your surrounding work environment.” More specifically, these apps help with the following:
Making everyday tasks more efficient
Keeping collaboration fluid
Knowing when you’re running late
Making different schedules work
Embracing diversity in the team
Keeping everyone updated
Tracking real-time progress
Accessing cross-application integration
Enjoying cross-platform compatibility
Ensuring better customer experiences
Source: Vartika Kashyap, 11 Best Productivity Apps to Explore in 2023
Additional Research & Testing
Throughout the entire Bella Scena project, we incorporated planning research and testing into our weekly routine as well as completed testing with beta users every 2-4 weeks. A few notes about our approach:
We looked at a variety of different interactive elements and screens during our testing.
Our testing process was lean but effective and included the stack of tools shown here.
Maze allowed us to focus on the visual elements within our tests with beta users.
Typeform provided an elegant supplement to Maze where we could incorporate more survey-like questions in our testing.
With Loom, we often recorded a walk-through of our interactive prototype flows and showed beta users how a section or area of the app might work.
One of our testing setups using the Maze tool.
Using Typeform to add additional questions for our beta users.
Hi-Fidelity & Interactive Designs
Ethical User Privacy
Bella Scena’s creator emphasized that privacy for the user was very important. Access to privacy information, as well as the End User License Agreement for the app, was included front and center as a part of the Create Account flow for Bella. Users could utilize their Google account to start using the app or create a separate account directly through Bella Scena.
Dashboard for a Calendar & To-do’s
There were three experiences that were core for this web app, rigorous to-do management, a robust and useful calendar, and instrumental meeting creation and management functionality. It was immediately important to find some way for a to-do list and calendar to serve as a sort of dashboard for the app.
Complete To-Do Creation & Management
For To-do’s, it was imperative that this core experience component be simple and easy to use but also complete and multi-faceted. Scheduling functionality was a part of this part of the app to allow users to incorporate tasks into their daily workflow and calendaring activitites.
Delightful Interactivity
Another important area of focus for Bella Scena was to bring delightful interactive and visual elements to the user. Special swiping actions and corresponding visual flourishes for adding to-do’s to the calendar were one example of this.
Start a Meeting, Instantly
For meeting functionality, one type of gathering we created was an Instant Meeting. Easy to start, easy to finish, and easy in between was what this meeting was all about. Simple note-taking, participant invitations, and document attachments were included.
Meeting Creation Made Simple
There were several areas to focus on when we reached adding meeting creation to Bella Scena. Functionality included timed meeting sections, scheduling, information, and organization of the meeting contents, participant activities, and finally, corresponding related documents.
Seamless Meeting Management
Allowing meetings to run smoothly was a major goal for the Bella Scena app. Along with expected meeting functionality, we wanted to continue to go a step above what the user expected with a meeting time clock as well as agenda items listed along the top of the meeting for easier overall meeting time management.
Creating Bella Scena from almost the very start was a privilege and an exciting adventure. I learned about the importance of perseverance and how iterative design leads to better digital product experiences. This project also introduced me to lean and agile approaches to software development.
Lessons Learned
Next Steps
This project was certainly an important endeavor for all persons involved. Additional time to work out more task and user flows would have been interesting and helpful. Though we completed testing throughout the project, additional analysis of the entire digital product would have been useful as well.
