Widgeting around Kogan.com Hack Day!

There’s never any rivalry between Mobile developers vs Web developers, right? Well, the intrigue of what happens in the (more exciting) mobile development space piqued the interest of our frontend and backend mates, so a few joined the Kogan Apps team along with our talented UX designer to tackle a project part of a recent Hack Day.

An idea was pitched to develop a Kogan widget for both iOS and Android devices. On any given day, we have multiple deals going on (see below for a screenshot from our website) but we narrowed it down to showcasing our popular ‘Kogan Daily Deal’ - complete with its own countdown timer to firstly, generate excitement and the sense that time is running out and secondly (and importantly in the world of eComm) to induce FOMO to prompt our users to purchase!

Divide and conquer! (How we started)

Consistent with Agile methodology, we created a backlog of tasks and divided them amongst our teammates. The web developers tackled the API, the mobile developers started their widgeting and UI/UX designed away. 

We did manage to squeeze in a quick 101 for the web devs about the wonderful worlds of SwiftUI and JetPack Compose. WD1 (web developer one) tried to relate with how Angular, Vue or React works for the frontend, which is understandable and WD2 (web developer two) amused themselves with the discussion. It did come up later in conversation that WD2 had been a Mobile developer in the past and worked with Objective-C. Despite showing WD1 & 2 the cooler things that can be achieved with SwiftUI and Jetpack Compose, they remained unconverted - but hey, that’s their loss! 

Henceforth, we will relay our learnings and achievements as conquerings!

Conquering #1

For a Mobile developer (MD) that creates the UI and writes code in either Swift/Objective-C or Kotlin/Java, they understand the pains of working with an Imperative Programming Language. However a WD or a frontend developer is blissfully unaware of these issues. They work with FlexBox and CSS, whereas a Mobile or Desktop developer has to work with making the UI as pixel perfect as the designer conceptualized. With a Declarative Programming paradigm like SwiftUI or Jetpack Compose, it makes it easier for our MDs to create the UI, similar to the ease of our teammates using FlexBox and CSS.

When the designs were completed, the next task was to compose the UI using Declarative. As we were waiting for WD1&2 to finish the API that would retrieve the Daily Deal data, static images were used as a placeholder. 

Conquering #2

There was no API in the Kogan-verse to consume the Daily Deal data, so a handy bit of reverse engineering helped WD1 locate the data source such that they were able to create a wrapper to provide the necessary API endpoint that would return Daily Deal structure.

Matching the UI designs accurately on the Widget using SwiftUI was difficult! Where SwiftUI allows for composing new components quickly, it also has its fair share of quirks because the layout gave us some grief! We did end up getting the images to load, but getting the timer to tick away per the three boxed component design proved too challenging to hack on the one day.

Conquered

We completed the widget family for various sizes per the screenshots below. SwiftUI allows for previewing multiple views simultaneously. 

Conquering #3

With SwiftUI or any framework, if we embed data into a scrollView, we have an instant list of multiple items that can be scrolled and viewed. We spent time trying to make scrollView work, only to realize that it crashes the code and SwiftUI does not provide a scrollView to a widget. So the List of Hot Deals had to be limited from a scrollable list to a list of 3 items.

Conquering #4

Making a lot of formatting functions and styles only highlighted that the designs could be improved. While we were working with a declarative way to create the components, having sizes that were fixed ranging from 11 to 22 points was not the best idea. In hindsight, we could have followed the Apple methodology to declare the styles, just like in CSS, and then apply a Heading, Body, type tag etc to an element rather than adhere to strict font sizes. 

Conquering #5

In the designs there were places where the Price did not have decimals and places where the decimal place digits had a smaller font. This got complicated since the textbox that hosted “$479.75” needed to be split into the three components, “$”, “479” and “.75”, then they needed to be formatted accordingly.  So similar to the TimerView above, and to make it customisable, we put a flag in to conditionally display the decimal points to work for both “$479.75” and “$599” type designs. Passing the font sizes and getting the decimal part of numbers is quite painful when dealing with computers storing numbers in 4 bytes. 0.99 would become 0.9900000000000000001 or 1.00 would become 1 and not have any trailing zeros. Our Javascript friends could use strings to take the characters around the decimal point. However we used Swift NumberFormatter to provide a minimum and maximum of 2 decimal places to ensure consistency, and used the suffix command to get the last 2 digits.

