What is CityMoshi?
CityMoshi, inspired by the Swahili word moshi meaning smoke a signal that something is happening redefines “city” as anywhere from big cities to small villages, helping you discover, explore, chat, and create both public and private events you love, so you stay connected and never miss out in this vast, fast-moving world of digital connectivity and immersive experiences.
Kigali, Rwanda
2022
2 FullStack Devs
1 FullStack Dev
1 Frontend Dev
1 Backed Dev
1 Content Writer
Responsibility
Hired to lead and design user experiences that enable event enthusiasts to navigate and stay updated with events. I centered my interface design on the needs of the user, as identified through my research.
Discussion with stockholders
To foster alignment between the team and the Product idea, we crafted a set of questions aimed at ensuring mutual understanding. I actively played a role in formulating questions, covering aspects such as business logistics, product details, and design inspirations. The circulation of these questions facilitated a discussion with the Stockholder, enabling the team to gain clarity on logistical matters.
Process
Discover 2. Ideation 3. Design 4. Devs Handoff
Research
In order to cultivate a more profound comprehension of the challenges and aspirations of the users, I undertook a comprehensive analysis focused on the application's designated target audience. This analytical endeavor involved delving into various facets of the audience's behaviors, preferences, and pain points to extract valuable insights that would serve as a foundational understanding for the subsequent stages of the project.
Quantitative survey about the experience people have with some event apps
We wanted to do it right, with the user at the center of everything we were designing, we carried out a survey with 100 different people to uncover hardships they had while exploring event apps.
From this study, I could further segment my main user into four groups: large event hosts, small event hosts, Event attender and marketing in charge of selling tickets. I also broke down the users by their attributes, pain points, motivations, goals and responsibilities.
Age group
08%
17 Years old
19%
18-24 Years old
56%
24-35 Years old
20%
36-47 Years old
05%
48-60 Years old
Competitive analysis
I compiled a competitive analysis report to identify the strengths and weaknesses of the provided competitors.
I reviewed our competitor’s overall app store ratings such as looking at the total number of downloads, user reviews and determining which features made them unique.
Whatsnxt
Itike
Eventbrite
Whatsnxt Competitive Analysis
Mission: Eco-friendly Events App
Audience: Individuals seeking to join events or discover places to hang out in Kigali, Rwanda
Strengths:
Extensive selection of events catering to a wide variety of interests and preferences.
Smooth and user-friendly onboarding process, ensuring attendees can easily navigate and register for events.
The home menu is designed to offer details and assistance, ensuring attendees have all essential information at their fingertips.
Robust search and filter options that allow users to easily find events that suit their needs and schedule.
Transparent and detailed event information, including pricing, event details, which enhances the decision-making process for attendees.
Capability for users to customize and pick preferences related to event types, genres, or specific interests for a more personalized experience.
Weaknesses:
Challenge with small content on UI buttons, texts visibility, especially when displayed over a picture background. This can affect the readability for users.
The app's interface is not optimized for larger screen sizes, which may lead to a subpar user experience on tablets and other large devices.
The event search functionality lacks advanced filtering options, making it difficult for users to find specific types of events.
Users have reported issues with the app's push notification system, with some stating that they were not receiving notifications for upcoming events they had registered for..
Heuristic Evaluation
A heuristic evaluation was conducted on the current Design of the web platform CityMoshi to break it down to get a Mobile platform features and identify gaps in the user experience.
Market Problem
The feedback gathered from users of the events app highlights several common issues that require attention. These include concerns related to event attendance and event owners, information accuracy, as well as app performance and usability.
Navigation and user Interface:
Users might encounter challenges when attempting to locate specific event details or navigate through the app's menus and screens. This could be attributed to a design that lacks intuitiveness or the absence of clear instructions.
App Perfomance:
Users may face exasperatingly slow loading times, unresponsive features, unexpected crashes, or other bothersome technical glitches that can significantly diminish their app experiences.
Event Information:
Users may come across inaccurate or incomplete event details, including incorrect venue information, missing schedules, uninvited guests, or outdated event descriptions.
The Solution
Drawing upon the issues identified by the audiences of certain events apps and leveraging my own experiences, I have devised potential solutions to address the problems faced by my users.
Chat Option:
|
User interface and Navigation:
To enhance user navigation within the app, it is crucial to integrate explicit instructions and intuitive visual cues that effectively guide users through the various menus and screens. Implementing
By structuring events in a hierarchical manner, such as festivals, concerts, and more, users can quickly and intuitively navigate through the app to discover events that align with their interests.
App Performance:
Elevate the overall user experience by implementing robust measures to optimize the performance of the app, aiming to minimize loading times, enhance responsiveness, and prevent unexpected crashes.
Incorporating a sophisticated filtering system, users gain the ability to tailor their event recommendations according to a multitude of parameters, including but not limited to interests, location, and date preferences.
Event Informations:
Establishing a robust system, the app can consistently provide users with precise and up-to-date information, encompassing crucial details such as venue information, event location, schedules, and even the list of invited guests.
Incorporating a systematic approach to content updates, the app can effectively keep users informed with the latest information, fostering engagement and user satisfaction.
This helps me gauge user needs and pain points that were felt by event organizers. These insights included: the need for faster set up, clearer communication and a simpler selling process.
My primary objective was to focus around Retention, while Referral and Acquisition were secondary.
Retention
Simplify the Event attender and Manager experience and increase DAU/MAU.
Referral
Make sure the number of downloader reach 5k for the first launch and GOOD ratings on app store.
Acquisition
Promote CityMosh as the primary method of at-the-door management so that more hosts and event enthusiast are aware of it.
Ideation
Empathizing
An empathy map is a collaborative visualization used to articulate what we know about a particular type of user.
Empathy maps are split into 4 quadrants (Says, Thinks, Does, and see), with the user or persona in the middle. Empathy maps provide a glance into who a user is as a whole and are not chronological or sequential.
Target
Discovering Events
Hired: To find events that match their interests.
Outcome: A personalized list of preferred events and saved events.
Event Registration
Hired: To attend an event hassle-free.
Outcome: Quick and easy event chat event to get much infos as possible about the event.
Staying Informed
Hire: To stay updated on event details and changes.
Outcome: Timely notifications and updates.
By focusing on the users' perspectives and experiences, the empathy map becomes a powerful tool for designing an event app that truly meets their needs and expectations.
The Flow
Designing a flow user to representation all the steps my users will takes to achieve a specific goal within CityMosh. It maps out the path user follows, outlining each interaction and decision point along they way.
Hand Sketch
After mapping all the steps of the user on the platform, I began to consider the aesthetics of how the user will view different screens on the app with sketching.
Designing
Mid-fidelity
Following the completion of my hand sketch, the next phase involved translating those conceptual ideas into a tangible and interactive format. This transition from the hand-drawn sketches to a more dynamic representation took shape through the creation of wireframes that directly correlated with the initial conceptualizations.
I user tested the mockups using a combination of:
Internal critiques for initial feedback
Usertesting.com for immediate feedback on smaller functions and to play the role of “Event attender”
Real users for testing a full walkthrough of the app
I find that making mockups too simple will not draw the best feedback from users, but on the other end, mockups overly polished doesn’t offer room for sharing ideas and encourages the user to solely look for flaws. I also ensured that copy was consistent and strong to maintain clear communication for the testers.
UI Inspiration & Interaction
My inspiration for CityMoshi, a delivery service that invites people to share their preferred places to visit, came from competitor platforms, other event platforms, my previous work, and common social media platforms. The key takeaway from this exercise is to create a minimalistic design with ample breathing space. This aligns with the Organization’s preferences for an aesthetically pleasing and intuitively functional design.
Mid-fidelity
The primary interface or main screen serves as the central hub from which users can seamlessly navigate and explore a diverse array of events. This pivotal screen is the gateway to a rich and dynamic user experience, offering an immersive platform where users can effortlessly discover, engage, and participate in a multitude of events tailored to their preferences.
Event browsing and searching designed to cater to diverse preferences and interests, constitutes a pivotal aspect of the user journey, providing a seamless avenue for users to curate their event experiences.
These rating stars serve as a user-friendly and visually intuitive tool designed to empower users in their quest to pinpoint the most vibrant and engaging events within the platform.
Event Details
Within this dedicated space, users gain comprehensive access to all the essential details encapsulating an event, ensuring a holistic understanding that goes beyond the basics. Here, a treasure trove of information awaits discovery, meticulously curated to provide a seamless and immersive experience for event-goers.
Forge a personalized chat experience within the application, where users can seamlessly create private chat spaces and extend invitations to their friends for vibrant discussions about upcoming events.
Here, the user experience transcends the realm of logistical information, offering a multifaceted exploration that includes an exclusive glimpse into the esteemed guests invited to partake in the event.
Keeper
Within this immersive space, users can effortlessly peruse and manage a comprehensive list of all the events they have either saved for future reference or expressed keen interest in attending.
By providing a repository for saved and favored events, the platform not only ensures that users can seamlessly revisit their preferences but also invites them to cultivate a virtual collection of experiences that resonate with their individual tastes.
From reviewing event details and confirming attendance to sharing their curated collection with friends, this space is designed to facilitate seamless and purposeful interactions
Calendar
This designated section provides users with an intuitive and visually engaging calendar view, revolutionizing the way they navigate and manage their scheduled events. In this innovative space, users can seamlessly organize and track their events, gaining a holistic perspective of their schedule while effortlessly exploring all the events slated for a particular day.
Chat Message
The simplicity of joining community chats is a hallmark of this user-friendly platform. With just a few clicks, users can immerse themselves in discussions, share insights, and connect with like-minded individuals. The platform's commitment to user ease extends beyond the initial joining process, fostering an ongoing user experience where engagement in community chats feels natural and enjoyable.
Devs Handoff
Developer handoffs are created to enable the team to code the design. Detailed notes are crucial to ensure developers understand the vision. I've divided the handoff to focus my notes and efforts on the CityMoshi screens.
Anatomy
To conclude..
I created a style guide to support the developers that were rebuilding and redesign the system behind CityMosh as well as for handing off designs to succeeding designers.
I focused on making the foundation for CityMoshi solid in this overhaul to allow me to layer extra features such as a Dashboard and Team Management functionality for next potential iterations.
Colors & Typography
Color, within the context of visual perception, is intricately defined as the perceptual attribute arising from the varied qualities of light that are either reflected or emitted by objects. This fundamental aspect of visual experience plays a pivotal role in shaping our understanding of the world around us.
Font : Lato
Lato is a popular sans-serif typeface that is widely used in various design contexts, including user experience (UX) design
designed by Łukasz Dziedzic, is known for its clean and modern design. It is a sans-serif typeface, meaning it lacks the projecting features called "serifs" at the end of strokes. This simplicity contributes to its readability and versatility.
Application in UI/UX Design:
I like to work often with Lato for its modern aesthetic and versatility. It can be applied to various elements in user interfaces, from navigation menus to body text, ensuring a cohesive and visually pleasing design.
Raison why like to use: Using Lato in UX design, I often consider factors such as font size, line spacing, and the overall visual hierarchy to create a user-friendly and aesthetically pleasing experience. The font's combination of readability, variety of weights, and web-friendly characteristics makes it a valuable tool for for most of my work on digital interfaces 😉
Responsive Landing pages
Grid system Desktop
It’s based on a 07- columns within 28px gutter and 298px margin. The overall width is set at 1140px providing a balanced experience across different devices.
Grid system Mobile
It’s based on a 05- columns Grids with 20px gutter and 23px margin. On both sides at the smallest resolution.
If you find yourself with plenty of leisure time and are looking for an enriching virtual experience, one suggestion is to download a certain app that brings you closer to the heart of Kigali. This app, conveniently accessible at https://www.citymoshi.com/, promises an exceptional experience, allowing you to explore the vibrancy of events in Kigali right from the comfort of your own home. So why wait? Embark on this digital adventure today and immerse yourself in the dynamic culture and lifestyle of Kigali, Tanzania, Ouganda and Nairobi.
Working with Alfa was one of the best decisions we made while building our event management MVP. As a founder, I needed someone who could quickly understand our vision, translate it into a clear user experience, and help us ship fast without compromising quality and Alfa did exactly that.
NGABONZIZA R. Benoit
CEO, Founder | CityMoshi