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.
Concept
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
Tools
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.
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.
Sketches
After preliminary research, I get started with some quick sketches about the concept and layout.
Wireframes
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.
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.
Continue to scroll for a close up of version 2.0 and additional pages for the prototype.
A form is used for existing users to log into their account.
When signing up for a free trial a form is used to create their account.
In order to provide the best recommendations students are invited to select their desired career path.
Features
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.
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.
Arrows point to all the different tabs and selecting a tab can go into deeper explanation of each tab.
An example of a tab being selected is shown below with courses.
If a student needs more help, they are given the option of further help before jumping into the learning portion.