Finish

Our conquering process to develop a widget was an interesting one. Experimenting with the quirks of the language and technology enabled us to highlight learnings that were valuable and applicable to our day to day development work as Mobile engineers. And working alongside our WD friends harmoniously to achieve our goals, while showcasing to them the wonderful world of app development, is always a bonus. Onwards and upwards as we look forward to conquering the next hack day!

Celebrating International Women’s day

Tuesday 8 March was International Women's Day, a celebration of women and their achievements. A day of celebrating the social, economic, cultural, and political achievements of women. This day also marks a call to action for accelerating women's equality. This year we thought we’d celebrate by spotlighting an incredible group of women who work in the Kogan.com engineering team. We’ve cultivated an inclusive environment to ensure that women in our team can thrive, from providing equal opportunities, coaching and mentorship at every career stage to various benefits that support home and work life. Here’s what this group of Kogan.com women had to say about why they love working in our product, design & engineering space and how to grow—personally and professionally. Check out their stories!

Why do you love being an engineer at Kogan.com?

“ There’s always something that pushes me to get out of my comfort zone, whether it’s a simple feature implementation or a head-scratching problem. I’m surrounded by very talented and driven teammates, so there’s never a boring day. Most importantly, I feel supported and I’m constantly reminded that working within the Engineering space doesn’t have to be monotonous.”

Ana Teo, Software Engineer.

“ Working in the Engineering Team is rewarding because we get to work on a variety of features and continuously learn new things. We have an amazing, talented team and the work environment is friendly and fun.”

Hanna Koskela, Software Engineer.

What do you love most about the product and design space at Kogan.com?

“ Before I became a member of the Kogan.com engineering team, I was an avid customer. I loved the vast number of products that Kogan.com offered and that I could buy anything from home appliances to clothes to setting up a credit card. Being a pre-existing customer I was already fairly familiar with the end-user experience, after joining I got to see how things operated to make the whole platform run smoothly. I enjoyed meeting the people behind the scenes, from the people involved in the financial operations to the customer care team. I’ve learnt so much from these experiences. I love that there are always new things to learn. This has encouraged me to think outside the box and keep developing my professional skills. Our team has an incredible opportunity to grow as every new project provides new experiences to learn from. No day is the same and I always feel like I am learning something new.”

Hien Do, Product Owner.

“ We don’t limit our products on e-commerce itself. We have brought Australians the most in-demand products and services such as Kogan Internet, Kogan Insurance, and Kogan Super. As a designer, I will continue exploring the possibilities with my colleagues, and designing a user experience that can benefit our customers as well as support our Kogan staff.”

Mengfei Hu, Senior User Experience Designer.

What comes to mind when you think of growth in the technology space?

“I think about growth and development as a tool to cultivate ownership. The more responsibility you give someone, the more ownership they have. Our team provides a wide range of growth paths for engineers and within our product design space. Team members get to really think about the details of what they want to do and chart their path so they get to have a high impact. Having clear goals and direction and using tools like CultureAmp, provides clarity so that each person knows what success looks like and how to get there.” 

Anita Rajalingam, Talent Acquisition Lead

“User experience has become one of the most widely used term in the technology space. Kogan.com is well known as one of the largest ecommerce platforms in the technology space that cares about their customers’ experience. They are meticulous about the product design as well as the functionality to ensure the users’ needs are always being listened to and responded. It’s such an honor for me to work as Senior UX Designer at Kogan. I endeavor to continue bringing immersive experiences to my product users.“You’re limitless if you go out of the box”

Michelle Huynh, Senior UX Designer

What is the best advice that you’ve received, or want to share to other women in technology?

“Perfectionism is the enemy of progress” 

Working in a male-dominated field, it’s easy to get into the mindset of having to “prove yourself” and wanting to do things perfectly. I learned early on that nobody will be as critical of my work as I am. Don’t let your sense of perfectionism stand in the way of delivering great work. 

