Designing and developing completely new mobile apps for three different platforms — iOS, Android and Windows Phone — in just two months?
It sounded like a crazy idea at first. If you’ve got experience designing a mobile app, you know how much thought and detail a designer needs to put into creating a good mobile experience. But soon enough, the plan seemed like a viable one as long as we had a clear plan in place along with the necessary confidence in what we were about to create.
First Up: The Windows Phone App
We had researched Windows apps but this was our first foray into this platform, so we wanted to tackle it first. Through the process, we actually discovered some solutions that ended up helping our iOS and Android efforts as well.
As lead designer Del Anicete on the Windows project puts it, “I really liked the visual design behind the panorama control. It’s something totally out of the box and unorthodox to non-Windows patterns, but makes sense for Windows’ heavy left-to-right gesture.”
Next: iOS and Android Design Skeleton and Discussion
Once we wrapped up Windows mobile, the design team quickly switched gears, jumping onto iOS and Android. Our team structure was super agile: 1 product manager, 1 iOS designer, 1 iOS developer, 1 Android designer, 1 Android developer. Wow, right? Having a small team helped facilitate an extremely efficient and agile collaboration. With a lot of whiteboarding, sketching and discussion, we started to see our ideas come together.
These initial discussions helped us craft a wireframe, allowed product management to scope out a minimal viable product (MVP) and enabled developers to prepare the necessary foundation for these apps. Once we agreed on the skeleton structure for the apps’ design/interaction patterns, primary user workflows and MVP feature list, it was time to move onto the real design.
Designing for Different Platforms — iOS and Android
Naturally, questions were raised around consistency and differentiation between and across the two platforms — what things should stay consistent and where did it make sense to differentiate between iOS and Android? It was my feeling that the interaction backbone should be consistent, so that a user would get the same Zipongo experience no matter which platform s/he might select. That said, interaction details could then be customized by platform. For example, things like the contextual menu’s position and interaction, inclusion of a Back button, motion between pages and the specific icons employed (e.g., share). By doing it this way, we felt we could support and enhance usability as well as the brand.
We also looked at creating a consistent experience from Web to mobile. So we set out to use the same imagery, icon sets and copy between Web and mobile as much as possible in order to provide a seamless experience to users wherever they might be viewing Zipongo.
Inspiration and Adoption of Google Material Design
We gained a lot of inspiration from Google’s material design. It’s served as the jumping off point for where we’ve differentiated the Android design — by adopting certain patterns on Android — from iOS design.
UX Lesson Learned: The Devil’s in the Details
If you’ve designed a mobile app at least once, you will no doubt agree that it’s all about the details. The more you polish and fine-tune the design, the better the quality of your app will be.
Interaction Details
Since we were working on a time crunch, we invariably missed small UX design details when we first got started. In the early days, we didn’t have enough big picture perspective to sketch out the entire application. Over time though, we started to unsurface a lot of edge cases (e.g., empty states, error messages and so on) and quickly came up with the design to cover off on these scenarios, handing off to the developers to build into the app.
Motion Details
Since mobile’s small screen translates to very limited real estate, we had to rely on motions and transitions to explain the relationship between objects and pages. Custom transitions are oftentimes treated as a nice to have. However, since we were enthusiastic about introducing motion, we made a motion prototype and championed the design idea to the team. Fortunately, our developers understand the value of motion, so we may be able to add some custom transitions in our second version (V2).
Visual Details
It requires a great deal of motivation to stick to our quest to hammer out all of the finer details until they’re perfect. It’s probably not likely anyone on your team will ask you to design a custom progress wheel, but as a designer you might dream up an awesome custom progress wheel with eye-catching animation. And it’s likely no one will really care (or notice) if a particular button alignment is a pixel off, but this tiny discrepancy will certainly haunt any designer worth his or her weight in gold.
As we continue to forge ahead with our design work, juggling extremely tight deadlines, we find it a constant challenge to stay on top of all of the little details. Still, I firmly believe that by pushing for perfection, the quality of our design will only continue to improve. The first version of these apps is a good start, but we’re working hard to make them even better. The journey continues.
Stay tuned for V2 — on its way to you soon.
Nayoung is Zipongo’s creative director. Prior to Zipongo, she led Adobe’s UX efforts for Flash Pro and Edge Animate among other major initiatives. Before Adobe, Nayoung gained experience in a wide range of industries, from designing mobile devices at LG Electronics to manufacturing eco-friendly furniture at Grini.
