Process
The Clever Project Composer (CPC) was developed using the Double Diamond principle, which includes four key phases: Discover, Define, Develop, and Deliver. Each of these steps was crucial in creating a cohesive and user-friendly tool that balances both design aesthetics and functionality.
Steps
Please choose the following steps to discover the steps of the project.
The very first stage consists of learning more about the different variables that affect the problem and its possible solution. The process started with to understand how a design offer will be created. This means which package indicators, project criteria, service packages including phases, methods and deliverables are needed.
Please select filter for more content.
During the discovery phase of the case study, it was identified that creating a design quotation is a complex process that requires considering multiple factors. Currently, the process involves manually referencing two large tables containing information such as the prospective project course, time durations of individual work packages, and costs for delivery items and expenses.It was found that the current process is time-consuming, prone to errors and does not provide an easy way for team members or clients to visualize the project design.To improve this process, we need to create a user-centered tool that streamlines the quotation creation process, reduces the chances of errors and provides an intuitive interface for easy project visualization.
During the discovery phase of the case study, it was identified that the user interface should adhere to Jacob's Law, which states that users prefer a website design that is similar to other websites they frequently visit. To ensure this, four common platforms were evaluated as potential examples of project management and communication tools. These platforms include YouTrack, Abstract, Slack, and Asana. These platforms were chosen for their user-centered design and ease of use, which align with the needs and preferences of the target users. The goal is to create a user interface that is intuitive and familiar for the users, which will help to increase adoption and satisfaction.
In the define phase of the case study, I utilized the information gathered during the discovery phase to create a service blueprint diagram that illustrates the connections between various service elements, including people, items, and processes, in relation to specific touchpoints in the customer journey. To ensure the product is built on a solid foundation, I created personas, a site flow, use cases, user stories, and user flows. This allowed me to gain a deeper understanding of the target users' needs and preferences, and how they interact with the product. By using these tools and methods, I was able to define the user experience and create a clear roadmap for the product design and development.
Please select filter for more content.
Design projects can be difficult to conceptualize in the initial planning stages, but CPC makes them more concrete and easy to understand. CPC uses 15 years of project experience in industrial, interface, and service design to visualize the prospective project as a project sketch with timelines for individual tasks, deliverables, and required resources (personnel and costs).
A typical use case for CPC is when a potential new customer, often with little experience in commissioning design projects, makes a project request through an online session or at a trade show or other event. During this session, the desired project timeline is established and the need for deliverables and services is calculated based on experience data. This ensures that even non-design experienced sales representatives can offer cohesive and sensible projects. The proportions and content of the CPC's individual service areas are plausible and validated.
In addition, CPC offers two additional project planning options:
• The ability to customize standard packages, for example, if the customer has already created "personas," these are no longer required as a deliverable and are removed from the package, along with the corresponding costs and time requirements for the project timeline.
• Projects that cannot be represented by existing service packages can be fully configured - all methods and services can be individually selected and adapted to the specific requirements and conditions of the request. New services can also be added to the database and project sketch.
The customer can follow the creation of their project in real-time via screen sharing and see the individual adjustments to their project request. The CPC screen is personalized, showing the customer's name, company, project's name and related contact.
After the online session or trade show meeting, the customer receives an invitation to the CPC tool, which allows them to review and approve the project sketch and timelines and access the project cost estimates.
I created personas for the different user groups that would use the Clever Project Composer (CPC) tool. The primary persona is the design company employee, who may have limited experience in planning and managing design projects but is responsible for communicating with potential clients and creating project proposals. Additionally, I identified the potential new client as a key persona, who may not have previous experience in commissioning design projects but is looking for an easy and intuitive way to communicate their project needs and timeline to the Consulteer AG employee.
To meet the needs of these personas, I designed the CPC tool to be user-centered and easy to use, with features such as real-time screen sharing, personalized communication and a streamlined quote generation process. Additionally, the CPC tool provides a clear and easy-to-use interface that allows potential new clients to review and adjust project proposals, making the process more efficient and productive.
.png)
.png)
As a UX Designer, I use User Stories and User Flows to gain a deeper understanding of the target users' needs and preferences, and how they interact with the product. User Stories help me to define the user's perspective and goals, and to understand what they are trying to accomplish. User Flows, on the other hand, allow me to map out the steps a user takes to achieve their goals, and to identify any potential pain points or issues that may arise during the process. By using these tools, I am able to create a clear and comprehensive picture of the user experience and identify opportunities for improvement. Furthermore, it helps me to design and develop a product that is user-centered, easy to use, and efficient, that meets the users' needs and exceeds their expectations.
- 1Log in to the CPC tool
- 2Select "Create New Project"
- 3Input client information and project details, including desired deliverables and timeline
- 4Use the CPC tool to create a visual project plan, including timelines for deliverables and estimated costs
- 5Review summary of the offer
- 6Input client information and project details, including desired deliverables and timeline
The Clever Project Composer (CPC) Information Architecture (IA) is a logical and intuitive structure that simplifies the planning and visualization of complex design projects. It includes a streamlined login process, a navigation menu with six static sections (Projects, Activity, Clients, Members, Services and Pool) located on the left side of the layout, and a user's account information on the top of the navigation area. The IA provides users with an overview of all projects, the ability to monitor and track all interactions and updates made by members and customers, and a client's area for efficient client management. Additionally, users can efficiently generate design proposals and access a pool section that allows easy access to relevant methods and services. The IA also includes a personal settings feature for managing account information and customizing notifications. Overall, the CPC IA is designed to enhance the user experience and improve the efficiency of the project management process.
It is crucial to have a clear understanding of the pages that will be included in the final product in order to effectively guide the user experience. This includes determining the page flow and linking structure to ensure a seamless navigation for users. By clearly defining the pages and their relationships to one another, it allows for effective communication and alignment among the stakeholders, project owner, team, and developers, ensuring that the end product meets the needs and expectations of all parties involved. This step is critical in creating a human-centered design that prioritizes ease of use, clarity, and functionality.
In the third step, I prioritize the user experience by creating wireframes, which serve as the foundation for the design process. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors. This allows all stakeholders to have a clear understanding and agreement on the placement of information before development begins.
I also leveraged the concept of a design system to ensure consistency, flexibility, and transparency throughout the project. Defining the basic components early on, it allows for a quick and consistent design process and makes it easier to make changes at a later stage. Additionally, a design system facilitates the work of developers and ensures that the final product is user-centered, easy to use, and efficient, meeting the users' needs and exceeding their expectations.
Please select filter for more content.
The design process began by developing mid-fidelity wireframes of key screens. This approach focuses on the layout and functionality of the interface, without the distraction of images and typography. By creating wireframes at this level of detail, more attention can be assigned to specific components and the differentiation between different functions can be clearly established.
I created wireflows to effectively document the user's journey and task flow within the CPC tool. By combining wireframes and flowcharts, I was able to clearly display the layout and dynamic changes on each page while also visually mapping the user's actions and progress. This allowed for a better understanding of the user's experience and helped identify areas for improvements in the design. The wireflow also served as a useful tool for communicating with the development team and stakeholders, ensuring a seamless implementation of the design.
Ensuring optimal CPC for different screen sizes and devices was a priority, achieved by implementing responsive grids. This approach guarantees a seamless user experience across all platforms, from mobile to the web. By designing with usability in mind, the CPC is easily accessible and user-friendly for all users.
20 column · margin 25dp · gutter 30dp
12 column · margin 25dp · gutter 30dp
4 column · margin 15dp · gutter 30dp
Carefully curated and developed, a color palette was created that aligns with the company's existing branding and corporate colors to ensure consistency and cohesiveness in the final design.
Designing responsive typography for CPC was crucial as it needed to adapt to various screen sizes and mobile devices. To ensure consistency, the font type was selected from the company's existing corporate fonts and the font color was chosen from the corporate color palette.
When selecting a button for an action, I take into account the level of emphasis each button type gives. I ensure that each button variant serves a specific purpose and that its design clearly communicates that function to the user. Additionally, I selected a primary color for the primary button.
I designed a text field wrapper that encompasses a label, input, and help text. It has one variation, the outlined (default). To decrease the size of the text field wrapper, I created a text field with floating labels which are simple form labels that float above the input fields.
I crafted visually appealing and user-friendly icons that adhere to a minimalist design aesthetic. The icons feature an outlined and rounded style, which effectively complements interfaces with heavy typography and high visual density. This approach ensures a clean and streamlined user experience.
To deliver effective and user-centered designs, I utilize guidelines to evaluate and implement principles such as intuitiveness, learnability, efficiency, and consistency. By adhering to these guidelines, I am able to ensure that the designs align with user needs and exceed their expectations. Additionally, guidelines provide designers and developers with a clear understanding of how components are constructed and how they should be utilized, thereby promoting transparency and consistency throughout the design process.
Key Screens
As a UX Designer, I am responsible for ensuring that the final stages of the Double Diamond model are executed efficiently and effectively. This includes the thorough testing of the product, obtaining official sign-off for production, and launching the final product to the market. During this phase, I conduct a comprehensive review of the tool to ensure that it meets all necessary requirements and that there are no outstanding issues that need to be addressed. To illustrate the design, layout, and functionality of the tool, key screens are presented for review.
Please select filter for more content.
The login process for CPC members and customers can be streamlined by using a single login screen. By using a single login screen, it can ensure a consistent and efficient experience for all users.
The CPC Navigation features six static sections – Projects, Activity, Clients, Members, Services and Pool, located on the left side of the layout. The top of the navigation area includes the user's account information, such as their avatar and status, as well as options for account setting and logging out.
In the Project section, users can view an overview of all projects, including the ability to toggle filters, sort projects, set favorite projects, switch between list and card views, and access a global search bar at the top. Additionally, a primary button allows users to easily create a new project.
To enhance the user experience, the Project Card includes relevant information such as the duration bar, specific notifications, the names of the project team members, the project name, and settings for various actions. This allows users to quickly and easily access important project information at a glance.
In the activity section of the CPC tool, users have the ability to monitor and track all interactions and updates made by members and customers. This includes monitoring comments, file uploads, creations, and modifications made within the tool. To facilitate ease of navigation, a drop-down selection menu with a built-in search function is provided for filtering specific projects. The activity view is organized chronologically, with the most recent entries displayed first.
The customer area is conceptualized and designed to create an efficient and user-friendly experience for members. The member has access to all relevant client information, including client profiles, invitations, and satisfaction surveys. This feature allows the member to easily manage their client relationships and stay updated on important notifications. Additionally, the member can customize their client settings and filter their view for enhanced organization and navigation. Overall, this section has been designed to streamline the client management process and improve the member's workflow.
The member section is designed to provide users with a seamless experience for managing and interacting with project members. The user has access to a comprehensive list of all members, with the ability to add new members or adjust existing member settings. Each member is represented by a unique member card, which displays the member's role within the project. The user has the ability to select multiple member cards for batch actions, such as updating roles or removing members from the project. Additionally, the member card design includes visual cues, such as notifications, to provide real-time updates on member activity. Overall, the member section is designed to be intuitive and efficient for managing project teams.
.png)
One of the key benefits of using a CPC tool is the ability to efficiently generate design proposals. In the service section of the tool, users can easily access a variety of pre-existing services, view and edit relevant information, and even clone them for use in a specific project. Additionally, users have the flexibility to create custom service packages and methods tailored to the unique needs of their project. This process streamlines the creation of design proposals and enables a faster and more efficient workflow.
.png)
.png)
The CPC database is optimized by integrating a pool section that allows users to easily access and navigate all relevant methods and services associated with the project phases. Utilizing an intuitive information generator, users are presented with a clear and organized table format, displaying key information such as duration, level of complexity, member role, cost, person days, indicators, and project criteria for various service packages and methods. This improves the overall user experience and allows for more efficient and informed decision-making within the project management process.
One of the primary objectives of CPC is to streamline the process of creating personalized client proposals and delivering them in a professional, DIN A4-formatted PDF. The tool allows for the easy upload of a key image, client creation, selection of project services and phases, incorporation of external costs, and assignment of project team members. Additionally, the tool features a comprehensive timeline chart that offers a clear overview of the project's duration, costs, and allocation of team member's personal days. This ensures that all stakeholders have a clear and concise understanding of the project's progress and resources.
The personal settings feature within the CPC platform allows users to easily manage their account information and customize their notifications and news preferences. This improves the overall user experience by providing a personalized and streamlined experience for each individual user. Additionally, the design of the personal settings feature is intuitive and user-friendly, making it easy for users to navigate and make updates to their accounts.
Upon logging into the Clever Project Composer, the end user (the client) is presented with a comprehensive overview of the project, including all services, methods, project duration, phases, deliverables, project costs, and the project team.
To enhance security, the client is provided with an automatically generated password, which must be changed upon initial login. A visually engaging interactive timeline chart is implemented, providing the client with real-time information on project duration, progress, methods, deliverables, and project communication. The user has easy access to all deliverables, with the ability to interact with the project team and discuss specific details through an integrated chat feature.
