15-Apr-2024
Last year I got the opportunity to be coached by the incredible Amit Das aka Godgeez. We were to work together to build a muscle on presenting sharp, articulate & opinionated research. We further broke it down to 6 specific skills that wanted to work on as noted below.
This blog covers the fifth of six assignments in the coaching program. UI efficiency.
The Assignment
Link to reference image, credits Jack R on Dribble ↗︎
Why UI?
A researcher needs to have the skill to create impeccable UI for several reasons. Firstly, understanding UI design enables researchers to have a tangible impact on the products they're studying. Without this capability, it's challenging to provide meaningful insights or contribute effectively to design decisions.
Additionally, being able to create UI designs is valuable for producing prototypes used in testing ideas, facilitating quick ideations during tests, and presenting concepts to larger teams. This allows you to be hands-on & communicate findings more effectively with designers and other stakeholders.
This assignment aims to equip researchers with the necessary skills to bridge the gap between research and design.
First Iteration: 80% there
Like the other assignments, this one also underwent several rounds of iterations. I thought I had nailed it until Godgeez blurred the design over the original picture, revealing inaccuracies I hadn't noticed before. That's when I learned the importance of achieving 100% accuracy when asked to replicate something.
I realised that there were alignment issues in multiple places, some text didn't match up with the original image, details like font weight were inconsistent, and the distortion of the cards was completely off.
Interestingly, when I viewed my version without the original picture as a reference, it seemed to be working perfectly fine. This experience taught me the importance of precision and attention to detail in design replication. Go the extra mile!
Second Iteration: 95% replicated
For the second iteration, I had a clear strategy: constantly reference the source image to ensure accuracy. However, this proved to be more challenging than anticipated. Nonetheless, this challenge pushed me to learn several new skills. I learned techniques for distorting cards at an angle, creating patterns on cards, and implementing clever spacing tricks. Below is the result, with the original image placed above at 50% opacity for comparison.
Final screens
The final part of this assignment was the most intriguing. In this iteration, I introduced my own elements. Having replicated the assets and understood their structure, the task was to apply them to a specific context. For instance, the first screen could represent the "Plus" screen, displaying the user's savings and coupons through their membership. The second and third screens might serve as the home screen and payout screen of the Urban Company partner app, respectively. Additionally, the colors used are variations of the purple found in UC's brand color palette.
Learnings
Repeatition helps
Replication is the first step to application
When replicate make it a 100% accurate. In UI use the opacity to compare two screens
Once replicated try to apply to a specific context
Thank You !