👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
- Inside Facebook Reality Labs: The Next Era of Human-Computer Interaction
- The Six Principles of Good Crisis Technology Design
- Why Competitive Advantages Die
- The Shortness of Time
- Web Vitals
- Modify Your Design for Global Audiences: Crosscultural UX Design
- The three types of burnout
- Fintech Disruption in Banking Industry Driven by UX Design
Recently, we had an event in Avaloq called Open Mic Session. It was a small event for Avaloq Manila (Philippines) and Pune (India), along with the executive board. It had two topic categories which was voted for by employees. The first category was official company business and the second one were topics submitted by anyone who wished to share anything — a hobby, an advocacy, project accomplishments, or anything under the sun, really.
One of the three employee topics that was voted in was mine. It was all about my learnings and realizations in the ten months that I’ve been with Avaloq. It was timely to sit down and introspect how I’ve been in these past months — from being torn about transitioning into a different organization during the pandemic to being fulfilled that I’ve struck while the iron is hot. It was equally timely to share it with my colleagues, as well.
Here’s a transcript of my presentation:
Hello to my colleagues in Manila, Philippines (esp. to the UX design team), Pune, India, and Zurich Switzerland. And of course, to others who are in different locations. Thank you to all those who voted for my topic.
My name is Dys. I’m with Johann in the design team. I do UX design for web and mobile banking, as well as managing the design team here in Manila.
I joined Avaloq in May last year. So, I’m fairly new. In the 10 months that I’ve been here, there are many things that help me adapt in this new environment. Let me have the honor of sharing with you 10 things that I’ve learned & continuously realizing while working in Avaloq.
10. Avaloq delivers on my career expectations
Around March last year, I made a leap of faith when I accepted Avaloq’s offer. It was at the start of lockdowns and the pandemic, after all. Apart from being scared, I was excited because every aspect was a step up from my previous career. Fast forward to now, the level up experience is true — there are many new things that I face and these challenges keep me learning & growing.
9. Our company provides confidence in this uncertain times
Avaloq’s response to the pandemic gives me confidence that despite being in this challenging times, we are in a stable and growing organization.
8. We are Avaloq, we lead Avaloq
With a level of autonomy, we take ownership of our work. We are empowered to contribute and influence the direction of projects.
7. We are empowered to be heard
We have tools and processes in place that create a safe environment for us to listen and to be heard. We have an engaging feedback platform and my managers are open to listening and coaching.
6. The support system is strong
When I joined Avaloq, the team were there to help me onboard quickly. Until now, whenever I would need help from them, they are engaged and supportive.
5. Make the most out of meetings
Meetings, virtual or otherwise, are our opportunities to contribute to plans and our voices to be heard. And also bilas (or bilaterals) — it really helps in alignments and being on the same page with people.
4. In collaboration we thrive
Rarely that we, alone, got it all figured out. That’s why when we work together, we gain different perspectives of the same thing. And that makes solving problems faster.
3. Highs and lows, they’re part of it
Whatever happens, it’s our perspective that we have control of. As long as we learn from experiences, it’s all good.
2. Have something or someone to be thankful for
A little help from my teammate, my manager who’s coaching me. Acknowledgement of these things helps me pay it forward to others as well.
And for the most important thing…
1. Have fun at work and enjoy the thing that you do
That’s what my manager actually said during my 1st week at Avaloq.
Especially during these challenging times, looking at the brighter side of things surely helps.
Thank you everyone! Stay safe and healthy.
The presentation was only 5 minutes long and I had fun sharing it from this side of the world. If any, it was a message of inspiration to make good sense of different situations that we maybe in.
In 2 months, I’ll be celebrating my first year with Avaloq and it’s a new chapter for me. I’ll find out what’s next!
- Slide number 10 by Taha Mazandarani
- Slide number 9 by Dev Benjamin
- Slide number 8 by Tobias Mrzyk
- Slide number 7 by Matheus Bertelli
- Slide number 6 by krakenimages
- Music: Shake by Anno Domini Beats
This year is brighter at Avaloq as we’re growing within UX design team and others as well.
See if there is a good fit?
- Keeping Your Design Mind New and Fresh
- NFTs are a dangerous trap
- The Many Faces of Career Reinvention
- Humble Exits
- The Antikythera Cosmos
- Onboarding Yourself
- OpenAI’s state-of-the-art machine vision AI is fooled by handwritten notes
- The fallacy of “what gets measured gets managed”
- What is a Growth Mindset?
- How to Apologize to Your Kids
Previously, we have tackled the Text stage of RE:Creation wherein we came up with a textual content of the front panel of the packaging which is our basis for this stage.
- Mark up the structure in HTML
- Mark up the groups in HTML
- Mark up the individual elements in HTML
Marking up means identifying elements, defining, and labeling them. It is just like in Text stage when we labeled elements and grouped them — but this time, we take it a step further by using HTML tags which has the capability to define where a markup starts and where it ends.
In HTML, we’ll use start and end tags to enclose elements. Once elements are enclosed by these tags, web browsers will be able to interpret and display them accordingly.
Speaking of HTML tags, they have a syntax for us to follow. Syntax is the arrangement of symbols and rules that constitute the correct form of a language just like HTML. As an example for the label “Header”, the HTML tag will be
</header>; for “Main”,
</main>; and for “Footer”,
It is one thing to make our content readable for web browsers (for them to properly interpret and display it) and another thing to make it readable for humans (us and other coders who will be reading or modifying our works).
The fact that we have marked up our content in HTML tags, that makes it readable for web browsers. Indentation, on the other hand, makes it readable for human readers. All content within structures can be indented; the same as content within groups. In this way, we could see how the content is nested by looking at it.
Step 1: Mark up the structure in HTML
- Enclose the structure labels in “less than” (<) and “greater than” (>) signs
- For their delimiters or boundaries, simply add a “slash” after the “less than” (<) sign
- Convert the labels to the “small caps” (e.g., “Header” becomes “header”)
- Indent the nested elements within the structure
At this point in our activity, we can already view the result of our markup in a web browser. In our demo in CodePen, you can see on one side what the browser will display given our markup. It’s not apparent because the text elements are still placed side by side, but the result already shows the structure we made: the “Header”, starting with “Product name”, the “Main”, starting with “Product main description”, and “Footer”, starting with “(none)”.
Step 2: Mark up the groups in HTML
- Similarly with step 1, mark up the groups by converting their labels into HTML start and end tags
- For the syntax, aside from making everything in “small caps”, convert spaces to underscores (“_”)
- Again, indent the nested elements within groups for readability
Step 3: Mark up the individual elements in HTML
Individual elements are the actual textual content inside the structure and groups. We could combine steps 2 and 3 once we’re used to marking up content in HTML.
- Similarly with step 2, mark up the individual elements by converting their labels into HTML start and end tags
- As an added effort for readability, we could remove empty lines between groups and their nested content, to make them visually grouped together
The result of our markup may not visually show much improvement but we’re already paving the path for a solid basis of HTML and CSS.
For our next activity, we will be going into the details of HTML tags. Since HTML is a language, it has a vocabulary — meaning, it already has a set of tags that is equivalent to what we created at this stage.