System Purpose

The 'addzme Portal' is a comprehensive web application designed to streamline the management of various components within the addzme ecosystem. This system primarily focuses on the addzme iPad POS (Point of Sale) menu, pricing, price tiers, reporting, loyalty system, as well as overseeing the addzme scanner app and brand settings for the addzme loyalty app. Additionally, it handles the licensing for additional software seats across various products in the addzme product suite.

In this project, my role as the Front-End Developer and UI Designer involved designing and developing multiple pages with a clean, modern, and fresh aesthetic. The primary goal was to create a user-friendly and intuitive experience for users interacting with the addzme Portal. This web application acts as a central hub for controlling and configuring various elements related to addzme's offerings, ensuring efficient and user-friendly management of their services and products.

Keypad Designer

An example page I designed and built within the 'addzme Portal' is the Keypad Designer - its primary objective is to provide a simplified, user-friendly interface that simulates the way the iPad Menu would appear to end-users using the addzme iPad POS (Point of Sale).
Users can directly edit and customize how the menu is presented, focusing only on the essential fields and to allow users to configure how products are displayed, without delving into complex features. For more advanced functionalities related to the product menu, users are guided to visit the "Advanced" tab, where they can access additional settings for more intricate features such as Kilojoules, Barcodes, Report Categories, Product Sort Groups and more.

The Keypad Designer page was constructed to provide a responsive design that emulates the iPad environment, ensuring that it functions seamlessly across desktop, tablet, and mobile devices. To enable drag-and-drop functionality for reordering various sections, including product categories and modifier categories, the page incorporates jQuery's drag and drop library. This feature enhances the user experience by allowing users to easily rearrange elements to suit their preferences, making the customization of the product menu an efficient and user-centric process.

Specifically in the Keypad designer, I built the base of the design through my own CSS classes and ensured that the Keypad designer simulated iPad was responsive and the would be desktop, tablet and mobile friendly. I also used the jQuery drag and drop library to implement reordering various sections such as product category and modifier category order.

The below video demonstrates various functionality in the Keypad Designer including editing, adding and unlinking products in the product menu displayed on the addzme iPad POS (Point of Sale).

Abstract

This case study delves into my role as both UI designer of the addzme loyalty app, and UI designer and developer for a loyalty app's web integration front-end.

The aim was to craft a user-centric interface that allowed for multiple brand's loyalty program to fit and work smoothly, enhancing user engagement and loyalty all in one location. Through thoughtful design and modern web technologies, the outcome led to improved user experience, ultimately boosting customer satisfaction and retention while also allowing quick and easy maintenance and updates from the teams perspective.

Introduction
The business was looking to serve their customers (brands) by being able to cross advertise, but also improve customer loyalty across the board. To tackle this, a loyalty app was conceptualized that allowed a user to have a quick sign up process, and scan their unique digital card from their app into the addzme pos (point of sale) iPad app or addzme scanner iOS app in many different brands, and earn points and rewards in each and with the brand's unique loyalty rules and rewards.

This meant for the app design and the web integration that the design had to take into account all the different types of rules, points and reward types that the brands could assign, and the customer could receive.

Objectives

• Create an intuitive, brand-aligned app design and web interface that would align with this.
• Create a scrolling feed that allowed brands to submit posts for cross advertising.
• Develop a responsive design for various mobile devices for the app and web interface.
• Seamlessly integrate front-end with the app's back end.
• Optimize performance for speed.
• Within the web interface, ensure all sensitive data was protected by modern security measures.

Approach
 Research and User Insights

• Competitor analysis provided insights such as methods for scanning features and implementation of user flow processes and holding different data for many brands, storing separate card details.
• Allowed early access to existing brands to allow feedback to be given that could improve the product for brands and as a whole.

 Information Structure and Wireframes

• Collaborated with stakeholders for structure, going through various phases such as sticky note brainstorming and software flows, diagrams, charts and wireframes.
• High fidelity iterative mock ups allowed quicker turn around on decisions and improvements.

 Visual Design

