Shine Bootcamp

Designing in a cross-functional team for a client

Project details

Duration: 2 months, January - February 2021

Roles: UX, UI Designer and Art Director

Project Type: Client project

Client: Shine Bootcamp

Description

This project was a collaborative project that consisted on redesigning a website, creating a motion piece and increasing overall online presence for Shine Bootcamp in order to boost ticket sales for their upcoming conferences. The team for this project was called Formula 6, consisting of six members split evenly into three interactive designers and three motion designers. Feedback and support was provided between all team members. Since the scope for this project turned out to be quite big, we decided to split the teams into the specialization of their choice. I focused mostly on the UX/UI redesign of the website but also added a small contribution to the final promotional motion piece.​​​​​​​​​​​​​​

Outcome Overview

  • Boosted social media outreach through motion piece.
  • Improved accessibility and simplified user flow in the main conference site.
  • Team Formula 6 was the selected winning team by the client, Shine Bootcamp.
  • Team Formula 6 obtained the VFS Award for Best Team Project.

goals

  1. Increase Shine Bootcamp's online presence and boost ticket sales for their upcoming conference.
  2. Redesign their current conference website (desktop and mobile).
  3. Create a 30-second promotional motion piece.

Tools

Figma, Illustrator, After Effects

The Problem

Some of the problems we encountered were:

  • The current website is not engaging enough for conference organizers.
  • There is no easy way to find speakers on the speaker gallery.
  • Subscribe button doesn't provide information of what users would get if they write their email down.
  • No clear connection between the main site and the conference site (no clear way to go from one site to the other).
  • Confusing visual layout on the conference site.
  • It's hard for organizers/learners to get to the conference website as there is no proper flow to get to it.

Discover

USER JOURNEY

For the website redesign, we approached this problem by running a thorough heuristics evaluation for the current Shine Bootcamp Conference website. We wanted to figure out the ways in which they currently obtained their main traffic to their sites, which is actually through their social media platforms, specifically Instagram.

After conducting the first evaluation, we noticed that the current user journey was the following:

PERSONAS

Firstly, it was important to identify the problem and areas of opportunity as well as the target audience.
For their target audience, there were three personas:

  1. Conference Organizers
  2. Friends and Family
  3. Learners

Define

SCOPE & DIRECTION

By analyzing the current sitemap and the features, we were able to have a clear idea of the scope of this project in order to make the adequate suggestions for the redesign given the time we had to complete the project.

Our main area of focus was the Homepage, however, we also redesigned the Speakers page to improve visibility and consistency in order to keep user informed about what is going on through appropriate feedback.

BRANDING

The interactive team had to redesign taking into consideration user needs and business goals, while preserving the overall brand essence that Shine Bootcamp aims to convey to their target audience. However, we decided to tweak the branding just a bit in order to create a fresh perspective without going off brand.

The final style tile was the following:

No items found.

Design

WIREFRAMING

For the wireframing phase, we had different iterations of all pages on the site, especially the Home page. It was essential to take into consideration the principles of IA in order to avoid overcrowding information and to establish a consistent visual hierarchy.

The different versions of the wireframes were modified and improved with user feedback in mind. There was different feedback given during team meetings and sessions with the client and our instructor.

No items found.

Validate & deliver

USER TESTING & PROTOTYPING

After the phase 3, we conducted user testing in order to validate our previous design assumptions in order to start designing the high-fidelity prototype. Some of the feedback that we got was the following:

  • Users were unsure what type of conference they were attending.
  • "Become a Speaker?" was removed from the navigation bar as it was confusing for users.
  • The ticket price and speaker topics were difficult to find.
  • The "Open letter to conference organizers" was considered too wordy, to solve this we decided to keep it as a "pop up".
  • The "Land Acknowledgement" caused confusion because of its odd placement so we decided to move it to the footer.

We designed solutions to these problems for the last version of the high-fidelity prototype with the finalized UI.

For the final design, I made GIFs on After Effects and included them on Figma in order to create more motion in the Home page of the desktop and mobile versions.

Clickable Prototype

DESKTOP

MOBILE

How did i?

MAKE SURE USERS WOULD EXPLORE THE ENTIRE HOME PAGE?

  • The home page was crucial because it was the starting point for the user to decide whether to join the conference by purchasing tickets or not. We decided to make the hero section enticing enough to reveal videoclips from past events and create a more immersive atmosphere that would invite the user to keep scrolling through the home page and to explore the entire site.

MAKE SURE USERS WOULD GET MORE INFORMATION ABOUT THE EVENT?

  • It was important to let the user know all about Shine Bootcamp Conference. Since the main traffic to the site comes from social media pages, we imagined that visitors would have a level of familiarity with the organization Shine Bootcamp but it was also important to let all target audiences know the information needed to make a faster decision to get tickets for the conference. By adding short paragraphs below the hero section, we were able to include a short but very informative description about the event in terms of speakers, topics, and types of attendees.

Next Steps

  • Team Formula 6 was the selected winning team by the client, Shine Bootcamp.
  • Team Formula 6 obtained the VFS Award for Best Team Project.

WHAT DID I LEARN FROM THIS PROJECT?

This project allowed me to work alongside very talented designers. Each of us took advantage of our meetings to collaborate and provide constructive feedback in order to create a pleasant result. At the end of the project, I was able to communicate my ideas better with everyone else and my presentation skills were also put in practice during our meetings with the client.

Pitching and presenting your design to a client can be intimidating at times, but presenting alongside my team proved it to be a fun and exciting process. Working in a team environment allowed me to provide/receive support and feedback throughout all stages of the design process