Loading...

OS UX/UI ELEMENTS MAPPING PRODUCT DESIGN FOR ALL DEVICES,  CREATING AN PRODUCT IDENTITY & PATTERN LIBRARY (MATERIAL DESIGN)

Working as a lead product designer at Ordnance Survey with a product that I enjoyed to be part of was a great experience. This product was aimed at public sector companies such as HM Coast guards, Flooding reports, Metropolitan Police & also everyday mapping users that are interested in outdoor activities such as hiking, running & biking the product allowed you to plot items on a map like plot paths, new routes, warning zones, tourism sites etc. Being passionate about the outdoors and hiking and also a regular digital mapping user lead to me to create the best product I could for mapping. I had the opportunity to create an brand Identity, element library, components library and form the full mapping product for all the devices for specifically web, mobile and tablet android focused platforms.

The product was also created for 3D Mapping more info about this and can be viewed here

Below you can see how placing a pointer on the map works using a popover for web, tablet and mobile. Web had one stage while mobile had 3 separate stages.

Below you can see the full UI in the product when it is launched and some sub menus open, showcasing panels, headers & tool bars. Before the UI stage there was a huge process stage in research with current products, creating personas, user journeys, existing patterns. From this we created a pattern library and did alot of user testing rounds from prototypes built with a focus on users that will be using it and new users both internal testing and remote testing.

Below is the platform using the read only view across devices with all panels open showcasing when the edited map is shared and the user doesn’t have edit permission this is the type of view you will see when icons or components on the map are selected.

MAPPING INTERACTION GUIDE FOR WEB

Below is a rough interaction guide of how the transitions, elements & components come together to form the current user experience for the new build. I created several prototypes of the application which allowed testing for an interactive prototype which showcased all the transitions we used Principle, Framer and Invison to give solid feedback to how the product helps users and if everything is discoverable. Please see below the walk through video

CREATING A PRODUCT PATTERN LIBRARY

I created a identity sheet for icons, colours used, font and grids (material design).  The identity was to be based on OS as a brand. I also created a huge pattern library which included all elements and components used in the platform this was all built in a easily adaptable way across all devices and there was an explanation into why everything was designed how it is shown, also the library I built  was created in a way where if you change a colour, icon or a font in the identity sheet it would change across all the screens, elements and components so that it save huge amounts of time having to go an change each individual element and component. The previous ux research was a solid indication as to why certain elements or icons were created and placed in the way they are shown on the UI.

RESEARCH, USER TESTING AND PLANNING

Shown below is proof of 4 rounds of user testing I did both internally and remotely with entirely new users. I did prior planning to make the best prototype I could for user testing for both mobile, tablet & desktop. I also tested the prototype with further more users and created individual personas for each of them that undertook the testing, this achieved alot of beneficial feedback. After a couple of rounds of user testing we had some small alterations to make to the existing design to align with the results from users this in turn made a solid product for the users benefit and from public sector companies that would be using it on an everyday basis.



 Previous  All works Next