Mapzeal’s founder is an avid traveller & a creative story teller. Yet the pandemic forced him to pause his escapades. Being shut in is never good, and thus sparked an idea to bring the magic of the world closer.
Designing for idea validation
The founder saw a need for a virtual tour app, but wasn’t sure if he really wanted to dive head first. He wanted to give more clarity to his vision before developing the product. A quick brainstorming session showed Craftpixels was the obvious choice to spearhead a design SPRINT process. We would design UI prototypes that the Mapzeal team could use for show & tell idea validation & gauge investor interests. This approach is a neat way of making the idea tangible, enabling clearer team communication & planning ahead.
Seamless onboarding
We wanted the users to connect and understand what the app can do for them in a really simple way. Its all about travelling and exploring new places and it has to be simple. The app also has some camera based augmented reality features requiring guidance for first time use. What better way to introduce the user to these features than a fluid travel themed onboarding screen.
The dashboard UI design had to showcase recently catalogued places but not look boringly simple like standard cards layout. We then used the same “out of bounds” concept to pop images outside the cards’ boundaries to create a more engaging effect.
We also wanted to make the AR lens scanner “Telescope” feature easily accessible in one tap, and thus it was kept in the middle of the bottom navigation bar.
Sticky UI design – Managing Text heavy sections
Mapzeal founder revealed to us that there was going to be a lot of multimedia content for the virtual tour experience. We had to come up with a way of letting users habitually scroll vertically seamlessly (think Instagram) yet have ability to quickly skip or move to different parts of the text heavy content. A sticky side bar strip was conceptualised in the app’s UI design to allow users to bookmark and access different sections of the tour easily in a single tap.
Markers & beacons for indoor navigation
A nifty feature to access indoor navigation with beacons and visual markers based on direction heading. Users will use this app as tour guide in historic places, therefore guiding the users to places or monuments of interest was vital.
The UI design’s focus was to show turn by turn guidance and showcase what ahead from the user’s location. The torchlight concept was adopted to show all that’s in view ahead.
A sneak peak into the process
So you want to see the messy stuff? Don’t say we didn’t warn you 😉
Mapzeal founder at his office, explaining his vision Capturing UI design ideas at Craftpixels Exploring possible ways of visually showcasing needed user interface Understanding usage scenario of the customers — On the couch vs On the move
