Designing a better map
“ Opportunities around me ”
The best design always arrives from the next time. When we’re dealing with the demand from an ever-evolving market, it’s simply impossible to create something once for all.
It’s been over 3 months since we released the previous big iteration, half a year since the app was first launched. At the beginning, there were only a handful brands willing to participate. Today, we have cover all major chain brands.
This alone worths a boutique to celebrate. However, there are side-effects, too, which critically challenges our previous design. I’d like to describe how we resolved these issues in a minute. Before that, let’s clean them up a bit. I’d like to group them into 2 sets of scenarios.
The first scenario is that the user switches to the map view. He stares the map for a moment and immediately knows his own location and that of the stores with job vacancies.
The second scenario is that the user dives deeper into a store to learn more about it ( Photos, vacancies, etc).
These are two of the most frequent actions when a person is looking for a job. As more and more stores go online, the store cards become chaotic by stacking over each other. It makes the map almost impossible to manipulate, which, of course, is something we don’t want to see.
We optimize the first scenario as follows:
1.Reduce the Brand Card’s size.
We shrink the card size to a half. This alone allows the screen to handle twice more cards at once. Take the iPhone 6 for example, we can now put 40~60 cards without compromising readability.
2. Replace “Dynamic” Folders with Automatic Zoom and Progressive loading.
Let me be frank, the “Dynamic” Folders we used to have just sucks. It’s rigid and slow. The overall idea is great. However, we underestimated the effort to implement it well.
Here’s what we get now. When the map view is opened, it zooms in to an area of 5km around the user automatically, along which only brands at this area and scale are loaded. When the user pans or zooms the map, new cards are then presented. Even though the mechanics is now new, it just takes us so long and effrot to nail it. I have to thank our talented developers to make all these happen 👍.
Let’s continue the optimization 🌈.
We redesigned the blue indicator icon representing the user’s location. It now shows the image of the user and, ripples. We think these will give the users a easier and more immersive experience.
It’s a trend that our phones are becoming larger and larger. We ask ourselves whether we could take advantage of the larger screen ? Our answer is the Filter Bar. It’s big and beautiful, easier to click, and, it stays there all the time. Whenever two cards overlaps, one tap on the Filter Bar would hide the covering brand, revealing the other cards underneath ➊.
These are the optimizations we make to improve the first scenario.
We don’t have issues as critical as in the first one, but we do think something could be done to make it easier and faster.
We replaced the dedicated Store Page with Store Preview Panel. This panel will slide up with the same amount of information as the Store Page when a Store Card is on tap.
This … is simple. Yeah, we think so, too. Simple is exactly what we want it to be! It’s hard to believe it takes so long to get it right! The benefit of this panel is obvious: The user can handily learn more about the store without losing the context of the map. Btw, this design also allow the users to change stores on the fly, which improves the browsing experience dramatically.
Conclusion
“ It takes effort to make things great.” Can’t agree more. Even we did our best in this round, it’s still not perfect given a tight schedule and limited resources. The key point is that we are iterating. We provide our software as a continuously maintained service. When our users give feedback, we listen. When they have problems, we solve. As long as there is still the demand, I think we’re doing the right thing.
Talking about tools, whiteboards always come handy to jot down ideas. I personally also use 53 Paper. It works the same as whiteboards. When it comes to detailed UI and graphics design, Sketch and Illustrator always shines. We mainly use Framer to mock the interactions now. Nothing is better than touching your own designs. Oh, at other cases, we would also use Axure or Adobe XD to mock the user flow. That’s said, we’re not limited by tools, we only use them to design better, communicate more efficiently, and, all in all, provide values to our users.
➊ We didn’t implement the Filter Bar in the actual build due to a tight development schedule. However we do think it’s a great idea. We’d like to reserve it for future plans.
I ’m launching my own portfolio achieve. This article is actually part of it. Click the icon below to take a look. I think it’s cool :) Oh, do note it’s still under development and most links are still unavailable. Besides, it’s still partly in Mandarin. Come on, Rome was not built in a day. Just give it a try.
Have fun🖖
