Designing the App Interface
This post highlights the design of the app, which is an essential part of the project. The app aims to provide customers with real-time updates on their camper van’s development, allowing them to track progress, communicate with building team, and make adjustments as needed in comfort of their own home.
A standout feature is the integration of augmented reality (AR), which will enable users to visualize their camper in an interactive 3D format, helping them make informed customization decisions. During the research, I found a lack of conversion companies offering companion apps for buyers, revealing a gap in the market.
Moreover, emerging technologies are not widely adopted in the camper van sector. This presents Wander Wheels with a unique selling proposition, setting apart from competitors and enhancing customer engagement.
While refining the Wander Wheels app menu, key changes were needed to make the user experience smoother and the features more intuitive. One significant update was moving the augmented reality (AR) feature to the Conversions menu instead of keeping it in My Build. This decision was made because AR is better suited for exploring pre-designed van layouts rather than being tied to the user’s custom build, which could be more complex to integrate and execute. By placing it in Conversions, users can interact with Nomad, Couple, and Family layouts in a way that’s engaging and easy to access without overwhelming the build process.
Here is a breakdown of the new functionalities:
Home
The Home menu is a hub where users can quickly navigate to key sections like Conversions, My Build, and Settings. It also features news and updates, like promotions or new AR features, immediately keeping users informed and engaged.
Conversions
This menu saw the most significant transformation. Alongside exploring layouts like Nomad, Couple, and Family, users can select a layout and view it in AR. The Explore in AR feature allows them to place van layouts in their environment, interact with hotspots to reveal interior details, and even toggle layout options, such as switching between a bed and a dining table setup. The AR experience is interactive and exciting, creating a “try-before-you-buy” vibe. I also added a Compare Layouts option so users can see the differences between layouts side-by-side, which adds value when making decisions.
My Build
This menu is simplified to focus on tracking the user’s progress with their custom van. It includes features like Floor Plan, Interior, and Exterior to organize all customization details. The Chat feature lets users stay in touch with the Wander Wheels team for updates or questions. By narrowing this menu’s focus, it is more manageable and better tailored to users’ needs.
Settings
Finally, the Settings menu was kept simple but functional. It includes account management, password changes, notification preferences, and a dark/light mode toggle for accessibility and customization.
Why These Changes Matter
The main focus of these updates was to create a more streamlined and user-friendly experience. Moving AR to Conversions makes the feature easier to access and positions it as a highlight of the app, perfect for showcasing pre-designed layouts. At the same time, simplifying My Build ensures users can focus on their projects without unnecessary complexity. These changes are all about balancing interactivity with usability while highlighting the key features that make Wander Wheels unique.
Software
In my exploration of app design software, I have selected Figma based on comprehensive research into its capabilities. Although I do not have prior experience with Figma, I am eager to challenge myself and develop proficiency in this tool. My assessment indicates that Figma offers significant advantages over Adobe XD, particularly its collaborative features. Figma facilitates real-time collaboration among multiple team members, which enhances teamwork and boosts productivity. This functionality is especially beneficial for projects requiring prompt feedback and iterative development.
Furthermore, Figma’s ability to integrate existing design components streamlines the process, saving valuable time and ensuring consistency across various platforms. Accessibility is another notable advantage of Figma, as it allows one to work from any device with an internet connection. The software’s sharing capabilities are impressive, making it straightforward to distribute design files and prototypes for feedback and user testing. Stakeholders can engage with prototypes effortlessly, streamlining communication and decision-making processes. My preference for Figma as my app design tool stems from its alignment with my workflow.
Process of Designing
The development process commenced with creating a structured component library, incorporating select elements sourced from design repositories. This preliminary stage was guided by a predefined set of functions and user flows, establishing a systematic and efficient design approach. A cohesive and visually consistent foundation was established for the Wander Wheels application by developing a component library at the outset, ensuring alignment with branding and functional requirements.
With the core structure and component library in place, the design phase commenced. Given the availability of all necessary components, I proceeded directly with high-fidelity designs. While this approach deviates from conventional iterative prototyping, it was the most effective method within the constraints of the project timeline. The design process was largely intuitive, as I conceptualized the layout and user interactions mentally before translating them into fully developed high-fidelity screens. This method enabled a streamlined workflow while ensuring the app’s interface effectively conveyed the intended user experience.
After completing all design frames, a meticulous review was undertaken to refine visual consistency, with particular attention to maintaining uniform spacing and alignment. These refinements were critical in preserving a professional and coherent aesthetic across the app’s interface.
To assess the usability and clarity of the design, I conducted preliminary user testing by sharing the prototype with peers and family members. Gathering feedback from individuals unfamiliar with the project was essential in evaluating the intuitiveness and accessibility of the interface. This iterative evaluation process ensured that the design effectively met user expectations.
The feedback was overwhelmingly positive. The fact that all testers could navigate the app effortlessly indicated that the design objectives of clarity, usability, and brand coherence had been successfully achieved. This outcome validated the effectiveness of the design process and confirmed that the application was prepared for further development and implementation.
Figma link:
https://www.figma.com/design/6THEr6761OlBnLduZVPXOu/Wander-Wheels?node-id=0-1&t=74ZYU5BYF6cMRiye-1
Prototyping Process
The prototyping phase was essential in refining the Wander Wheels app’s user experience before final implementation. Initially, low-fidelity wireframes were created to establish the fundamental layout and user flow. These wireframes were then developed into high-fidelity prototypes, incorporating interactive elements to simulate fundamental user interactions. This process allowed for usability testing and iterative improvements based on feedback. By employing a structured prototyping approach, potential usability issues were identified and resolved early, ensuring a more intuitive and efficient user experience.
iOS-Inspired Design
The final design of the Wander Wheels app adheres to an iOS-inspired aesthetic, ensuring a familiar and seamless experience for iPhone users. The interface follows Apple’s Human Interface Guidelines, incorporating smooth navigation, clean layouts, and intuitive touch interactions. Typography plays a crucial role in maintaining consistency across the app, with the Wander Wheels typography system featuring Montserrat Semibold as the primary font and Hind Madurai as the secondary, ensuring visual coherence and readability. This design approach enhances usability while reinforcing brand identity.
Figma Preview and Prototype Links
Here is a preview of the finalized app design and a Figma link granting direct access to the file. This link enables a detailed prototype exploration, allowing for an in-depth review of the design and functionality.
Time Management Reflection
Effective time management was essential in balancing the various stages of my project, particularly in developing the app design and prototype. While I initially set a structured timeline, unforeseen challenges, such as refining the component library and ensuring design consistency, required additional time. Adjusting my schedule allowed me to maintain quality without compromising key project objectives.
To optimize efficiency, I prioritized tasks based on their complexity and impact, focusing first on foundational elements like typography and layout before progressing to high-fidelity designs. This strategic approach minimized revisions and streamlined the overall workflow. However, tasks such as gathering user feedback and implementing refinements took longer than anticipated. This process highlighted the importance of allocating buffer time within future project timelines to accommodate adjustments without disrupting overall progress.
Through this process, I gained valuable insights into the necessity of adaptability in project planning. I aim to refine my time management strategies by incorporating more structured milestone reviews to ensure steady progression while maintaining flexibility to address unforeseen challenges.
Progress Meeting Reflection
Regularly presenting my work to both Yang and Rob has been an essential part of refining my project. Their feedback has helped me identify key areas for improvement and ensure that my designs meet a high standard.
Recently, Yang provided valuable insights regarding my 3D model, pointing out the need for re-topology to enhance the overall quality. She noted that the current rendering results show noticeable artifacts, which could impact the final visual output. To address this, she recommended ensuring that each individual polygon mesh contains fewer than four vertices, as this approach helps improve topology and resolves rendering issues.
Additionally, Yang emphasized that while topology plays a crucial role, understanding the texturing and rendering process is equally important. She suggested exploring additional resources on YouTube to deepen my knowledge in these areas. Moving forward, I plan to apply these recommendations to refine my 3D model, ensuring a smoother and more professional result.
Reference List:
Images:
Anon, (2020). Фото автодомов (49 фото). [online] Available at: https://pro-dachnikov.com/dom/16387-foto-avtodomov-49-foto.html [Accessed 14 Apr. 2025].
Artofit (n.d.). This Custom-Built Campervan Makes On-The-Road Living Easy. Available at: https://www.artofit.org/image-gallery/767230486534628985/this-custom-built-campervan-makes-on-the-road-living-easy/ [Accessed 10 Mar. 2025].
Barber, M. (2019). Camper van conversion: Lego-like kits create a modular, flexible RV. [online] Curbed. Available at: https://archive.curbed.com/2019/10/4/20898167/camper-van-conversion-kits-for-sale-happier-camper [Accessed 14 Apr. 2025].
Ben_Frieden (2019). Hippie Van Camper – Free photo on Pixabay. [online] Pixabay.com. Available at: https://pixabay.com/photos/hippie-van-camper-bus-camping-4523511/ [Accessed 14 Apr. 2025].
guidoprussiafacebook (2020). Van Sunset Sky – Free photo on Pixabay. [online] Pixabay.com. Available at: https://pixabay.com/photos/van-sunset-sky-nature-landscape-4869949/ [Accessed 14 Apr. 2025].
Guillaume, A. (2020). white van on green grass field during daytime. [online] Unsplash.com. Available at: https://unsplash.com/photos/white-van-on-green-grass-field-during-daytime-gu3Pd-Ccmbk [Accessed 14 Apr. 2025].
Guillaume, A. (2020). person standing on brown rock near green grass field during daytime. [online] Unsplash.com. Available at: https://unsplash.com/photos/person-standing-on-brown-rock-near-green-grass-field-during-daytime-nrhSJMgovls [Accessed 14 Apr. 2025].
heytess_ (2024). 11 Camper Van Bed Designs For Your Next Van Build. Available at: https://www.parkedinparadise.com/campervan-bed-design/ [Accessed 8 Feb. 2025].
Hörnfeldt, K. (2023). a truck is parked in the middle of the desert. [online] Unsplash.com. Available at: https://unsplash.com/photos/a-truck-is-parked-in-the-middle-of-the-desert-jAUVfG7m21E [Accessed 14 Apr. 2025].
Instagram. (2021). Hαуley Hunter on Instagram: ‘Anyone else absolutely OBSESSED with van life? 🚌 This is legit my dream home. This amazing little home @dolcesolecamper is available to hire on the Gold Coast! 💛 it will be your best little getaway yet 🤩 swipe for one of its best little features 🎥 🍿 All edited with @presetsbyhaylsa #haylsapresets’. [online] Available at: https://www.instagram.com/p/CEjH_y2nBBY/?epik=dj0yJnU9TXJhQVhmV21MX1RRZERDemhWQXNsYUZ0aGh0VnFyM00mcD0wJm49NVRiMTlVUXM2blgwcWVmQ3JuQV9rdyZ0PUFBQUFBR2Y4XzdB [Accessed 14 Apr. 2025].
Ishii, S. (2024). The 10 Best 4×4 Camper Vans: Remote Van Life Is Calling. [online] GearJunkie. Available at: https://gearjunkie.com/camper-rv/best-4×4-camper-vans [Accessed 14 Apr. 2025].
Laura (2022). 16 Sprinter Van Conversions To Get You Excited For Van Life | Fun Life Crisis. [online] Fun Life Crisis. Available at: https://funlifecrisis.com/sprinter-van-conversions/ [Accessed 14 Apr. 2025].
Rose (2020). 20 Campervan Interior Inspirations For Your Next Conversion. [online] Van Clan. Available at: https://vanclan.co/campervan-interior/ [Accessed 14 Apr. 2025].
Schmid, K. (2020). white and orange van on gray asphalt road during daytime. [online] Unsplash.com. Available at: https://unsplash.com/photos/white-and-orange-van-on-gray-asphalt-road-during-daytime–grs8iMGqQE [Accessed 14 Apr. 2025].
Sila.org. (2025). Networking Overview – Sila Community. [online] Available at: https://www.sila.org/networking/networking-overview [Accessed 14 Apr. 2025].
Shutterstock. (2025). Vektor Stok Customer Support Icon Chat Support Help (Tanpa Royalti) 2256632433 | Shutterstock. [online] Available at: https://www.shutterstock.com/id/image-vector/customer-support-icon-chat-help-vector-2256632433 [Accessed 14 Apr. 2025].
Tarver, J. (2020). My DIY Campervan Conversion (It Cost Less Than $3,000!). [online] Jordan Tarver | Keynote Speaker & Bestselling Author. Available at: https://www.jordantarver.com/diy-camper-van-conversion/ [Accessed 14 Apr. 2025].