magicplan is a mobile application designed for creating floor plans and estimating project costs.
Cloud
magicplan Cloud is a feature of the MagicPlan app that allows users to store their floor plans, projects, and related data securely in the cloud. This feature enables users to access their information from multiple devices and locations, ensuring seamless synchronization and backup.
Users
The users of the magicplan Cloud are predominantly project managers from construction or renovation companies. Typically these are non-technical people, which can sometimes create challenges when working with more complex technologies and products. They use the cloud primarily to organize and document all projects in the company, to manage Accounts and Billing, and to organize Workspaces and Teams. Additionally, the cloud is often used to estimate renovation or construction costs, create custom objects, assign tasks and projects to field workers, and more.
Scope
In this project, my primary goal was to improve users' ability to navigate the Cloud platform swiftly and seamlessly, addressing issues encountered with the previous website version. I collaborated with a team consisting of an internal designer (myself), an external designer assisting in developing the design system, two developers, and a project manager. Our deliverables included comprehensive wireframes, website maps, and prototypes at varying fidelity levels, alongside the creation of a new design system. Success was gauged through metrics such as increased task completion rates, elevated project creation within the Cloud, and the expansion of teams using the platform. Recognizing potential user resistance to change, we plan to mitigate risks by ensuring a smooth transition to the new platform version.
Challenges
Outdated Design
The website suffered from an outdated design that not only failed to meet modern aesthetic standards but also hindered user engagement and trust.
Disorganized Site Structure
The menus were illogically organized, making it challenging for users to locate desired information or features efficiently.
Confusing Tables and Statistics
Complex tables and statistics presented on the website were often unclear and difficult for users to interpret, leading to frustration and cognitive overload.
Process
Internal Card Sorting Test
Why was it done? To gain insights into users' mental models and preferences regarding content organization.
Result Despite the limited detail in the results, I gathered a general idea of how people envision the site and which menus they expect.
Lesson I realized that involving more people in such a test doesn't necessarily provide clearer results and can even lead to confusion and distraction.
What did I do? I utilized the card sorting feature in Optimal Workshop, creating cards based on the inventory from the previous step. These were then distributed to colleagues for testing.
Creation of New Information Architecture
Why was it done? Users can easily become frustrated when using a disorganized and cluttered website. Well-structured content is vital for the success of a web product.
Result After numerous corrections and improvements, the site became much easier to navigate.
Lesson It's crucial to adhere to current standards for website organization but also customize them to fit specific needs.
What did I do? I revamped the website's content based on insights from card sorting tests and UX design principles. Although organizing information in a user-friendly way presented challenges, I utilized these tests and also completed a course on Information Architecture from NNg to enhance the website's layout and improve navigation for users.
Development of a New Design System
Why was it done? The existing visuals of the platform were outdated, and we lacked any cohesive design system. It was imperative to establish a foundation from scratch to maintain consistency in the product's future iterations.
Result The development of a detailed and well-structured design system that can easily be updated and improved in the future.
Lesson Creating a design system is a complex task that requires collaboration not only with designers but also developers and other stakeholders.
What did I do? I took the lead in developing a unified design system. Recognizing my limited expertise, I sought external guidance and enrolled in a Design Systems course from NNg. Teaming up with an external designer, we effectively crafted a new design system that aligned with our project goals, ensuring consistency throughout the redesign process.
Prototype of low, mid, and high-fidelity screens
Why was it done? To facilitate a smooth and successful collaboration with developers. They were involved throughout the entire process of designing the prototypes.
Result The implementation was relatively smooth and clear.
Lesson It's crucial to maintain a big-picture perspective when creating a digital product at this stage and avoid getting too caught up in minor details, as this can slow down the process without necessarily improving the final product.
What did I do? Leveraging the new information architecture and design system, I created visually appealing and intuitive page layouts tailored to meet the needs and expectations of the target audience.
Testing
Why was it done? To ensure the proper functioning of all components and elements on the page.
Result It required continuous improvement and effort, but ultimately resulted in a fully functional and visually appealing web product.
Lesson Testing and providing structured and precise feedback are as, if not more, important than the design itself.
What did I do? Collaborated closely with developers to ensure accurate translation of every aspect of the design into the final product.
Project impact
Only one page has been implemented thus far, but it contains numerous crucial components such as tables, filters, a search bar, and sorting functionality—elements of utmost importance to our client. We received overwhelmingly positive feedback, indicating that the new structure will significantly enhance their workflow, making it faster and more efficient.