UX/UI Design and Brand Redesign for Options Solutions
Full-service educational consultants.
Located in Metro Vancouver, Canada, Options Solutions is a full-service educational consulting company that empowers students to pursue their academic goals. Their main areas of expertise include advising for post-secondary institutions in Canada, the USA, and the UK, exploration of interests for adolescents, application writing consultancy and group educational support.
The Challenge
We had six months to bring new life into the brand and website while preparing it for national expansion.
As the sole designer on this project, I was responsible for the UX and UI as well as the Brand Redesign. That included research, information architecture, communication, presentations, iterations, visual design, brand book creation and so on.
I’ve collaborated amongst a team composed of more three people: an Account Director, a Project Manager and a Programmer.
Our Approach
Branding and UX running in tandem.
The project was divided into three major phases: research, branding and website redesign. We did the brand and user research at the same time, but we approved the new brand visuals before moving into the website redesign.
My Role.
As the sole designer on this project, I was responsible for the UX and UI as well as the Brand Redesign. That included research, information architecture, communication, presentations, iterations, visual design, brand book creation and so on.
The team was composed of three more people: an Account Director, a Project Manager and a Programmer.
The Kickoff
Understanding the brand history and what came before us.
We needed to understand what happened to the old brand, how it came to life and what were the stakeholders’ thoughts about it. How the brand was perceived amongst its audience? We needed to understand that too.
The client’s only goal at this point was to have a new logo, since conversions and the user experience weren’t their main concern. It was our task as well to educate and explain the weight of user experience and usability for website conversions and brand equity.
The Brand Discovery
Parents know that decisions made from grade 9 to 12 can set the stage for their children’s college and careers. Picking an educational consultant is stressful and families need to be confident.
We set up a survey on the website to understand the reasons people require Options Solutions’ services and what are their difficulties (pain points). We also had meetings with stakeholders to understand their vision for the project and business.
Some questions we asked:
- How old are you?
- Are you a parent or a student?
- Why are you interested in Options’ Solution Services?
- What makes you excited about Options Solutions’ services?
- How can we improve the website and our services?
- What are the biggest challenges when applying for a university or deciding on a career?
- What’s important for you when selecting an educational consultant?
- Any other suggestion, issue, an idea you want to share with us?
We found out that university application is a pivotal point in a young adult’s life. The audience knows that decisions made from grades 9–12 set the stage for their careers and life. The decision-makers are the parents and most learn about Options through word of mouth. It is also clear that getting into a university isn’t the only concern.
By being such a stressful phase, parents tend to seek help to feel supported and confident about their children’s future. Most of the worries go away once they have a clear roadmap of actions and decisions made by a qualified professional.
By analyzing Google MyBusiness, Yelp and Social Media reviews, we also found out that parents like to research the consultants before selecting a company. Meaning that staff information is crucial.
Options already had a brand guide however, it wasn’t being used to its full potential. We followed the current brand values and voice but suggested a new visual approach.
Options wasn’t being portrayed as an innovative, professional and student-centric place. They are one of Vancouver’s pioneers in student consultancy, carrying a long history and accreditation.
After meeting with stakeholders, we had a few visual brand constraints to follow: blue and red should be the primary colours, the symbol couldn’t be anything related to school or university (e.g. Crest, a grad cap, pencil…) and we must have a version with only the OS letters.
On the other hand, the brand guide already listed the company vision, positioning, tagline and brand values, so we jumped right into generating concepts.
The Brand Definition
We put together three mood boards to illustrate possible visual paths based on company values. In the end, a fourth board was created to blend unique aspects of two of them.
Mood boards help us discuss and define the brand personality using images. We needed to be sure Options would be perceived as a trustworthy organization, someone that has your back and knows how to navigate the complex educational system.
Using the established brand values as a guide, we put mood boards together to show how keywords such as “professional” or “friendly” could look like. The boards were discussed and a fourth board was put together, combining two visual directions.
With the final mood board approved, I brainstormed logo ideas, sketched and defined visual approaches that we could take. We produced three potential visual identities that were presented and iterated until one was approved by the client.
The Brand Visual Design
The name originates the symbol and its variations.
Options Solutions aims to give students assistance when they are overwhelmed with too many possible career paths to pursue. I asked myself how we could visually translate students’ options and milestones at this stage of their life.
The final concept was called “Solutions for Options” and represented the materialization of the company name. The circles represent the different paths before graduating (the options), while the X represents the paths selected with confidence (the solutions).
The final main typeface, Adelle, shows personality while still being serious. The secondary type, selected for body text, is called New Frank. It has a dynamic, energetic and contemporary feeling due to its squared, industrial drawing.
I also created logo variations to be used for workshops, small sizes, avatars, favicon and as an acronym.
The new brand book plays a key role in national brand expansion.
Included on launch was a brand book with the directions on how to apply the brand properly across its touchpoints. This guide plays a key role in the national brand expansion.
The Website Discovery
For the website, convoluted navigation, slow performance, wrong clicks and UI problems were a contributing factor to high bounce rate and loss of potential students.
To gather insights on how the website was performing, we collected data through Hotjar during one month. We confirmed most of our assumptions.
Heatmaps showed us that users were clicking at the wrong links due to faulty UI (some areas looked like buttons but weren’t). Conversely, we found real links on elements that didn’t look like links. The main navigation had unnecessary friction (users had to go through a three-step dropdown to find any service) and the hierarchy of the Home Page didn’t match what most people were searching for.
The website had 43% of visitors coming from mobile and leaving shortly after, probably because there wasn’t a mobile version at all. The website’s loading time was slow and it had less than 1000 visitors per month.
We created user stories to use as a guide for navigation, new features and overall strategy. The users’ main desires are to find Career Coaching and University application services.
User Stories help us strategize the experience. They are short, simple descriptions of website features told from the perspective of the users. To do that, we separated the main audience into two groups: people that were looking for career coaching and people that only wanted to apply to a university. Only the gathered data was used as we didn’t make any assumptions. The stories were presented and discussed with the client, which later used them to create targeted content for each group.
Unfortunately, we couldn’t convince the client to conduct user interviews and create user personas — that’s why we relied upon surveys, online feedback and stakeholder interviews. In the end, nonetheless, we had more than enough data to purposefully redesign the website.
The Website Definition
Wireframes enabled us to quickly redesign the structure of the home and service pages. Decisions were based on our Discovery findings.
As a parent, you want your child to be confident in his decisions and understand the steps to become a happy and qualified professional. You also need to trust the consultants and understand Options Solutions’ positioning within the market. We added new sections to cater to those user stories, such as Options’ stats below the hero banner and improved user flows to reach consultants’ bio pages.
Analytics showed us that people were accessing the Canadian, US and UK institutions more than any other service, so it was natural that those should go on top.
To help parents contact, we added a phone on top, book an appointment button that links to a form and, finally, an in-page contact section for service pages. Unfortunately, we couldn’t add an online booking system due to project limitations.
We presented the discovery section, a brand new navigation structure and the wireframe at the same time. In the end, the navigation had one round of revision and the wireframe, three.
The Website Visual Design
Vibrant, motivated and professional: the effective usage of Brand Guidelines.
After the approval of the wireframes and navigation, the brand guidelines and supporting elements were incorporated. Since parents are the decision-makers, the goal was to keep the visual and interactions traditional while having some exciting hover elements to spark curiosity and talk to the younger, student audience.
Positive results but still more to improve over time.
We love working with clients that are passionate about what they do. A strong foundation for digital strategy comes from clearly defined business and user goals. Even though it’s still too soon to report finalized analytics data, we had good results in the first 6 months.
At the end of the first 6 months (from May 2nd to Nov 2nd):
Bounce Rate: 49.5% (vs 61% previously)
Average Session Duration: 00:02:18 (26.5% increase)
Pages per Session: 2.76 (12% increase)
58% sessions are using a mobile device.
46.0% sessions are use a desktop.
3,950 total users.
Conversion rate: 8% in last 3 months.
Between Aug 27 — Nov 24, 2019, we had 5,469 people visiting the website. The majority of conversions came from the newly-added “Book an appointment” form on the header. In second place we have the click-to-call phone on the top and, in third, we have the in-page form submission present on service pages.
It is said that a good conversion rate is somewhere around 2% to 5%, so we are above the average. Now, it only means that more people are contacting Options through the website and, unfortunately, we cannot know how many people became students because Options doesn’t keep track of this metric. Being that as it may, we fulfilled the project conversion goals.
We had great results from the new features we added, but we still need to improve some areas:
- Due to budget, the project didn’t have a content specialist to write and edit the website and social media content. We created a small content guide to assist but it's not enough in the long term.
- We couldn’t redesign the calendar journey and we had to rely on a plug-in. This is a pity judging by how important the calendar experience is. Custom developing the calendar should be a priority for the next iterations.
- We also couldn't create new features based on User Stories due to project constraints. The ability to schedule classes online and find the best consultant based on users' situation would be an outstanding feature.
- One-to-one user interviews and user testing would be highly beneficial for this project to show us before-hand what problems we could be facing in the future.
We met our goals at the end of the six months. The client was ecstatic about the redesign, as they received some great feedback from the audience and all elements were working as they should. However, due to the project’s limitations, we couldn’t go further in our approach and deliver an even better experience for the users.
View on Behance.
Brand Design, UX/UI Design: Marcos Duda | Web Development: Alonso Ysa
Project Management: Rory Mullin | Account Director: Evan Holmgren
Developed at CodeHammerhead.
