SATC Redesign
Mobilizing Teaching Resources
The challenge of
SATC
Redesign
Mobilizing Teaching Resources
The challenge of
The challenge of
The challenge of
Design, Wireframing, Interactive Elements, Re-Brand, Web Accessibility, Hi-Fidelity Mockups, Negotiate with Developers
Mobile, Web
Wireframes, Hi-Fidelity Mockups, Style Tiles, Type/Color/Button State Heirarchy
View the design process and deliverables below.
SATC (Students at the Center Hub) is a non-profit resource for Student-Centered Learning in the New England area.
They are part of JFF, a national non-profit that empowers local centers of education to promote decentralized economic growth
Parents. Of all the primary stakeholders (Teachers, Students, and Parents) we found that parents were not engaged. They were not able to find the right local resources from the SATC site that would enable them to carry out their child's studies once school ended. This problem needed to change.
SATC contacted our team at Vox Global to better understand how they can revamp their landing page, with a mobile-first focus.
In this case-study, I will explain our process behind achieving this redesign through the mobile wireframes, styling, and hi-fidelity mockups.
Afterwards, I will display the hi-fidelity results of mobile, tablet, and web, along with a brief reflection on this two month project.
Their primary feature is a map that allows residents of New England to locate schools that implement evidence-based, student-centered learning. The problem was that their primary feature was not converting users. Ultimately, SATC functions to direct students to schools implementing this learning curriculum.
Quantitative data gathered by hotspot analysis in tandem with Google Analytics suggested that users were not clicking past two-thirds of the homepage. The section that links to the Map of Schools was near the bottom. It became clear that this needed to be a focus higher up on the page.
Our client also recognized the need for the hierarchy of the homepage to be responsive, and mobile friendly.
Rebrand colors so they are WCAG compliant for accessibility. All brand colors were in pastels and they did not pass the large text WCAG accessibility test. We identified this as a problem as many of the site’s users were older and may have dificulty reading low-contrast text. Additionally, it could be a reason why site exploration was low, with a high bounce rate.
As well, SATC wanted to refresh their iconography to be in line with the change in color-branding. After a few meetings, we understood we wanted to maintain the playfulness of school, but with a bolder look.
Unfortunately, the main process and final designs do not display well on mobile screens. I invite you to come back and see more when a laptop or tablet view is available! Thank you.
The biggest challenge was maintaining the site content while converting it to be mobile friendly.
For this approach, we iterated on wireframes to introduce the homepage content in various ways.
We settled upon the removal of a full width banner. In place, we made it so users were introduced to the site's 3 most important pages: 1) Blog, 2) Map of New England, and 3) Value Framework.
In the original mobile view, users were not able to filter through various search tags, such as:
Tool, Blog, Podcast. This is a problem because users reported to want Blog content the most. However, the blog content was rarely visible.
The solution is separating out the Blog from the Resources search, so that users could access the Blog content without it being buried beneath the overpopulating Tools and Podcast.
We implemented the mobile blog feed below the Map of New England, making it the third section scrolled onto by the users. This facilitates users' needs to see the content as they reported, more quickly.
We took the previous resource search tab and added a third tab, in the middle, titled "Featured." With this, we satisfied our client's requirement of pushing conversions on recently featured resources. Although the resources first appear in the hero section of the redesign, enabling users to access them later in their scroll enhances recall, intractability, as well as inertia to explore the tabs.
As we identified from our client, SATC users were not converting to explore the Map of New England. This was a problem because the primary purpose for SATC is to direct parents, students, and teachers, to educational facilities that support the student-centered education that SATC accumulates.
To the right you see the top of the original mobile landing. There is a large carousel with content that is ambiguous, without any indicator about what type of resource it is (ex: tool, blog, podcast).
At the top of the landing users now see both the Featured Resource, followed by the call-to-action to explore the Map of New England page.
This was a simple design implementation, but it brings attention to both a daily feature change as well as the educational facility locator (Map of NE).
The Value Framework of SATC is important to the client, but less important to their user base. In our redesigned wireframes, we decided to leave the framework low on the scroll.
However, we still want users to access the values and understand how SATC views its mission.
This challenge was a balance to support our client and also provide their users with what they really want.
To satisfy both our client (SATC) and their users, we made a compromise. To access the Value Framework that SATC wished to see higher on the scroll, we allowed two paths.
The first path is right when users land. By clicking on the pull tab, users are able to select the Value Framework block, and it will automatically scroll users to the section of the page containing the Framework.
The second path satisfies SATC's users. Their users did not access the Value Framework often, nor did it bring any value to them in their search for Resources or locating educational facilities. It simply explained the site's values. With this in mind, we condensed the scroll of the values by making a side-triggered carousel. If users wish to explore the carousel, they may do so, but it will not take up too much of the scroll, vertically.
A style tile is similar to a mood board. It is a taste of various colors, typography, iconography, and patterns that come together to give our client an impression or feel of what the new look could be for their site.
Around when our wireframes were finishing up and being approved, we wanted to present our client with two divergent style options. That way, their choices were not too overwelming. And we reassured them that they could mix and match as pleased.
With this first style tile, we presented our clients with a stroke-heavy option, both in their logo and on buttons. The colors would embrace the fun of being off-center, and utilize patterns that remind us of school with pencils and chalk.
With the second style tile, there was more traditional button states, strokeless logo, and less aggressive type.
The three designs presented are the final versions of the SATC revamp. Up until now, we walked through the process of the mobile creation.
During this project the mobile version was completed first (wireframe, interaction, and hi-fi) before applied to both tablet and web views. Because most users are accessing the SATC site on their mobile, this justified our overarching need to get the mobile design correct first.
I was responsible for the production of the mobile wireframes, web wireframes, style tiles, text color/heirarchy/button states, as well as hi-fidelity mockups. I worked parallel to my UX Lead and was advised by my Senior Designer. My UX Lead and I diverged at the stage for style tiles and hi-fidelity mockups. We wanted to provide two options for our client to choose from, both site organization and style. Ultimately, the client chose my UX Lead’s site style in combination with my style tile suggestions.
This was a very fast paced learning experience at Vox Global. As well, this was the first of two professional web-service designs that I implemented with the agency Vox Global during my summer internship in 2018. I was constantly learning the process of working on my long-term client responsibilities, interspersed with other deliverables (such as interactive infographics, design decks to pitch to clients, learning how to make gifs in After Effects, as well as being handed off mobile mockups of a separate client site and turning around 7 web page mockups in two weeks).
It required me to switch on and off separate client demands and UX frameworks as I pivoted between tasks daily. To further complicate my learning, I was the only remote UX intern in Indianapolis. The remainder of my team was stationed in the Washington, D.C. office. This taught me how to effectively operate remotely, choose my questions carefully for when I could ask them, and manage my time when I was the only one present to hold myself accountable.
I had a wonderful UX Lead, Rob Murphy, and a very instructive Senior Designer, Kate Miller. To both, I owe my experience transitioning from a Master’s student into a professional designer.
My summer 2018 internship as the Creative & Digital intern for Vox Global, in Indianapolis. The picture featured here was a parting gift made to thank those who supported and challenged me during my time at Vox.
Vox Global is a Marketing & Ad agency that assists both for-profit and non-profit corporations towards the ends of web design, redesign, ad campaigns, op-eds, and more.
As the Creative & Digital intern at the office in Indianapolis, IN, my responsibilities touched upon the often chaotic agency agenda of working on two long-term web & mobile projects, with the panoply of interactive deliverable demands across teams.
For two months I worked for two clients, Students at the Center Hub, redesigning their webpage from wireframe, to style-tiles, to hi-fidelity prototypes alongside my creative directors. This redesign prioritized a mobile-first view, alongside the challenge of keeping the content that engaged previous users. The second client I worked with was SHEEO. I picked up this new web design halfway through the process, after the mobile hi-fidelity mockups were made. My challenge was to deliver the final web pages within two weeks as interpreted from the mobile versions. Quite fun!
I developed interactive CSR infographics for AT&T after learning the web platform Ceros, as well as traditional inforgraphics for the 2018 Indianapolis Prize Gala (the largest zoological conservation prize in the world). I created visual design decks for AT&T, Indiana University, All IN 4 Pre-K, and CETYS Universidad, As well, I developed my first GIF for a Bank of America congressional election infographic.
