Esri's Education Program supports K-12 school students with software, training, and support to equip students with geographic information systems (GIS) software to design a brighter future. With a growing education audience, the current website needed redesigned webpages that focused content for the K-12 education.
I created webpage designs that incorporate existing industry wireframe templates for new K-12 pages with a new content strategy and design that would highlight important educational resources and a Bundles licensing page for four different audiences.
UX Designer
8 months
Project Manager
Copywriter
Marketing Specialist
Page Author
Content Strategy Manager
UI Designer
- Current experience audit
- Reorganizing page information architecture
- Delivered audit, sitemap, and wireframes
- Led collaborative discussions and workflow across cross functional marketing team members.
The K-12 education industry did not have existing webpages, so I needed to create new webpages to inform users about available K-12 initiatives and programs. The stakeholders wanted to market the value of geographical information systems (GIS) technology to multiple audiences that included K-12 students, teachers, administration, and parents.
Problem: How might we highlight Esri's K-12 initiatives and use cases to different audiences by keeping both new and returning visitors engaged?
The stakeholders came to me with the simple request to create new K-12 industry pages following industry page templates but with the addition of two redesigned pages : one for Geoinquiries, or short activities for teaching map-based content, and another for Bundles, or no cost instructional versions of GIS software.
Before I got started mapping out the new K-12 microsite page flow, I decided to audit the existing Geoinquiries and Bundles pages to understand any usability or content strategy concerns. Working in Lucidchart, I discovered that many important educational resources were not prioritized enough (i.e. lack of CTA call outs, missing introductory content, redundant links) which could confuse visitors about page goals and software trial sign ups.
Through the audit, I discovered that there were a lot of pages linking to each other inconsistently with misprioritized content hierarchy. The Geoinquiries and Bundle pages needed a simplified browsing experience, especially with the additional challenge of integration into an templated industry microsite navigation. In this sitemap, Geoinquires and Bundle pages are hidden from the navigation but are linked to on the overview, Academic Instruction and community pages to adhere to the typical industry page structure but accommodate the two new pages.
Through the audit and sitemap, I discovered that the Geoinquiries and Bundle pages would be hidden from the navigation. Therefore, these page wireframes would pivot from the typical industry wireframe templates with new content strategy and designs.
Additionally, the Geoinquiries page was an important resource that should be discoverable to visitors, thus I decided to link this page on multiple other pages to repeatedly provide visitors opportunities to access the Geoinquries page. The stakeholders also wanted the Bundles page to be less discoverable, with the goal of encouraging visitors to utilize educational resources before purchasing software. As a result, I linked the Bundles page only on the Overview page so that any visitor audience could find it.
After I presented the first wireframe iterations to stakeholders, the stakeholders asked to change components on the Overview page and Academic Instructors wherever linking to the Geoinquiries page. As a UX designer, I often feel more comfortable handling the content strategy and hierarchy, so I collaborated with the UI designer for their visual expertise. I learned that while I could make a component switch based on content, it was much easier to work with another expert to find the best fitting component that is visually and content satisfactory. Later in the design process, the UI designer would also be able to add the best color and imagery knowing the component purpose and goals.
Additionally, the stakeholders couldn’t decide whether they wanted to show a component for one solution or multi solutions to visitors on the teachers and strategy pages. They struggled with visualizing how the content would flow on the page so I created two wireframes options, one utilizing a large image stack for a single solution and the other utilizing cards for multi solutions. When I showed the stakeholders both options, I could better understand their uncertainty in choosing content. Through this, I found that stakeholders trusted my expertise when I provided more design flexibility as long as the content was accurately portrayed per their business needs.
The Geoinquiries page’s main priority is to showcase a collection of resources based on topics, but how is a new visitor supposed to know what exactly a “geoinquiries” is? I discovered this problem as I was double checking the wires, thinking through the visitor’s browsing journey from either the Overview page or Academic Instruction page. Without this content, the assumption is that the visitor knows exactly why they are on the page, rather than exploring for the first time. Thus, I added a component under the banner for value prop descriptions that introduce the importance and value of resources listed on the latter part of the page.
The wireframes were then handed off to the UI designer to create mockups that explored imagery and color palettes for K-12 education. We collaborated together using Esri's design system to pick components for a comprehensive visual story across the microsite.
View website →
One of the most difficult struggles of the project was all the back and forth with stakeholders. I felt uncertain at times picking components to use when stakeholders initially could not provide specific business goals or content per page. After multiple meetings with stakeholders, I discovered that I received the best feedback from them whenever I showed variations of wireframes with visual designs down on paper. In the future, I want to continue to be design flexible by visually showing stakeholders possible solutions for better directed feedback.
I really enjoyed collaborating with the UI designer, who had more experience working with the aesthetics and visual flow of webpages. The cross team work approach helped me gain more confidence knowing that we both selected components that fit content requirements for UX and visual impact for UI. Next project, I want to continue this spirit of collaboration with others to make better informed design decisions and build personal relationships.
