Overview
For DECO1016 Introduction to Web Design, I developed Moz, a microsite celebrating the city of Maputo. The project focused on combining visual storytelling with interactive web elements to highlight Maputo’s culture, history, and local attractions. I was responsible for the content layout, visual design, and interactive map integration, gaining hands-on experience in HTML, CSS, and responsive web design while crafting a user-friendly and visually engaging digital experience.
Role
UX/UI Designer, User Researcher
Duration
Sep-Nov 2024, 9 weeks
Tools
Moz
Moz is a microsite experience designed to showcase the city of Maputo, celebrating its vibrant culture, rich history, and local charm. The site highlights must-visit spots through interactive maps, engaging visuals, and curated content, offering users an immersive glimpse into the heart of Mozambique’s capital.
The challenge 📌
The goal of this project is to create a dynamic webpage devoted to Mozambique's capital, Maputo. The website seeks to highlight Maputo's breathtaking architecture, rich cultural legacy, and active local community. It has sections on must-see sights, regional food, cultural events, and useful travel advice, all of which are intended to draw in and interest a wide range of target audiences, such as foodies, art fans, urban explorers, and business visitors. The microsite creates a greater understanding of Maputo's distinct charm and encourages sustainable tourism with its eye-catching design and easy-to-use navigation.
Usability testing📊
To evaluate the usability of the CycleConnect prototype, I conducted user testing with young adults who cycle for leisure or fitness, focusing on how well the app supports motivation, social engagement , and ease of navigation . The goal was to assess the clarity of the interface, feature discoverability, and overall user flow.
Participants were guided through key tasks using a think-aloud protocol, where they voiced their thoughts while interacting with features such as joining a cycling challenge, viewing the leaderboard , and more. Their feedback provided valuable into layout, icon clarity, and feature expectations, which helped guide insights further design refinements.
UI Design Style Guide
Before creating the high-fidelity prototype, we established a comprehensive style guide inspired by Material Design principles. Our goal was to craft a clean and intuitive visual design that ensured ease of use, focusing on readability and comfort for users navigating the app.
Typography | Poppins
Aa
Aa
Aa
Primary/Main
679497
Secondary/Main
FF7A00
Accent/Main
001A23
Body/Default
232323
Background/Default
E8F1F2
Reflections & Takeaways🔐
Working on CycleConnect was a valuable opportunity to deepen my understanding of interface design and apply a user-centred approach to a real-world problem. Through this individual project, I strengthened my skills in wireframing, prototyping, and usability testing, while learning how to translate user research into meaningful design decisions.
A key takeaway was recognising the importance of designing for motivation and social connection, not just functionality. I also learned how iterative testing can significantly improve user experience by revealing issues that aren’t always obvious during initial design.
Looking back, I would have benefitted from conducting more rounds of testing and exploring a wider range of interaction patterns to further enhance engagement. Overall, this project helped me grow as a designer by reinforcing the value of empathy, feedback, and continuous iteration.
Defining the MVP
As this was an individual project, I used sketching and rapid ideation to explore different feature ideas. The MVP of the Moz microsite focused on delivering a visually engaging and informative experience that highlights the essence of Maputo.
Home Page : Offers essential information for first-time visitors to Mozambique, including average monthly weather, currency, time zone, and best times to travel. It also features a short video showcasing Maputo's scenery and a link to learn basic Portuguese, helping users feel more prepared and connected.
Accommodation Page : Displays a variety of hotel options with details such as star ratings, user reviews, names, and locations, making it easier for users to choose a stay that suits their needs and preferences.
Things to Do Page : Highlights must-visit spots in Maputo, helping users plan their route by showcasing key attractions and cultural experiences.
Final design🎉
