Olas.io

Background & Challenge

Olas.io provides education, career guidance, and opportunities for client experiences to help students enter new tech career fields.

 

Olas.io was an early stage startup with a few site pages designed. As a UX designer it was my role to work with a team on connecting clients with students. The scope of our project expanded when I realized there was no centralized hub for students' information and we shifted focus to include a dashboard.

The CEO had worked with students previously to do some user research and began designing the site including some landing pages and a user account. Our team began with a discussion the scope of the project and the brand identity. Our fully remote team of 4 had 3 months to complete this project.

 

Our main focus was on how to connect students and clients.

How might we help Olas students gain experience that prepares them for their future careers?

 

First we needed to understand our user.

Meet Julian

Julian is a career changer. He just finished the Olas.io UX Design course & is looking for opportunities to gain experience. He needs to feel supported in his search and empowered throughout the application process.

To accomplish this he should be shown postings that a relevant to his skill set/level and be able to see where he is in the application process. 

Transparency

" I feel like I never know what's happening to my job application. Companies I was talking with will just disappear and I have no idea why."

Efficiency

" After looking at 100 postings and then applying to maybe less than 10 of them I get really tired of it. Like am I just wasting my time?"

Familiarity

" I find myself going back to LinkedIn's job search because I'm already on the site and find it easy to navigate"

User Research

Needs & Wants

We were provided with some preliminary research that showed most people interested in Olas were people transitioning careers. They were most interested in gaining experience to help them land their first job. We decided to conduct 8 user interviews to talk to career changers.

 

We wanted to learn:​​

  • What were their previous experiences of job searching?

  • What did they like/dislike about these experiences?

  • What were things they wanted in an ideal search?

We chose interviews to have in-depth conversations with several users from different backgrounds who were interested in changing careers to see similarities and differences. 

From this research we extrapolated 3 main values of familiarity, efficiency, and transparency.

Transparency

Efficiency

  • See personalized content

  • Do more with less steps

  • Easy to navigate 

Familiarity

  • Conforms to mental models

  • Create information hierarchy 

  • Consistency throughout site

  • Enable communication

  • Show application process

  • Standardized application

Strategy

Framing & Solutions

Keeping our main values and persona in mind we decided to design a job board that had featured posts related to the user, a streamlined single application, and post-application updates on the process.

We broke down the process into four main sections:

  • Project Search

  • Project Application

  • Employer Communications

  • Project Completion/Post Project Activities

A new challenge presents:

Olas had 3 main website sections focused on education, career guidance, and experience opportunities. Our team was focused on experience opportunities, however as we began to think about information architecture and where our section would fit in the larger site it became clear to me that a menu would not be the most effective way for a user to navigate the site. 

We needed a central area for the user to access information on the project listings they had applied to, communicate with employers, and showcase different accomplishments. 

I chose a dashboard due to user familiarity, ease of navigation, and ability to display a wide variety of information. The dashboard was also designed with considerations of sustainability as the product had other sections that were also in development.

Moving forward I led design on the dashboard as well as focusing on Employer Communications.

After identifying our main values and creating a persona we wanted to drilled into these attributes and how they would affect our design decisions and directions moving forward.

Usability

Prototypes & Tests

After sharing our wireframes with the client they shared with us the style guide with a focus to keep the site looking "modern" and "sleek". 

Moving into the product's final phase we designed a mid fidelity prototype in Figma and held usability tests with 6 users.

Reflecting our main values we were looking to see:

  • Were users able to easy navigate our site?

  • Was it clear where things were located on our site?

  • Did users feel informed on the process their applications were going through on the site?

Our tasks were to find a project, apply to a project, and communicate with an employer to begin a project. 

Some important feedback the users gave was that some buttons were confusing, they were questions about the badges system, and too many pop ups. 

Ideation

Sketches & Wireframes

We translated our sketches into a low fidelity prototype to get client feedback on. Created with Figma my wireframes gave me a solid foundation to build the final solution on. 

I started sketching to create a foundation of what my dashboard and employer communications would look like. My sketches were focused on the following features.

Dashboard:

  • Project listings the user has interacted with are categorized

  • Display user accomplishments

  • Toggle between education and experience sections of the website

Employer Communications

  • Notify users of messages

  • Chat functionality between client and student

Key Takeaways

Reflections & Next Steps
  1. Design for sustainability: Working on a section of a website in progress, I had to keep in mind that most of the site was not created yet and think about how my design would work with future additions

  2. Remote communication doesn't need to be hard: Working completely remotely was an initial challenge, however we made it work with strong communication across multiple platforms

  3. Get client feedback early on: Running our early wireframes by the client saved us time by allowing up to fix things earlier instead of continuing to iterate on ideas that weren't what they envisioned. 

In the future I would like to dive into the gamification aspect with a detailed badge system, like users mentioned, that combines with the education section of the website for consistency. 

Final Design

Protoype & Handoff

Our final iteration of the project took into consider all that we had learned from users and feedback from our client. We annotated our screens and shared them with the client as a powerpoint as well as giving them access to the Figma file for developers to view using the Code Inspection feature.