• Created a fun and modern visual language that would stand out in a brand's store.
• Layouts, typography, and colour schemes aligned with branding and across other products to allow for a coherent suite of products.

 Front-End Development (web integration)

• HTML, CSS, JavaScript, jQuery and Bootstrap 5.0.2 implemented the front-end.
• Responsive design for varied devices down to 320px viewport width.
• APIs integrated for real-time data sync.
• Looked for ways to embellish the front end and make it a joyous experience, such as including floating labels and large headings that was consistent with the native iOS app.

 User Testing and Refinement

• User tests validated design and functionality within both the app and web integration.
• Iterations improved user experience.

Results
 User-Centric Interface

• Intuitive navigation for loyalty features with static overlay buttons and modern icons.
• Clear reward tracking to elevate satisfaction while earning points.
• Promotions that allowed users to see brand promotions and allowed cross advertising for brands, in the form of an infinitely scrollable feed.

 Brand Experience Boost

• Visual elements aligned with branding.
• Coherent design fostered emotional ties.

 Enhanced Performance

• Optimized speed and responsiveness.
• Web integration allowed quick upgrades without resubmitting new versions of the app.
• Users valued the quick interactions.

 Elevated Engagement

• User-friendly experience encouraged participation.
• Red dot notification push 80% of users (as of July 2023) to fill out extra details.

Conclusion
User-focused design and modern technologies were pivotal in the loyalty app's design and web front-end success. The smooth user experience and attractive design bolstered engagement and loyalty, highlighting the significance of user understanding.

Overview of Project
Existing tech2/iinet customer web portal was due for a redesign and modernisation. Approach was to upgrade the look and feel, add elements that would modernise the portal to current trends (ie. responsiveness), while maintaining usability for the existing customer-base.

UX/UI
I created the designs to echo the layout of the previous portal - placing elements in categories remained the same, however had a cleaner look and allowed to compact the fields within the viewport while retaining clarity and legibility.

I created multiple designs in Procreate to present to the business. Ultimately, the business chose the design that had elements that were similar to the original portal (ie. card titles had similar bordering background, layout was in a similar location) however this was closer to a “dark-mode” version, as well as being more modernised and on-brand.

Chosen Design

Existing Portal that needed the redesign

Front End Development
I built the front end of the portal locally in Visual Studio Code, creating test JSON data to ensure that Ajax (POST and GET) methods were working before giving files over to the Back End Developers to connect to the API on the server.

The “Login” page was built with CSS Grid, Bootstrap, JavaScript and Ajax where the credentials are validated through the API on the server.

Once logged in, the user is then directed to the index page, or the blank form that allows a user to create a new ticket. There is also a prompt to allow the user to save their credentials in Chrome (triggered by the POST method in Ajax).

This ticket booking form has multiple dynamic dropdowns determined by parent selections, a “filter as you type” suburb dropdown, a file uploader and a calendar appointment selection. Technologies used here include the Full Calendar Plugin, Bootstrap, JavaScript, jQuery, Ajax and CSS grid. In the header, there are also “wave” SVGs that preserve the height and do not preserve the aspect ratio when resizing the browser to keep a sense of organic flow to the shapes without disrupting the lower section layout of the page.

Within this index page, other than booking a new ticket, the user also has the option of looking up existing tickets in the database - also pulled dynamically via Ajax from the JSON data file (using test data).

If the user chooses an existing open, cancelled, or completed ticket, this opens a modal that contains a log of actions or comments made on this ticket - pulled dynamically via Ajax. There is the ability to download the existing data viewed here as multiple file formats (Word, Excel, HTML etc.).

Depending on the status of the ticket in question, there are also dynamic buttons such as a cancelation option, and a View Documents option (if documents exist for this ticket). The View Documents section brings the user to a secondary modal where the user has the option of downloading a selection of PDF file, while still retaining the ability to go back to the current ticket view as to not disrupt the flow of the User Experience and prevent the user from needed to search the same ticket again.