Sandra Kärcher, Senior Product Manager

“Be exactly who you are and stay true to your values! The key to thriving in your work environment is authenticity. Also, take on any opportunity to learn something new - keep an open mind and don’t be so afraid to not succeed that you never try different things. The technology sector is incredibly diverse, and people are surprised that I work within the field despite not having formally studied computer science or IT. I remind myself every day that I don’t have to know everything, I just need to bring together the right people to find our solutions.”

Christine Kha, Product Owner

Supporting and celebrating women worldwide

We’re thrilled that we get to celebrate the accomplishments of women around the world—and within Kogan.com. Keen to see how you can take your engineering career to the next level at Kogan.com? We’re growing our engineering team and would love to hear from you!

Technology Talks

I recently delivered a short talk to the Kogan.com engineering team on GraphQL - a technology that has not yet seen adoption at the company, but for which there arguably exists a need. Customers shop on Kogan.com across devices with different data requirements, and our reliance on traditional REST APIs leads to cases of under-fetching and over-fetching. GraphQL is a potential solution to this issue that can also make calling our APIs more simple, flexible and intuitive.

Presentations like these serve two main purposes: to educate and to inspire. Hosting regular discussions around technology practices helps share knowledge between engineers and identify where improvements can be made. At Kogan.com, we hold regular presentations and discussions about technology, typically hosted by members of the engineering team. These come in two flavours – hour-long “tech talks” and 15-minute “lightning talks”. Each is held roughly once a month, and the responsibility to host them cycles between each member of the engineering team. My presentation was a lightning talk, but another engineer in my team recently delivered a tech talk on OpenAPI practices. An effective talk appeals to all members of the audience. Despite having experience with OpenAPI, there were still valuable things that I learned.

Technology talks are important to organisations, so that they can share the best ideas and keep up with continual change. There will certainly be more talks this year at Kogan.com; I look forward to learning more about what my colleagues have to share.

DECEMBER 2021 HACKDAY (PART 3) v2

Tick tick, boom gate opens!

And by boom gate I am referring to the Kogan.com office car park boom gate. Kogan.com office parking spots are a scarce resource, but the staff members that are lucky enough to have an allocated spot aren’t always using them. Most days there is enough space for other staff members to utilise the parking spots, but there aren’t many remotes to open the car park boom gate. Is there perhaps a way to remotely open the boom gate by using the Kogan app only, without needing an individual remote?

During the recent hack day, team “Kogan Boom” took on solving this problem. We also managed to surprise and perhaps thoroughly confuse some passers-by when we were testing our solution and randomly opening the boom gate from the comfort of the office. This project had everything; electronics, hardware, software, app integration. It was a fun action-packed day for the team and everyone got to contribute.

The Boom Gate project comprised of three software systems:

1. The Boom Box: An ESP32 wired into the physical RF remote control for the Boom Gate.  These remotes are in short supply and why we wanted to build the project in the first place!

2. IoT Cloud: We used AWS IoT Core to register the ESP32 as a ‘Thing’.  AWS IoT made it simple to generate the MQTT authentication certificates that were copied to the Arduino code running on the ESP32.  We created pub and sub topics via AWS MQTT for which to issue commands to the ESP32 controlling the gate and for the ESP32 to communicate back.

3. Web App: A mobile app and web service that enabled authorized users to toggle the car park Boom Gate. Instead of registering this service like another ‘Thing’ - we used AWS boto to publish the message to the MQTT topic and generated a service account for authentication with permissions to publish.

 Overall, when a logged in user hits the ‘Open’ button in the APP, a POST request is made to the web service which then pushes a message to the MQTT topic.  The ESP32 subscribes to the same topic, receives the message and toggles the PIN which connects the circuit on the RF Remote Controller and opens the gate.  The RF signal from the remote conveniently reaches the Boom Gate from within the office!

The Electronics

 The electronics part of the project included connecting a physical car park remote to a wifi enabled Arduino chip, requiring some delicate soldering work. Well it just so happens that Hanna used to do soldering professionally! She had a summer job at an electronics factory a long time ago and got to do a lot of soldering. Hack day impromptu workstation pictured below. It is good to note that neither staff nor equipment was harmed during this process. 

