A Shopify app that makes discount campaigns easier to understand and harder to resist - helping merchants drive more revenue through smarter promotions.
Role:
Web / UI Designer
Canada, Toronto
Date:
2022
#
Wireframing
#
UI Design (Visual)
#
Web Design
#
Design Systems
#
Interaction Design
#
Illustrations
01. The goal
Main challenge
The goal was to shape the brand's tone of voice and redesign the website with a consistent visual language to make the application more appealing.
02. Design process
01.
Discovery
02.
Wireframing
03.
UI Design (Visual)
04.
Design System
2.1 Discovery
I worked with Daniel, the founder, closely to understand the need, the product, and its meaning.
I prepared the moodboard with different design directions, and together we established the vision for the UI design,which was:
Inviting
Playful
Colorful
Inclusive
2.2 Wireframing
After we established the visual direction based on moodboard, Daniel provided copy and I moved on wireframing the website structure.
2.3 UI Design (Visual)
During the visual design phase, I tried different shapes, colours, and fonts to find what best represent the brand’s tone.
In the end, we chose a simpler direction, but here are some of the options explored along the way.
2.4 Illustrations
I created simple illustrations using shapes and UI elements to maintain a playful and inviting tone for the website.
The last part of the dance was to prepare everything for development with the system in mind.
2.5 Final Result
03. Outcome & Recognition
Shopify announced Abra was selected as 1 of 25 of the best Build for Shopify.
Abra team continues to push the boundaries of the promotion experience even further.
04. My Learnings
Collaboration is key to success
Communicate and collaborate as much as you. The more you know and understand the context the better results will be delivered by the end of the day.
Do one more
If you think your design is good, don’t stop there. Try one more variation, explore a new direction, test a different combination. Even if it doesn’t work, you’ll always learn something from the process
Stay open and flexible
Don’t be afraid of the change. Design is not a finish line. It’s a continuum. Adapt to the change and embrace.