Accessibility
All elements in the portal have a “tab-index” and can be accessed only via keyboard or only via mouse selections. Focus was also customised to keep the user aware of what would be selected while keeping on brand and aesthetically pleasing. All images have an alternative text to allow any broken links to still allow the user to not miss any information. And finally, all text has been kept above 12pt, and responsiveness worked correctly down to 320px browser width as these are both minimum required across web standards.

Overview of Project
Modernizing tech2's main internal operational application Streamline. Redesigned the UX and UI, while also ensuring familiarity for a smooth transition for end users.

Logistics
My role in this project was the UX/UI designer - due to me being the only designer on this project I had ownership of the design, with input from the Business Analyst who would determine the approval to go ahead with development.

The work I did was to create all the wireframes on this project (approx. 35 pages), along with any adjustments requested by the developers or the business to existing wireframes. Once pages were deployed into the Staging Environment, I would go through and create Bug Tickets in DevOps for anything found that was UI related before the Production Deployment was released.

While the plan was for me to be one of the developers on this project, due to my redundancy and external circumstances for the company, I was unable to do developer work on Streamline.net.

UX/UI
The initial challenge was to create a modernised design that would also contain the sheer amount of information in the existing Streamline, while still maintaining a clean and organised usable layout.

Streamline.net Job Wireframe | Desktop Version

Previous Streamline that is being redesigned and modernized | Previous Job Page shown as example

Previous vs In Progress Design for Streamline.net

The key to the redesign was to capitalize on screen real-estate, and place elements in a way that were easily accessible while still not over-crowding the space and overwhelming the end user.

I created multiple surveys with the Business Analyst that were sent out to the main team who would be using the application, along with the Executive team showing different colour schemes, layouts and requesting any feedback that they noticed would impact their day-to-day in this new application and design.

One of the surveys sent out to the internal team in early design phase

Once the survey results were collated, we used the feedback to make decisions that would allow the application to be more in line with the users wants and needs.

After multiple interactions and adjustments, the design consisted of elements that were described by icons and tooltips, that would slide out on click such as the search bar, filters for tables, and elements that weren’t commonly used but still needed to be easily found by the user.

Examples of functionality in Streamline.net Wireframes

Account Dropdown

Hamburger Navigation with Submenus

Job Colour Guide Dropdown

Page Name Info Icon Toggle

Refresh Spinner on click of 'Refresh List' Button

Display Options Show/Hide Toggle

Search Slide Down Panel

Help Slide Out Panel

Colour coding also played a part in regards to the status of jobs. hover of buttons on whether a selection would be important for the user to notice, and the overall design was kept on brand with greys, black and accents of red so it would age well.

Streamline.net Minor Projects Wireframe | Desktop Version
Example of colour coding

Responsiveness was chosen to be down to tablet view, so I created 4 different versions of each page - breaking points for Desktop, Laptop/small screen, landscape tablet and portrait tablet.

Streamline.net Minor Projects Wireframe | Responsiveness on different devices

The wireframes themselves were high-fidelity with functionality built in to allow the design to be demoed for the business, CEO and executive team.
Clarity and functionality were also particularly important to keep communication clear of what was to be developed between the Sydney and Egypt teams.

Streamline.net Setup Minor Project Wireframe | Desktop Version

Streamline.net Schedule Job Wizard Wireframe | Desktop Version

Streamline.net Configure Minor Projects Wireframe | Desktop Version

Overview
Built and adjusted EDM (Electronic Direct Mail) templates for tech2’s Premium Support email communication with their customer base. Worked closely with the system admin to deploy templates in Microsoft Flow. Tested templates on multiple platforms, found and fixed bugs.

Logistics
Received tickets regarding changes to existing EDM templates, as well as building new templates with HTML and CSS from a design provided by the marketing team. Purposes of these tickets included introducing customers to a new promotion by the Premium Support team, along with a new branch of service provided by the team.

