Figure 1: BitBakery Conveyor Belt, FAQ illustration splash.

BitBakery

UX + UI

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.

Scroll through the BitBakery webpage

Figure 2: Scroll through the newly built BitBakery site, May 2019.

Growing Pains and Goals

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.

Visual Assets

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!

Color Palette

#ed222b
#b4181d
#921012

Figure 4.1: Only bits or extremely small areas have red (close button in the windows).

#faf9fa
#b7b7b7
#eeeeee
#6b6b6b
#515151
#1a202c

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)

Typography

Font hierarchy for the website, blog and marketing materials.

Figure 5: Font hierarchy for the website, blog and marketing materials.

IconS

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.

Design: For Clients

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.

Priority of sections to build for clients:

  1. Site Description
  2. Services Section
  3. Contact Section: Encourages the client to reach out to BitBakery quickly without an appointment.
  4. FAQ Section: Addressing questions about services.
  5. About Section

Design: For Talent

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.

Priority of sections to build for Talent:

  1. Site Description
  2. Careers Page
  3. Footer with Career Link: Talent immediately scroll down to the footer to find a link to the page to apply (e.g. Careers, Jobs, Opportunities)
  4. Contact Section
  5. About Section

User Personas

User persona for a client representative.

Figure 8.1: Client persona is a representative from a company reaching out.

User persona for talent being a co-op student.

Figure 8.2: Talent persona is represented as a student undergoing a co-op program.

Prototype

TOOLS: Adobe XD, Material Design, Paper UI
SKILLS:
 Wireframing, Low & High-Fidelity Prototyping

1st Iteration of the Website

1st iteration website, low fidelity

2nd Iteration of the Website

2nd iteration, low fidelity

High Fidelity Mock-up

high fidelity mock up with rebranding

Website

TOOLS: Brackets, Paper UI, Bootstrap, WAVE
SKILLS: HTML, CSS, Javascript, Responsive Design

Accessibility
Close X

Accessibility

Navigation menu links were expanded from the hamburger icon to allow keyboard navigation for folks with motor-restrictions.

Contrast, color, font weight, size and type are considered to accommodate visually impaired folks. Alt-text were added to images including logos so that text-to-speech readers can read aloud the text to users.

Optimization
Close X

Optimization

For fast loading, many of the images are web optimized banners exported from Photoshop. Previously, the page opens up to a video overlay splash that took about 3-4 seconds to load after everything else has.

A large logo image didn't help with the experience and tiles scattered all throughout the site used more browser power with unnecessary Javascript.

Navigation
Close X

Navigation

Navigation menu links were expanded from the hamburger icon to allow keyboard navigation for folks with motor-restrictions.

Contrast, color, font weight, size and type are considered to accommodate visually impaired folks. Alt-text were added to images including logos so that text-to-speech readers can read aloud the text to users.

Debugging
Close X

Debugging

Navigation menu links were expanded from the hamburger icon to allow keyboard navigation for folks with motor-restrictions.

Contrast, color, font weight, size and type are considered to accommodate visually impaired folks. Alt-text were added to images including logos so that text-to-speech readers can read aloud the text to users.

mobile screen previews

Figure 12: View of browsing the website on different aspect ratios and screen sizes: Tablet (768px x 876px), Phone (320px).

Screen replica of BitBakery for careers page

Figure 13: Careers page, high fidelity mockup with icons, graphics and branding in place.

Visit BitBakery Website

Conclusion

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.

Icon one

"How did you find BitBakery?"

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.

Icon 2

"Who is BitBakery?"

200% more people have been able to answer this question confidently and correctly contrary to the previous website.

Icon 3

"What does BitBakery do?"

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.

top

Contact Me