All-Star Academy is an after-school enrichment program that services K-6th grade students in the San Diego North County area. All-Star’s learning environment fosters growth in learning, boosts confidence and teaches students important, self-reliant skills.
There is a wealth of information on the All-Star Academy web site but due to the layout, a lot of the information is hard to find: many important facts are hidden in text-heavy paragraphs; there are several inconsistencies in information; and several references to dates that are years in the past.
The objective of the project is to redesign the current web site to create a modern, easy-to-use, intuitive web site that provides a high-level user experience.
It is important to understand and communicate what the All-Star Academy brand stands for. Their brand is important as it helps them stand out amongst the many after-school enrichment programs available in this area and promotes and strengthens their identity.
The All-Star Academy logo is made up of two child symbols with the full company name and slogan displayed on the right-hand-side.
Due to the combination of dark and light colours within the logo, it is difficult to place the logo on a coloured background that provides good contrast for both colours. Therefore, it is recommended that the colour logo is only displayed on a white background.
A white version of the logo was created for use on dark-coloured background to provide more flexibility for display usage.
The primary colour palette is made up of the two colours found within the All-Star Academy logo: gold and dark blue.
The secondary colour palette (green) is used for “Call to Action” buttons.
(39, 36, 95)
(210, 169, 42)
(57, 147, 68)
When describing All-Star Academy, the voice and tone are modern, informal and family oriented. The voice and tone should appeal to both parents and children.
To capture the voice and tone through the following fonts were selected:
- Headings / Menu Navigation: Bree Serif
- Body Copy Text: Gentium Basic
Step Into Design
Wireframes and mockups were created for the mobile, tablet and desktop media. Adobe Experience Design was used for the mockups as it creates a fully interactive prototype. When giving a customer demo, it is much more impactful to show an interactive demo.
Deliverables for this project:
- Typical User Set
- User Journeys
- Screen Mockup