The Task
Design an app version of the MoPals website. The app will enable users to find businesses near them to earn and redeem MoCoins. Users can write a review, share photos, and/or check into a business to earn MoCoins. Users must be able to get their personalized MoPals ID scanned by businesses. Users will also be able to pay for their purchases with their MoCoins.
The Role
My main responsibility when joining MoPals was designing everything related to the app. This included designing and presenting wireframes, prototypes, high-fidelity designs, and app store graphics. Along with designing, I also prepared the necessary files for both iOS and Android and all of their resolutions.
My Process
I’ve always been on Team iPhone and was pretty familiar with their UI. My experience on Android was minimal, so I actually bought a Nexus phone from Kijiji. The first step was to learn as much as I can about Android’s KitKat. Once I was confident enough with material design, I began planning and sketching ideas and designing wireframes.
Because I had to design Android and iOS, I decided to focus on Android first. I started to design on paper first to figure out the overall look and feel while labelling important features that need to be included. I then would collaborate with our Android developers for feedback on design and overall experience.
I then uploaded the designs into a prototyping website (InVision), and this was a great way to experience the flow before actually beginning any development. I passed the link to several coworkers to get their feedback. After several rounds of revisions and collaborations, I was able to finalize the wireframe design of the app and move on to designing the app.
Working with our web designer, we collaborated on incorporating the existing web UI into the app design. I wanted to keep the look and feel consistent among the different platforms from colours, iconography, and typography.
My next step was to brief our developers about the overall app experience along with detailed spec sheets. This included font details, spacing/margins, on/off states of CTAs, and anything else that they would need to recreate my designs as close as possible.
When we had working prototypes, I gave my first pass of the app. I would find problems, give feedback, and even changed some designs because what was designed didn’t work. Once I felt the app was in a good place, we passed it along to our QA team. The process of test, reiterate, and repeat also appears at this stage until we all felt our app was ready for the world.
My next step was to brief our developers about the overall app experience along with detailed spec sheets. This included font details, spacing/margins, on/off states of CTAs, and anything else that they would need to recreate my designs as close as possible.
When we had working prototypes, I gave my first pass of the app. I would find problems, give feedback, and even changed some designs because what was designed didn’t work. Once I felt the app was in a good place, we passed it along to our QA team. The process of test, reiterate, and repeat also appears at this stage until we all felt our app was ready for the world.
The Outcome
I never realized how fun it would be to launch an app, let alone one for both iOS and Android! I learned new skills (app design and dev) and found great services/tools to help speed up prototyping and iterations. This experience gave me the confidence to try new things and not feel too overwhelmed with learning something totally new.
