Figure 1: BitBakery Conveyor Belt, FAQ illustration splash.
2018
Role(s): UX Designer, Web Developer + Designer
BitBakery's responsive website introduces their trusted software development services across the world; targeting clients in need of tech teams and products while looking out for talent looking to be a part of a growing team in a startup tech environment.
Figure 2: Scroll through the newly built BitBakery site, May 2019.
As a design intern for Bitbakery, I've been given a solo mission to improve and build the company's website which previously served as a web infographic of their services.
Although I am a one-person team, I've frequently collaborated with the UX copywriter, CEO and UX director to help expand their website from being a single page infographic to an interactive platform that encourages visitors to learn about BitBakery and communicate with the BitBakery team.
Tools: Adobe Illustrator, Adobe Photoshop
Skills: Graphic design, Illustration, Printmaking
Figure 3: Cover illustration for BitBakery's home page header. The original file size is over 4000 x 5000px!
Figure 4.1: Only bits or extremely small areas have red (close button in the windows).
Figure 4.2: High-key greyscale used for illustrations and website background.
Figure 4.3: Off-black is used for text (#1a202c is the default color for text)
Figure 5: Font hierarchy for the website, blog and marketing materials.
Figure 6.1: BitBakery sprites and furniture, often used to make new assets.
Figure 6.2-6.3: Complete library of sprites from the bits to monitors.
Client representatives need an easy way to access the information either for quick information relaying for their respective company head or nuanced research to see if BitBakery's services are compatible with their needs before contacting.
Whether recently graduated or looking to join a new team, talent have similar habits of exploring the company website, scouring across every link and social media account to look for opportunities to apply.
Figure 8.1: Client persona is a representative from a company reaching out.
Figure 8.2: Talent persona is represented as a student undergoing a co-op program.
TOOLS: Adobe XD, Material Design, Paper UI
SKILLS: Wireframing, Low & High-Fidelity Prototyping
TOOLS: Brackets, Paper UI, Bootstrap, WAVE
SKILLS: HTML, CSS, Javascript, Responsive Design
Figure 12: View of browsing the website on different aspect ratios and screen sizes: Tablet (768px x 876px), Phone (320px).
Figure 13: Careers page, high fidelity mockup with icons, graphics and branding in place.
To test out the efficiency of each client and talent finding the information needed to answer the 3 key questions, a perfect setting and sample size would be at the next Communitech TechJam.
All party members were first directed from the website or from word-of-mouth from previous business partners. SEO has improved which contributed with more people finding the website under tech instead of a local bakery.
200% more people have been able to answer this question confidently and correctly contrary to the previous website.
During the brief interviews, about 95% of both talent and other businesses in the Communitech event were able to recall the services only a scroll away from the home page.
