Token System Design
Product Design
UX Design
UI Design
VideMap video sharing & navigation app
Why I created it
While there are plenty of navigation and video-sharing apps on the market, very few bring the two together in a meaningful way. I noticed that Google Maps does offer photo and video sharing for locations, but its video feature is underused and often overlooked—even though the demand for video content continues to grow. People love discovering places through authentic, short video reviews, and I saw the potential of combining that with navigation. This insight inspired me to design VideMap—an app that merges map navigation with video sharing to make exploring and reviewing places more engaging and useful.
How I created it
I began by sketching early ideas for the app’s look and core features, drawing inspiration from successful platforms like Facebook, Instagram, YouTube, and Google Maps. Studying their functionality and UI allowed me to analyze what makes them effective and apply those insights to my own design. From this research, I formed a clear vision of VideMap’s user experience, branding, and interface. I then brought these ideas to life by building interactive prototypes in Adobe XD to refine the details.
Design concept
VideMap combines the functions of navigation, video sharing, and travel apps into a single experience. Users can share short video reviews of places and businesses while also getting directions to those locations. To make the app more mobile-friendly, video uploads are limited to one minute and a data-saving mode is available. This encourages concise, engaging content while reducing data usage for both creators and viewers.
Accessibility was also a priority. VideMap’s interface follows WCAG 2.0 guidelines to ensure that the app is accessible to everyone.
The logo
VideMap’s logo features a play icon inside a landmark marker—symbolizing the app’s blend of maps and video. Because the play icon is left-pointing, its alignment was adjusted visually (inspired by YouTube’s logo) to appear centred, resulting in a clean and balanced design.
↑ VideMap logo
The colour yellow
Yellow was chosen as the brand colour to convey positivity, warmth, and friendliness. It reflects the feeling of a sunny day, reinforcing VideMap as approachable and uplifting—an app people enjoy using while out exploring.
The typeface
For clarity and versatility, VideMap uses the Montserrat typeface. Its clean sans-serif style and range of weights make it easy to read while supporting flexible UI design needs.
App flow & Screens
Splash screen
VideMap opens with a clean splash screen that highlights the brand’s bold yellow background and simple logo. This screen creates an immediate sense of energy and recognition. For new users, the next step is the login screen where they can sign up or log in, while returning users are taken straight to the map view for quick access.
↑ Splash screen animation
Login screen
Returning users can quickly sign in with their email and password, while new users can easily create an account by tapping the “Sign Up!” button at the bottom (2-1). A “Need Help?” link is also included for those who may need assistance with login. The layout is simple and intuitive, keeping the focus on accessibility and ease of use.
Map screen
After logging in, users arrive on the map screen, which displays their current location and allows them to search for places nearby. To make the experience intuitive, locations are colour-coded by category, following a system similar to Google Maps to ensure familiarity and ease of transition for new users.
Pink: Hospitals and doctors
Purple: Gas stations
Blue: Malls, supermarkets, and shops
Green: Parks, gardens, and gyms
Orange: Cafes, bars, and restaurants
Cyan: Entertainment venues (cinemas, theatres, nightclubs, amusement parks, museums)
Magenta: Hotels and lodgings
Grey: Services and institutions (transportation, schools, banks, offices, factories)
↑ Map screen interaction:
User taps a sushi restaurant on the map to view details
Location screen
When a user selects a place, they’re taken to the location screen, which displays related videos, ratings, and reviews (4-1). Each video can be saved by tapping the heart icon—filled hearts indicate saved videos (4-2), while outlined hearts represent unsaved ones (4-3). Users can leave the screen anytime using the collapse arrow in the top-right corner (4-4).
Videos play with a single tap, revealing the creator’s review beneath the video (4-5). Users can share content via the share icon (4-6), and tapping the video again reveals additional controls—share, save, video options (4-7), and fullscreen mode (4-8). Playback details such as duration and time watched appear at the bottom-left (4-9), while a pause button is available at the center of the screen.
The video options menu provides additional functionality, including adjusting video quality, enabling captions, and reporting inappropriate content (4-10).
For an immersive experience, users can switch to full-screen mode with a single tap and exit just as easily with the full-screen exit icon (4-11).
↑ Location screen interaction:
User plays and pauses a place review video
Beyond the main map, VideMap’s tab bar provides access to the other four key destinations: Route, Add a Vide, Saved Vides, and My Vides (5-1). These represent the app’s core features.
Route screen
By tapping the Route icon, users can quickly plan their journey. Start and end points can be entered through simple input fields (5-2). Once entered, VideMap displays the distance and estimated travel time by car, walking, or cycling (5-3). The route is highlighted directly on the map, with the destination marked in red (5-4).
↑ Route screen interaction:
User taps the Route tab to view directions
Add a Vide screen
By tapping the plus icon in the tab bar, users can upload their own videos. The process is broken into four simple steps:
Step 1: Select a video
Select a video from the device’s library.
Step 2: Trim the clip
Trim the clip as needed using drag handles (maximum length: 1 minute) (6-1).
Step 3: Pick a thumbnail
Choose a thumbnail by selecting a specific frame from the video (6-2). Unlike auto-generated thumbnails, this gives users full control over how their video is represented.
Step 4: Write a review
Write a short review (up to 200 characters) and add a rating for the location. A character counter helps keep comments concise (6-3). The location name is shown again for confirmation (6-4), and users can update it if necessary via the arrow icon (6-5).
↑ Add a Vide screen interaction:
User uploads a video and shares a review with a rating
Saved Vides screen
The Saved Vides screen allows users to easily access the videos they’ve saved. A searchable list view makes it simple to find specific content by entering keywords (7-1). Tapping on a video opens it with full details, and users can exit at any time using the collapse arrow in the top-right corner (7-2). They don’t need to play the video to share or remove it—these actions are available directly through the options menu on the right-hand side (7-3 & 7-4). This design ensures users can quickly manage and revisit their favourite videos.
↑ Saved Vides screen interaction:
User plays a video and opens the options menu
My Vides Screen
The My Vides screen allows users to view and manage the videos they’ve uploaded, as well as access the app’s settings (8-1). The layout is similar to the Saved Vides screen, with a searchable list of uploaded videos that can be watched at any time.
Creators have full control over their content through the video options menu (8-2 & 8-3), where they can edit, save, delete, or share videos. Choosing “edit” takes them back to Step 2 of the upload process, allowing them to trim the video as needed.
From the settings menu, users can personalize their experience with options like "Data Saving Mode", which reduces data usage when watching or uploading videos, and "Distance Units", which lets users choose whether distances are displayed in kilometres or miles depending on their preference (8-4 & 8-5). To ensure accuracy, the app regularly updates its database, but users can also contribute by adding missing locations through the "Add a Missing Location" feature (8-6). These tools make the My Vides screen both functional and user-friendly, giving creators and viewers more flexibility and control.
↑ My Vides screen interaction:
User watches a video and accesses the video options menu
Challenges I faced
One of the main challenges was designing without the support of UX research, which meant my decisions were based primarily on competitive analysis and personal assumptions. Another challenge was finding the right balance between drawing inspiration from existing apps and ensuring VideMap had its own unique identity. I intentionally made certain elements similar to familiar apps to provide users with an easier transition and a flatter learning curve, but it was equally important to avoid making the design feel like a direct copy.
Key takeaways
Through this project, I learned the value of prototyping as a way to bring abstract ideas to life and communicate them clearly. More importantly, I realized how critical UX research is in shaping design decisions, validating assumptions, and ensuring the product truly meets user needs.
Fun facts
The sushi restaurant featured in my mockup includes a little personal touch—the street name, “The Queensway,” is actually the street where I live.
What’s next?
While this project focused on the design and functionality of VideMap, it does not yet include marketing strategies—an essential step for successfully launching and growing any app. Developing a clear plan to promote VideMap would strengthen the project and ensure it reaches the right audience.
Equally important, conducting UX research will be critical to its success. Research and feedback will provide valuable insights into how users interact with the app, what they enjoy, and where improvements are needed. These findings will guide future refinements, helping VideMap evolve into a more effective, user-friendly, and engaging product.
