A quarter past redesign: learnings from 3 months of working on a white-label mobile app
The pandemic paved the way for a career pivot as a UX designer.
Starting point: a Career Pivot.
When the pandemic broke out, I had no choice but to pivot my career. I was working as a UX Consultant with many discovery phase research work (service safaris, field research, contextual inquiries, etc). A lot of my projects and plans were affected due to the lack of mobility, the rigid quarantine measures, and the need to cut budgets. As difficult as it was to see so many potential projects and plans get put on the back burner, it was what it was and I had to move on.
Not long after, an offer to design for a white label mobile application came. While I enjoyed the design and prototype process, most of my past projects asked me to do more of the UX research work. This was a new and welcome challenge. It was time to put to further practice what I talked about.
I was lucky to come in at a phase when they were considering a redesign. More than 3 months into the role and just recently handing over my design to the developers, these are some things I’ve learned:
1. Redesigns are every new designer's dream but also the development team’s nightmare.
Fresh into my role, I was asked to redesign the check-out flow. Another one of my first tasks involved looking through all the current implementations of the application and see points of improvement to base the app redesign on. I wanted to make the fonts and colors consistent, I also wanted to change how the products were presented and I wanted an overhaul to the checkout. My manager and the CEO loved the ideas. I brought in fresh ideas and pointed out some things they didn’t notice since they’ve been with the app for too long. So things were approved. But! I headed back to the drawing board after presenting it to the development team. I soon realized that a number of my designs needed hard coding which meant longer development time than what was planned. While the majority of my designs were passed to development, there were a few parts of my design that we had to tweak in the interest of narrowing down to the essentials and lessening development time.
This could have been avoided if we had included developers in the design process earlier. Instead of going through 2–3 iterations of the design and then running them by the developers at the end only to find out, it couldn’t work with the timeline. I had to work smarter and collaborate.
Since we had some outsourced developers, I had to make sure that my design followed the timelines they had agreed on. As this was something agreed upon before I joined the team, this meant I had to adjust to that timeline. There was no room for an entire process overhaul.
I was lucky that the problem was fixed very simply. In fact, it was a matter of opening communication lines for better coordination and collaboration. I was introduced to the developers and added to a Slack group. Whenever I came up with a concept, I’d easily ping the developer assigned for feedback before I presented it to my manager and CEO. This gave me a better understanding of what was feasible, what could be done but required a few more days, and what was difficult to integrate. This also helped my manager and CEO make executive decisions (a.k.a. spend more resources to develop a certain feature).
2. Don't forget that you support and enable your clients in their work.
As a white label application provider, you essentially give your clients tools to better their business operations.
You have to keep in mind that you support and enable your clients to do their work faster and better.
This doesn’t mean you give them an inflexible template. Context-specific considerations like related to business, politics, religion, etc. affect how certain parts of your application are designed. Even if something is white labeled there are some customizations that need to happen due to context.
In the past, I had to come up with a different set of banking icons for a finance client because they said that: “Piggy banks were not the best image to use when the majority of their clients were Muslims. It felt rude and more reasonable to change the image to olive trees or money bags.”
Another time, we had to change how a cart computed the total cost at check-out because Country A had different laws on taxation from Country B.
Customizations can come in many forms: visual or structural. But my last (and favorite example), the customization that had to happen was more on improving the diversity of icons that were used in the application. (Read: The issue of diversity in icon design by Monica Martei)
A team I was mentoring at that time, was designing an application focused on helping women save money. It was a B2B solution. How they branded it showed promise. In fact, a number of businesses employing mostly women had signed to include it as part of their employee benefits.
However, during testing, the icons that they used bothered their target users. The icons used were all male. When users selected their occupation, only “stay at home mom” and “nurse” used female icons. “Business owner”, “Teacher”, “Lawyer” all had male icons/avatars.
While this seems like a small detail to some, remember, this was an app that focused on financial solutions for women. The research that we conducted showed that it affected how they felt about using the application.
In fact, 92% of the respondents mentioned during the debriefing that “it would be better if the images were female”. There was even one individual who left a strongly worded comment that said “You need to think of what subtle messages you make. This is an app for women, why are the professionals male?”
You also have to accept and understand that it is your responsibility to design and develop your application in a way that is compliant and inclusive to the social, political—and even, geographic— context. Otherwise, that would entail another level of tweaking on your client’s end that delay them from actually using your product!
3. Simplicity and consistency—always.
A white label application means that there are a number of components that will be rebranded and possibly even translated into a different language. You need to make sure that you don’t over complicate your design with wild colors or overly thin fonts that hinder accessibility. You also need to accommodate the possibility that a 2-line sentence in English might not be the same when it gets translated to another language. Keep visual and verbal components simple, concise, and consistent. (This applies to the tone and brevity of your interface's content.)
4. Familiarity breeds comprehension.
Applications use icons to help users understand what a button for. The icons that you use should help users understand what they’re for without having to exert so much effort in interpreting them. (Read: Bad Icons by Nielsen Norman Group)
As much as possible, use text labels with your icon. (Read: Icon Usability by Nielsen Norman Group)
When you do not use text labels, avoid unfamiliar images or icons. Go with what most people can understand otherwise you make it less usable. (Read: Icons as part of great user experience by Smashing Magazine and 7 Principles of Icon Design by Helena Zhang on UX Collective)
Endnote: Work in progress, still learning...
It’s been quite a different experience designing for a B2B2C application. Even more different when you design for a company that is a white label provider to clients in various regions with brick and mortar stores. You have a lot more considerations when you build and you have to keep your mind open to context-specific scenarios.
Along the way, things can get confusing when you have a lot of input from a number of clients. But I can say that it's a good kind of chaos!
I’m still getting the hang of things but documenting discussions, communicating with the product team, and having a priority list for each build has helped me stay sane and on track.
