Project collection
The possibilities of converting from Web to a native system
Hybrid implementation of native OS
At the start of my internship I was under the impression that, albeit dated, ZOLEO was developed on native OS systems. Only to discover after the first iteration and discussion that this wasn't completely accurate.
ZOLEO implemented a hybrid form of native OS but does not follow any of the available UI Libraries for iOS or Material Design 3 by Google.
The operating systems have, within the Figma community, their UI Libraries available. In the current project, we have already implemented Design System components that are inspired by such UI Library. This allows me to be comfortable while implementing other UI Libraries and researching OS design specifications to ensure they are created properly and documented for developers in a way that aligns with the company's objectives.
Existing version ZAPP
Ignoring what I know about the soon-to-be-released version, which I have worked on in collaboration with the existing Product Owner, I have converted an older version of ZOLEO's app and more specifically the settings page.
Currently, one of the issues users has "I'm not sure how to configure Location Share+ and adjust the settings". Partly because it is bundled with a different set of options in the settings menu.
By selecting a random screen, in this case, the settings page, I was able to convert this by applying Joey Banks's iOS16 UI Library. By applying the iOS UI Library I was quickly able to create a difference in the hierarchy and create a distinction between Check-in & SOS settings and Location Share Settings. This would then be an excellent kickoff point to further research the solution.
Existing version ZAPP
Another example of current and post-Swift. Due to the nature of iOS16, Joey always includes the latest version of Apple's messaging overview, which makes it easy to insert that as a kickoff point.
SF Symbols made icons easy
Prior to starting my internship at ZOLEO, I had not heard of SF Symbols or SF San Francisco (Apple's font of choice).
After discovering this, it made applying them one of the quicker solutions for iterative design work. Easily copying icons from a searchable library, that can be altered with color styles.
One of the limitations I did discover was the application iOS's latest icon bundle. When trying to insert the SOS icon, it did not let me. This is perhaps because Figma doesn't recognize them yet or San Francisco's typography bundle is not complete. Another problem I ran into was Apple's naming, eg. the settings icon was not named settings or preference (like on their laptops/desktops) or cogwheel. It was named "gearshape".
Material Design 3 by Google also provides a large database of iconography allowing businesses and individuals to quickly design explorative solutions without being required to eg. purchase an icon set.
I'm UI Libraries very comfortable with both. For parts of the current redesign, we have applied M3 principles and guidelines. For example, we applied the use of pills, chips, and tags. Another UI Library we took inspiration from was Shopify's Polaris (Design System) when trying to figure out how to implement the coupon section at checkout.
The timeframe and next steps
The changes above were done on a Friday night. If I had access to users to validate these changes I would do the following —
Improve the layout by applying the guidelines from the Design System. This includes colors, spacing, and icons. As users will already be comfortable with the new icon set that we have developed and selected.
Apply the same to Android by utilizing Material Design 3 from Google.
After that, I would proceed to convert the rest of the screens by applying the same steps, doing internal user testing, adjusting, and then inserting both UI Libraries by updating the Design System and Tokens. This will allow for faster iterations, and easier post-implementation management with document management.