In order to meet all the different conditions of customers' subscription types, the system admin I was working with created automation within Azure, which was eventually migrated over to Microsoft Flow. In both of these platforms, this is where I updated, ensure templates were correct, and conducted testing across different platforms including Outlook Desktop Applications (PC & Mac), different webmails (ie. Gmail, Outlook, Yahoo), browsers (ie. Chrome, Firefox, Edge, Safari) and devices (ie. iPhones and Androids mail apps).

Welcome Email Template with Turbo Promo (multiple variations created determined by customers subscription and device)

Invoice Email Template

Welcome Email Template with Emeals Promo (multiple variations created determined by customers subscription and device)

Overview
Redesigned, built and maintained Wordpress Site with Genesis Framework with Dynamik Theme. Set up hosting, domain pointing, SEO, Google Analytics, Calendar Events, along with Ad Hoc tasks and tech support.
Filmed, synced, edited and uploaded weekly sermons 2015 - mid 2020.

Rebuild the site from scratch due to issues with access of the current outsourced host and setup.
Requirements were to allow the client to make their own changes without contacting an admin, while also keeping within a modest budget. Multiple users needed to have access to the site to make changes (in certain areas) and to also set up 30 emails with unlimited server space.

Proposed and implemented solution
Of a few solutions, building in Wordpress hosted through Hostgator satisfied the majority of the client's needs. Due to the key priority at the time of building the site being their modest budget, this was the chosen solution.

This solution also allowed the client to have unlimited custom emails with unlimited server space, along with multiple Editor accounts that the client could log into without needing access to the Admin account.

Logistics
The theme chosen was the Dynamik Theme using the Genesis Framework due to it’s customizability and relative low cost, while still maintaining a professional look to the site.

Landing Page

I worked closely with the Associate Pastor, creating their website to their liking. I implemented SEO by Yoast and Google Analytics to provide the client with information about the site’s traffic and which pages were performing well.

Vision Page

I also maintained their site between 2015 - 2020, providing tech support for emails and ad hoc tasks, updating the website with elements such as pop ups, embedding Google Calendar, updating embedded Youtube Links for their sermons and providing advice for future projects (updating film equipment, logistics for a “members only” section on the website, etc.).

Film & Editing
I filmed the sermons each week between 2015 and 2020, starting on an older camera and burning to DVDs, but eventually upgrading to a Panasonic HC-VX980M, and recording sound separately with a Zoom H4 that records both atmosphere, as well as the microphone on a separate track (via plugging in an XLR to the Zoom).

From there, I would then sync the Zoom and Footage (removing the footage audio - as only there for syncing purposes) and then edit the sermon (in Adobe Premiere Pro) usually ranging between 45 min - 1.5 hrs. Once edited and cleaned up sound with title cards, overlays of readings, images and outro cards, I would then export this and upload the file to Youtube in 1080p 25 (H.264).

Once in Youtube, I would add additional outro links for any viewers to click on (ie. the Channel, the most recent video and a recommended video from the channel).

I would also go through the video and find a shot of the speaker that was flattering (and dynamic with other Thumbnails on the channel) and create a Thumbnail for the relevant video in Procreate on the iPad Pro, on a background of the clients logo.

Thumbnail Result Example

Once completed, I would post the video to the clients Social Media (Facebook), as well as embedding that week's video in their website.

On occasion, I also would film and edit short films or promos for upcoming events (Centenary, upcoming Youth Camp, retreats, Facebook Live Videos), along with creating any relevant graphics needed.

Youtube Channel

Youtube 

Overview of Project
Aim is to experiment in creation of web illustrations purely using SVG Paths, Clipping Paths and Linear Gradients in the form of a tribute page.

Page Design
Design after a few variations of style, deciding on layout of page and design of code illustrations.

Sketch vs Code Illustration

Colour
Colourized these illustrations with linear gradients to create the illusion of a 3D shading. Selectively using accented colours that were bold against the grey scale background to make these images stand out.

Technologies

• HTML
• CSS
• SVG Path Builder (by Anthony Dugios) 

• Get Waves 
• Blobmaker 
• CSS Grid