↘ For the dedicated mobile app, I chose a simple hierarchical Information Architecture, but divided the functions into a top and bottom bar. I wanted to create an easy and efficient user flow by keeping the functions to a minimum. Also I included different possible paths for the navigation to increase usability and decrease possible frustrations.
↘ Creating paper wireframes, I was able to generate multiple ideas for the project. Main functions for the dedicated mobile app revolve around the community-based maintenance function. The app uses a MMORPG inspired profile reward systems to keep the motivation.
↘ For the low fidelity prototype I created several screens to broaden the range of possible interaction and connectivity. My goal was for testers to explore the prototype and reach the usability study goal through different approaches.
↘ Conducting usability studies and testing the prototype led to important insights, which helped to refine the design and increasing its usability. For this part of the project I observed, that aspects of readability and navigation were key pain points to solve, before moving on with the design.
↘ Over the course of the project, the design changed significantly with each iteration. By keeping the results of the usability study in mind and gathering feedback from peers and friends throughout the project, I was able to develop the early wireframes into a usable prototype.
↘ I used architectural master plans as inspiration for colours, shapes and typography. A clear and structured head font was to be used with a sans-serif font developed for paragraphs for texts. I also used icons from Google's Material Design archive to keep a consistent look.
↘ The high fidelity prototype includes several accessibility considerations: The final design included more easy to use functions and clear CTAs. Also, the contrast of elements and background passed WCAG AAA standards. Important buttons include icons for easier access.
↘ The design of the Information Architecture draws inspiration from planning and 3D modeling software and websites such as Figma, Rhino 7, and Vectorworks. To manage the array of tools, a Top Bar and two Side Bars with distinct functionalities were implemented. Subsequently, employing the "graceful degradation" process facilitated the removal of elements for lower complexities to optimize the interface for mobile and tablet usage.
↘ Creating paper wireframes, I was able to generate multiple ideas for the project. The responsive website for mobile use allows users to monitor data, display projects, add comments to those projects and join meetings. It was important to assess, how such planning tools are used on different devices. Mobile devices, like phones and tablets can be used for on-site management, while desktop applications are used for active planning.
↘ The low-fidelity prototype for the responsive website is less complex and shows a matrix-like connection type. The main function of the mobile website includes the meeting function and the project overview function. Users can comment on the project plans and add simple shapes while collaborating with colleagues on the same project.
↘ Over the course of the project, the design changed significantly with each iteration. By keeping the results of the usability study in mind and gathering feedback from peers and friends throughout the project, I was able to develop the early wireframes into a usable prototype.
↘ After conducting usability studies and testing the prototype, I gained important insights to improve the low-fidelity prototype and mockups. It was important to create clearer call-to-action buttons, enlarge important elements and separate elements from each other.
↘ To keep the same visual look from the dedicated mobile app, I used the same sticker sheet for the website. A clear and structured head font was to be used with a sans-serif font developed for paragraphs for texts. I also used icons from Google's Material Design archive to keep a consistent look.
↘ However, I kept some visual elements subtler to create a more professional look for the website, as it has another usability intent. My high fidelity prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by friends and peers.
↘ The responsive website had to consider the different functionalities and usage scenarios of the programme. This means that the website can be used effectively on different devices and complements each other.
↘ The desktop version of the website contains the main function: the planning programme in its full functionality. I was inspired by collaborative tools such as Figma, Miro or Spline, but also by planning tools such as Rhino, Vectorworks or Revit. The software needed to combine these aspects with a multi-layered AI assistant for managing data, generative design and machine learning.
Have I piqued you interest? I am looking forward to your message!
