A new visual language, communication strategy and institutional website for a 2-year education program. Prototyped in Whimsical, built in Figma & Wix.
Designed in-house for Apple Developer Academy UFPE January - September 2021
MY ROLES
Design mentor ・ UI designer ・ Art director ・ Copywriter
TEAMMATES
Everlaynne Melo (designer, 3D artist) Higor Oliveira (project manager) Francisco Soares, Ingridt Vieira, Alessandra Pereira, Pedro Barroca (ADA mentors)
Context
The Apple Developer Academy (ADA) is an Apple-sponsored extension program that teaches coding, design, and innovation skills to undergraduate students around the world. All ADA participants receive Apple equipment and a monthly allowance, get to work in a state-of-the-art lab and are introduced to our innovative, hands-on learning methodology.
There are over 20 Academies around the world, 10 of them in Brazil, where the initiative started back in 2013. The UFPE Academy exists since 2015, as part of the Informatics Center in the Federal University of Pernambuco. The first cohort was formed only by computer science, engineering and design students, but since then, each cohort is more diverse than the previous one. Today, the ADA lab doors are open to undergraduates from all UFPE courses like economic sciences, journalism, psychology, music and even odontology.
The challenge
Every two years, ADA runs a multi-phase selection process to choose the next cohort. For the 22-23 class, our goal was to increase the number and course variety of student applications, aiming for a more diverse group of learners experiencing the program.
Our main obstacles to achieve that goal were:
- the COVID-19 pandemic, which forced most UFPE courses to remote learning and made social interaction between students less spontaneous.
- the low awareness of Apple Developer Academy across the campus. The program was already well-known and coveted by technology and design students, but in other courses, very few people knew about the opportunity.
- our lack of online presence in social networks. ADA UFPE gave the impression of being a “secret club”, something mysterious and inaccessible. This perception was shared by several students in our current cohort, and they reported having a completely different view of Academy once they were in.
- our Academy's unexciting institutional homepage, styled in the same color palette, typography and visual language of UFPE main website. Aligning the Academy so closely with the university branding led to interpretation of it being “just another extension project”.
Strategy: a complete rebrand
After the initial diagnostic, we decided that a full rebranding was in order, along with a new approach to institutional communication. These were our courses of action:
- design a new visual language for our Academy, making it feel younger and more approachable to non-tech students;
- start having a presence on key social media channels (Instagram and LinkedIn) to establish a closer connection with UFPE undegraduates;
- rebuild ADA's institutional website, making it easier to update and consolidating it as the main source of information about the upcoming 22-23 selection process, such as application forms, important dates and results for each phase.
Timeline
Building our Academy's new brand and communication strategy was a year-long project that I took on as the lead designer in parallel with my activities as a design mentor. During the same time frame, the pedagogical team completely redesigned the selection process. Because Brazil was still in the grip of the pandemic, all phases had to take place remotely.
We decided that the institutional website would be the first major deliverable, acting as a good canvas for implementing the new branding. With all aesthetic elements defined, we moved into the social media channels and marketing materials (featured in part 2 of this case study, coming soon).
Mapping the applicant's journey
ADA's team dedicated a lot of effort to map all the phases in our selection process. Together, we built a user journey map for applicants and mentors, which were in charge of evaluating students at each phase and ultimately choose the 22-23 cohort.
This artifact was crucial for our team in several fronts, being the main document we referred to during the selection process. For the site design & marketing team, this flow provided a panoramic view of all touchpoints between applicants and our content (website, email and social media).
Simplified version of the Applicant's Journey, with focus on public and private communication pieces.
How everyone else was doing it
In 2021, there were 15 Apple Developer Academies around the world, all of them associated with universities or R&D centers. Their websites and social profiles proved to be great material to run a “competitor” analysis on. My goals with this process were to:
- understand the main sections and elements used to “sell” the Academy programs to new students;
- get familiar with the communication style, visual language and tone of voice other sites were using, especially ones with open selection processes;
- get inspired on ways to display different phases in the selection process to applicants in a comprehensive way.
A small sample of my analysis of other ADA websites. Click to see in full size.
How we did it
A comprehensive site structure
The new Academy homepage needed to perform multiple roles: As an institutional website, it should give visitors a comprehensive overview of our program. As a marketing tool for students and potential applicants, it had to be engaging and show that the ADA experience is an amazing opportunity to jump-start their career and also to build a strong community.
- The Program, Community, Showcase and Mentors sections worked together to bring visitors into the Academy universe from multiple points of view.
- The Community mosaic brings testimonials and stories from alumni who had their careers supercharged by our program.
- The Showcase section highlights successful projects made in Academy that reached new heights, becoming startups, winning awards and appearing in relevant media channels.
- The Class of 22-23 / Selection process section (highlighted in yellow) was designed to be dynamic, having its CTAs and content updated as the process unfolded. Our goal was to make it the single source of truth for applicants. More details on how we implemented that later on.
- For the FAQ section, we ran a quick survey with students from the 20-21 cohort, asking them what were the most pressing questions they had before joining the program. Looking at other ADA websites also helped, but we couldn't just replicate the same questions, since each Academy has its own specificities regarding the program and the selection process.
Another top priority in this project was to provide a great mobile experience for website visitors, which wasn't the case with the previous version. Considering that our marketing was done mostly on Instagram, we expected that most visits would come from smartphones and small screens.
We came up with the solution of using a carousel for the showcase projects, and a stepped side-scroll for the Community mosaic. All other elements were already modular and the designed lended itself well to the smaller viewport.
A brand new visual language
We had a blank canvas to build the new visual style for our Academy, since it didn't have a solid identity prior to this work. The wordmark is standard for all Academies, but I had ample freedom to define all the other visual attributes.
My main inspiration for the branding were the real-life pieces of ADA UFPE: the lab where we design, develop and innovate, and the people who make our community flourish.
Color
Our color palette evokes the energetic and sophisticated interior design of the Academy lab at UFPE. Red and Yellow are the main brand colors, supported by a neutral palette that goes from charcoal to white.
Typography
We chose Be Vietnam as the main type family for ADA UFPE's brand. It's a friendly neo-grotesque sans serif that suited the tone of voice we wanted to convey. This typeface has good readability, and its extensive set of weights makes it versatile for both body text and headlines. It is the only font used in ADA UFPE's website.
For the social media visuals, we introduced two other fonts with strong character: Canela, an elegant and warm display serif, and Bungee, a super-heavy display sans. See how they're used in Part 2 (coming soon!).
Illustrations
To bring more of the physical lab into ADA UFPE's online presence, Everlaynne produced a set of 3D illustrations and patterns, which I art directed. Having a dedicated illustrator to produce assets tailored to our content made all the difference in the final result.
The triangle pattern is a major architectural feature of our lab, and is used as a background to other elements. Floating cubes act as platforms for several objects related to design, development and innovation, our three learning branches. Being proud designers from Pernambuco, we also included references to our local culture, like the crab, the cactus plant and Chico Science's iconic hat.
The multicolor locker cube is a direct reference to the existing 5-meter long locker wall in the lab, and also evokes a school-like environment.
Smaller illustrations like the FAQ question mark and 3D icons were produced especially for the website. We also used them on social media, combined with memoji resembling our students and mentors, and a few royalty-free 3D icons that fit our aesthetic.
The social media visuals will be showcased in part 2 of this case study, coming soon.
Implementation
We made the strategic decision to build our site on Wix, a no-code tool, with the goal of making it easier for any mentor, program manager or marketing professional to update the site content. The previous version of our site was hard-coded by engineering mentors or computer science interns, but being dependent on a single person to update the site's content was not a good workflow. Information got stale, and students didn't have a reliable source to know when the new selection process would be starting and how each phase was developing.
The website was entirely built by Everlaynne and me, and we made it our main goal to make key sections like the Selection process and FAQ super simple and easy to change for non-designers. Having the ability to quickly update content was a game-changer. We designed a modular section for the Selection process, with dedicated spots for links and CTAs planned to appear on each phase.
Selection process section of ADA UFPE website at 3 different points in time. Click to see the image in full size.
Showcase
Play the video to see a full scroll of ADA UFPE homepage on Desktop.
We wanted the new ADA website to feel smooth and high-end. A lot of effort went into details like hover animations on the Community section, where each person's photo has their name and a link to their Linkedin profile.
The desktop and mobile versions of the site display exactly the same content, but the format of some components was specifically designed to make the most of each viewport and work well with its constraints. This is the case for the Community grid and the Apps carousel (see animated GIFs below).
Communication made by humans
Building the site through Wix allowed us to leverage its CMS tools like the inbox for replying messages sent via our homepage contact form, and email marketing, to send reminders to applicants about interview appointments, important dates and final results.
Here are some of the emails sent to applicants during the selection process. We strived to provide an amazing UX for everyone, even who didn't make it into the 22-23 cohort. Students who were not selected can apply to ADA again if they're enrolled in any undergratuate UFPE course, so it's important that their last impression of Academy is as positive as the first.
Throughout the selection process, the team of mentors shared responsibility for updating the site, answering applicants questions that came in and sending email updates via Wix CMS platform. I was in charge of all the visual assets and some of the copywriting.
Results
This campaign was the most successful in ADA's history, with a record of 688 student applications for the 22-23 cohort. We managed to build our most diverse cohort yet, with 32% of students coming from non-tech courses. These people infused our Academy with different points of view on digital product development and a whole new set of pedagogical challenges, which helped us grow and learn as education professionals and as a community.
In 2023, two years after this effort, the team of mentors (which I'm no longer part of) is preparing for a new selection process, using the same site structure we built in 2021, with some aesthetic changes.
As I said in the beginning, the new site was only one aspect of ADA UFPE's branding overhaul. On Part 2 of this case study, I go into detail on other communication efforts like social media and events.
Part 2 coming soon!
