Transitions of PA Re-Design for Teens
Intro
We sought to redesign the website for Transitions of PA, a crisis center that provides advocacy, empowerment, and education to victims and others. Our goal was to convert the website into a mobile app catered specifically to teenagers. Our main objective was to make it easy for teenagers to find information that was most relevant to them, such as the different education programs for teens that they offer. Our hope is that our website would be easy to navigate and also provide teenagers with the resources that were most applicable to them.
Needs-Finding
The Transitions of PA website had several resources that were there specifically for teenagers. When we reflected on the needs of teenagers within our website we decided on a couple of main priorities. The first priority was to provide information about the crisis hotline front and center. If teens were experiencing a difficult situation and needed to call the hotline, we didn’t want them to go searching for that information. Another priority was ease of navigation. We didn’t want teens to experience any frustrations about finding the information they were seeking.
When doing research about the needs of teens, we attempted to look at the designs of websites that were specifically designed for them and tried to discern what aspects of the design they emphasized. One example of a website we looked at was Nickelodeon:
This website inspired our need to make the website easy to navigate. Looking at the Nickelodeon website, it is clear where the buttons are and the top menu prioritizes specific pages that teens are likely to look at. When we made our sketches we tried to mimic this by designing the home page to have a quick access section with links to the most relevant pages for teenagers:
The Mood Board
Before actually designing our prototype, we each created a mood board that would help us get a general sense of the application’s visuals. A lot of the photos used in our mood boards were centered around pop culture references that we assume teens would relate most with: apps such as Snapchat and Tik Tok, brands such as Vans and Chipotle, among others. We additionally searched for photos on the internet using keywords such as “modern”, “gen z”, “teen” etc. to help aid in this process. In the mood board that Jordan created, he used a color theme that he felt was a good balance between the color scheme of the current website’s logo and the photos that he was finding online, which had a strong impact on the color scheme that we ultimately chose to use for our design.
Prototyping
Our first thought in prototyping was that we wanted our app to do 2 main things. First, clearly display the website’s help-line on the main screen. Second, since this app is designed for teens, we wanted our design to immediately take a user to the teen related information pages. Because of this we decided to use 4 large “Quick Access” buttons on the home screen that connect to said teen pages. These pages were the most important in terms of content and so we chose to model these in our design. Additionally, we thought including a FAQ page would be a good way to represent information about the website since it is a format that we believe the younger generations are quite familiar with.
Re-Design/Conclusion
The main piece of positivity we received about our site was the simplicity. Navigating our site is very easy due to the large buttons on the homepage that allow you to navigate to any of the subsections right from there.
From here when you go to the respective pages it is really easy to return back to the main homepage using the arrows in the upper left hand corner.
However, after receiving feedback about our initial prototype we had two design flaws that needed to be fixed. The first issue being that it was very apparent that the different subpages had been created by different people. This inconsistency made the page seem a little bit awkward as you can see here:
It is not as important which of these designs we went with, but more important that we decide on one design scheme and stick with that across all pages. This would lead to a more appealing and less awkward overall design.
In addition to this, our color scheme could have been better. As you can see from the images above used very soft colors for our scheme which is fine. But it makes the design kind of boring. We predominantly used a light blue, light purple and white scheme. In order to make this pop a little bit more we could have experimented with making one or more of our colors a little bit bolder. For example we could have made the purple a little bit bolder and left the white and light blue. Additionally, we could have used this bolder color to highlight buttons or other important information to emphasize the signifiers being used.
With all of this being said, we are happy with the design that we came to, but know that there is always more that can be improved through re-designing and re-working.
