UX/UI designer for New Zealand Trade & Enterprise
About This Project
I have been contracted as a UX/UI designer for NZTE (New Zealand Trade and Enterprise), a NZ Government agency charged with helping New Zealand businesses export and grow internationally. The website portal offers export and capital-raising resources, research tools and guides, as well as short courses and events. https://my.nzte.govt.nz
I was working within a squad that’s dedicated to building and optimising the user experience of myNZTE. Within this agile team I worked closely with business analysts, product owners, developers and relevant stakeholders, including marketing, brand and content leads While on this project, my job responsibilities have included the following:
Designing a new site-wide search experience
The screen above showcases the new site wide search experience. The search box sits just below the header, is central, obvious, and always easy to access. As with Google search this type of site search creates a sense of familiarity for the user, which can make them feel more comfortable using the search bar and navigating the site in general. Once the bar is selected, it becomes highlighted, with the background darkened. This focuses the users attention on the search journey without any added distractions. Once the user starts typing predictive query + auto-complete is used, saving them time and cuts down on spelling mistakes. The most results displayed are ten. This stops any unnecessary scrolling and presents the most relevant results to the query.
UX audit of the mobile version of myNZTE
During the audit, I identified various areas and elements that were not functioning properly on mobile devices and lacked optimisation for mobile usage. Many of the content and navigation elements that worked well on desktop screens did not provide a satisfactory experience on mobile devices. As a result, I undertook a redesign of these components and user journeys, ultimately enhancing the overall mobile user interface and making it a more intuitive user experience that users have come to expect while on a mobile.
Settings
The top screen showcases the Settings user experience. On the left is the current screen user interface with the setting menu always on display. My recommendations were to remove this, saving on vertical screen real estate and design a more mobile intuitive experience by putting the menu on a slide out drawer. This focusses the user on a menu only scenario without any other distractions on the screen. When the user has navigated to one of menu items, for example the My Profile page, the user can easily navigate back to the menu by tapping the universally recognised cog icon for settings.
Filters
The middle screen showcases the Filter user experience. On the left is the current screen user interface with filters always on display. The filter tabs and dropdown menu take up a large amount of screen real estate, creating unnecessary scrolling, as well as visual clutter. On a desktop screen this pattern works, but doesn’t when translating into the mobile experience. On the right are my proposed screen designs. The filters button is now a sticky footer that is always accessible to use. The existing experience required the user to scroll back up to the top of the screen if they wanted access to the filters. The filter experience is now a page takeover, focussing them solely on filtering. There is also now a search bar at the top to help speed up the result finding. Once filters are applied and results are displayed, filter chips sit below the header, showing what filters have been selected. These can be removed if required, along with a clear all filters button.
Attend
The bottom screen showcases the Assess user experience. This is a tool to help the user gauge the stage of their business and identify areas for development and growth. It consists of a series of assessment modules the user is guided through. New features I introduced were a progress graph, estimated time of completion and what question they were currently doing and how many to go. This provides the user with a visual orientation of where they are within the journey. They can see their progress, how many steps still remain and approximate time left in the process. These features orientate the user, supporting them to complete the journey. Also chunking down the content creates meaningful, visually distinct units that make sense in the context of the larger whole. I also introduced a sticky footer which helps the user navigate through the journey easier. The buttons are always in view, whereas in the current pattern, these are placed down the bottom of the page, often out of view and unnecessary scrolling was used to reach them.
Export Essentials redesign
The screens above showcase the suggested new design and user experience of the Export Essentials section. Export Essentials is a free online course that gets business ready to grow internationally or enter new markets. It combines best-practice knowledge, quick exercises, and practical resources the user can use in their business right away.
The first screen the user enters, allows them to choose the course programme that best matches what their business wants to sell to overseas customers. Once a selection is made, relevant information is revealed, starting with a tabbed menu, with the first one selected. The three tabs comprise of Learning options, Course content and Coursework planner.
Firstly the Learning Options page offers the user their choice to work through Export Essentials on their own (self-guided), or learn as part of a small group that receives weekly coaching sessions alongside the online modules (facilitated group lessons). If still undecided there is a course picker to offer further support in helping make a choice.
Secondly the Course Content page offers information on what they will learn and what actionable resources they’ll have at the conclusion of the course.
Lastly is the Coursework Planner providing information on how to get the most out doing the course, course framework, topics, timelines and what to expect from completing each learning module.