The ESP 32 Arduino chip was programmed using the Arduino IDE. We connected the ESP32 chip using USB Micro cable to our laptop. Testing whether the code is working or not is one of the most challenging parts. Using the IDE, the code is then uploaded to the chip. Then using a multimeter, we checked whether we received the expected HIGH/LOW signals on the right port.

Using the pin diagram we picked pin 5 to write high/low. Thee ESP32 chip was then soldered to the remote which requires a HIGH single to open up the boom gate. Since ESP 32 is WIFI enabled, therefore the code running inside the chip subscribes to relevant AWS Iot pub/sub channels and listens for the relevant incoming messages from AWS ref. https://iot-esp32.workshop.aws/en/module3/configure_esp32.html. Based on the message from AWS, which in our case was plain “open”, a HIGH signal is sent to the remote which then opens the Boom gate. We didn't need to program anything for closing the boom gate as this was handled by the boom gate itself.

The Mobile App and Web Service

Mobile app section of our team worked on the design and implementation of a new “Kogan Boom” app feature, which is only displayed for Kogan.com staff. There is a button to open the boom gate. Since the boom gate closes automatically, a specific button to close it was not needed.

When a user taps the ‘OPEN’ button, a web request is sent to the web server which then publishes a message to the AWS IoT MQTT topic that the ESP32 is listening on.  We achieved this without needing to register the web service as another IoT ‘Thing’ and instead used the AWS Python boto library to publish to the topic via a service account.  This was fairly trivial once we figured out the command to run!

The service account we created was given the AWS IAM access policy: arn:aws:iam::aws:policy/AWSIoTDataAccess so that it could publish to the IoT MQTT queue.

Putting it all together

 The finished hardware prototype turned out to be a rather sketchy-looking box full of electronics and wires. Some of the time the box was even ticking! Perhaps the name “Kogan Boom” was not ideal after all? 

Our hack day project came together nicely in the end and we were able to open the boom gate using the button in the Kogan.com mobile app. All in all, it was a successful hack day full of collaboration, new learnings, laughter and some very tasty donuts! We are very much looking forward to the next one. 

My experience onboarding with the Engineering team at Kogan.com

Can you describe your experience leading up to your start at Kogan.com?

The recruitment process for a software engineering position at Kogan.com was fast, smooth and enjoyable. The whole process - from the initial recruiter conversation to the final interview included a focus on technical excellence and soft skills. It began with a phone conversation, followed by a technical interview, and then a meeting with our Head of Engineering, CTO and Director of People & Culture. The process was efficient and purposeful.

Now that you have joined the team, can you describe what your remote onboarding experience has been like?

I joined Kogan.com at a steep inflection point in the growth of the engineering team. The size of the team roughly doubled in one intake of new engineers. Given this, one would expect onboarding to be chaotic and met with challenges. The reality was contrary to this - onboarding was a pleasant experience met with ample support.

My first day was highly educational and filled with meetings covering technical architecture, business context and culture. Given the pandemic, everything was remote. However, the team did a wonderful job in organising an onboarding that was not impaired by work-from-home conditions. The company even delivered us all food for lunch.

During onboarding and day to day where appropriate, the team practices pair programming. Tell us more about your experience:

Pair programming has been an encouraged practice throughout onboarding. It has provided me with a short feedback loop for rapid upskilling and given me the opportunity to socialise with other engineers, despite the remote conditions of work. In some ways, remote pair programming has advantages over its in-person counterpart. It ensures that both engineers get to use their ideal computer setup, allows for concurrency in certain operations (such as each engineer simultaneously exploring different parts of the codebase on their own screens) and does not require sharing desk space.

Now that we have returned to the office and are working in a hybrid environment, what are you enjoying most about meeting your colleagues in person?

I am enjoying meeting my colleagues in-person. Although Kogan.com has done an excellent job in maintaining company culture whilst we’ve worked remotely, there are some aspects that cannot be replicated. It has been nice to experience the full culture, have lunch and grab coffee with others. I tend to ask a lot of questions, and it’s easier to do that in-person.