Silver Battery

This company targets people looking to kickstart a career in the tech industry. They may be new to the workforce or looking to change career paths. Their design focuses on a streamlined approach to education with extra features like a profile to interact with the community and start a job search.


Silver Battery is a remote learning platform targeted towards the education of technology-focused careers. They include extra features like a way to connect with other people in the industry and become available to recruiters. Their target audience include students interested in a career in tech, educators, and recruiters. Their website utilizes gradients to provide a soothing color scheme, while at the same time being lively.  

Design Challenge

Creating a website that will make it easy to sign up to begin courses. Make it user friendly by creating a smooth onboarding process. This is simplified by including features such as onboarding preferences and creating an optional onboarding tutorial.

My role

Visual Designer, Researcher


Adobe XD, Photoshop, Pen & Paper

Target Audience

Students interested in a career in tech, educators & tech recruiters

Here is my process...

Competitive Analysis

First, I do some research on different brands with a similar product. This gives me an opportunity to see how other companies in our industry are implementing certain features and identify as a user what makes the web experience a good or bad one.

LinkedIn Learning: A search bar allows for quick access to a specific topic. There is a banner to showcase a simple hero image with call to action to start a free trial. Showcasing several videos is helpful to get started right away. The hierarchy isn't clear making the landing page feel crowded.

LinkedIn Learning

Coursera: Very simplified landing page with a large hero image and clear call to action. As you scroll, they showcase several known companies they collaborate with to give points of reference. Overall, the color scheme is very bright blue which is on brand, exciting and legible.


Stripe: Utilized as inspiration for the overall layout stripe combines a strong visual with a bold statement then showcases a call to action to get started. The gradients add interest. Additionally using glass morphism on some of the visual elements such as buttons and Hero image make it feel very updated and modern to users.



After preliminary research, I get started with some quick sketches about the concept and layout.

Silver Battery 2.0 Sketches


Then, I move to creating wireframes for the main pages to develop a layout and include areas for any information I want to present to the user. Below are some examples of the wireframes I developed for this project.

Silver Battery 2.0 Wireframes
Silver Battery 2.0 Wireframes

High-Fidelity Prototype

A full mock-up of the landing page with scroll is developed, I created two different designs. A small sample of interested users were surveyed and 80% of respondents favored the second design citing a more soothing appearance.

Silver Battery Version Comparison

Continue to scroll for a close up of version 2.0 and additional pages for the prototype.

Silver Battery Version 2.0 Hero Image
Silver Battery Version 2.0 Home, Suggested Videos
Silver Battery Version 2.0 Home, Testamonials
Silver Battery Version 2.0 Home, Certificate Options
Silver Battery Version 2.0 Home, Short Course Suggestion
Silver Battery Version 2.0 Home, Footer

A form is used for existing users to log into their account.

Silver Battery 2.0 Sign In

When signing up for a free trial a form is used to create their account.

Silver Battery 2.0 Sign Up

In order to provide the best recommendations students are invited to select their desired career path.

Silver Battery 2.0 Onboarding Preferences


A student profile is useful when trying to make connections with others in your community. Additionally, this makes it useful for the job search portion of the student journey.

Silver Battery 2.0 Student Profile
Silver Battery 2.0 Student Profile

Onboarding is made easier with a descriptive tutorial! For more tech savvy student there is an option to skip at the top right corner. It kicks off describing elements of a student portfolio.

Silver Battery 2.0 Onboarding Tutorial

Arrows point to all the different tabs and selecting a tab can go into deeper explanation of each tab.

Silver Battery 2.0 Onboarding Tutorial

An example of a tab being selected is shown below with courses.

Silver Battery 2.0 Onboarding Tutorial

If a student needs more help, they are given the option of further help before jumping into the learning portion.

Silver Battery 2.0 Onboarding Tutorial

Other projects: 

Copyright © Itzamara Machado, 2022