Panu, the Client, has been a software developer for more than 15 years. He owns a well established educational website for developers: Byte Archer. His work is focused on diving into difficult coding concepts and then formulating them into easily consumable guidebooks, blogs and presentations. Panu wanted to give all his assets the same visual style and redesign the site to be more easily readable and approachable.
The main goals of the redesign were twofold:
1) Make the articles easily processed: readable, scannable, accessible for the visitors.
2) Get the whole website on the same page in terms of visual style, clean up the branding.
One additional, but very important goal, was to keep the site as easy to load as possible. It was already working very fast in its initial form, and the goal was to keep that smooth speed when the redesign happens.
Keeping in mind the importance of the articles, we started the redesign process there.
The main focus was the flow of the text: choose good, readable typography that is quick to load, polish the scannability of the site and make clear decisions about the component hierarchy.
I already had access to variety of articles that were written before, so I had a good idea of what types of componets may be needed and it served as a good testing ground.
The next step of the redesign was focused on the sale pages for the Node App book and Node.js course.
These two resources are packed with value, and my main goal was to highlight that value. To do that, I’ve created some visual assets: illustrations, mockups and vector shapes.
The structure of the site was originally done with a lot of care, and it worked well in terms of content - but it wasn’t visually attractive enough.
When I was creating the assets to make these pages more visually interesting, I also thought a lot about visual clarity of presented information.
For example, exercises that were previously only shown as a small list, now are more visually noticable with custom illustrations.
ByteArcher redesign was a very detailed process that took about 3 months to finish. The Client and I had ongoing weekly progress meetings, discussing various ideas and directions we could take.
All of the design iterations were done in Figma, while I also did a lot of UX research on the side, making sure every decision we end up making makes sense with users in mind.
For wireframing and design: Figma
For developer handout: Figma
For asset edits: Affinity Designer, Affinity Photo
For illustrations: Procreate
