Website re-design for an ed-tech charity, BitbyBit
Re-design over three viewports in a one-week design sprint
Click below for full Medium Case Study
The Brief
For the second visual design week, my task was to re-skin two pages of a charity website across three different viewports. We had to keep the functionalities, structure, and content identical, only changing the UI and branding.
I chose a charity called BitByBit, an organisation in America that offers low-cost and no-cost tech programs to underprivileged children in High School and Middle School.
Visual Design Process
Research
UX Audit of existing website
Competitor Analysis
Moodboard
Word Association
Develop & Deliver
Sketching
Low-High Fidelity Prototypes
Style Guide
Research
UX Audit
To start the process, I conducted a UX audit of the existing website to get a sense on what I needed to improve:
Too much text — no differentiation between headers and body text
Poor content hierarchy
Colours inaccessible
No photos of people — For a website that was about education and teaching I was surprised to find that there weren’t any photos featuring people in them
About page in a separate tab — For a charity set up by two women at University, I wanted to celebrate this by bringing it onto the homepage.
Competitor Analysis
Coding Programs
Images of people make the homepages much more engaging and relatable
Use of hard/geometric shapes as opposed to soft edges to give a more exciting feel to the website.
Use of bold, big, exciting text — Find a keyphrase and enlargen it — Changing the perception around coding to make it exciting and cool
In-direct Charities
Again, the hero image featured people - used across all websites
Big, bold text alongside hero image
Top navigation for all — next to logo. Big bold text for heading
Use of brand colours clear on all three apart from Save the Children
Donate buttons are highlighted as buttons on all three
Word Association
The key words/phrases that came out;
Technology
Skill
Difficult/Hard
Perception of Geeky/Nerdy
Young/Youth
Language
Moodboard
Tagline - “A Brighter Future”
Develop & Deliver
Sketching
Sketching some initial ideas for the homepage
Lo-Fidelity Wireframes
I transferred my sketches into lo-fidelity wireframes. It was important that I put in all of the text so I knew how much space I was working with.
Experimentation
Learning from some mistakes from my previous project, I experimented with my colours before diving into High-Fidelity. I took a frame and tested various colour/typography combinations to see what worked well and what clashed. I always wanted to keep in mind this idea of excitement and energy.
Hi-Fidelity Prototype
Click play below for the prototype walking you through the three different viewports.
Next Steps
Add more fun and engaging iconography such as emoji’s in order to appeal to a younger demographic
Consider adding more screens across the 3 viewports
Test the prototype for more user feedback
Feedback
Overall I was really happy with the hi-fidelity version. I was happy with how the content shifted across different viewports as it made sense to add more content as I went up in size.
The feedback I received from people in the class was that it seemed a bit too ‘advanced’ for middle and high-schoolers which was a fair point.
Learnings
Experimenting with colours and text is much easier to do on a blank frame before the content is in place. When I was fixed to a certain viewport I found it hard to experiment as I felt I was ruining what was already in place.
When creating low-fidelity digital wireframes, it was much easier to get a sense of the length of the screen when all the content was in. In previous projects I found I was under-estimating how much space was needed for various pages.