UX/UI PROJECT

OVERVIEW:
Sprint duration: 2 weeks
‍Brief type: Concept UI project, Desktop Website
‍Deliverables: High-fidelity prototype and client presentation
‍Tools used: Figma and Webflow
‍Team: Solo Project
‍Charity: Bit by Bit
‍

WHO ARE Bit by Bit?
‍
Bit by Bit is a nonprofit located in Portland that started running programs in 2018 and incorporated in 2019. Their mission is to equip the next generation with the tools of technology, thought, and leadership to improve the world, bit by bit.

Striving to promote low-cost programs to teach and encourage students, especially girls and other underrepresented youths in the STEM community, to code, to examine the world, and to lead. We currently offer three programs: Hello World, Form and Function, and Uncommon Sense.

DELIVERABLES:
‍
Brief: To redesign the homepage of a charity website called Bit by Bit whose mission is to provide low-cost and no-cost programs that teach and encourage people, especially underrepresented youths, to code, lead, and improve their understanding of the world. https://bitbybitcoding.org/index

To redesign the homepage for 3 viewports (small, medium, and large)
Present a documented style guide
Build the homepage onto webflow and make it responsive.

Finding the Problem.

Taking a look at the current website I began by doing an audit using Nielsen’s 10 usability heuristic principles as a guide to analyse and identify the problems on how I could create a more meaningful impact for users visiting this site.

From what I could see there was a lack of excitement on the homepage. There was no sense of hierarchy and the colours, typography and images seemed to be losing the users attention and their understanding of what the charity’s mission was about.

Brand Tone and Message.

In order to change and re-design the homepage I needed to think about the tone and how I wanted the brand to come across. First I thought about how I wanted the charity to sound, look and act like and listed keywords to keep in mind throughout the design process.

I want to bring across a fun and playful element whilst conveying the mission of the charity which is to encourage learning in a field that is primarily aimed more at boys.

The target audience for the charity is aimed at 11-18 year old girls/non binary youths and the biggest challenge was how to differentiate ourselves from the competitors.

Research.

This was where I did some research to see what other competitor sites had to offer and how they conveyed their message.

Takeaways..

The websites are colourful, with good use of images.

Takeaways..

Statistics to promote the charity and their values.

Takeaways..

The mission of the charity is always on the hero banner and is clear on each site.

Inspiration.

The websites I looked at inspired me to go for a bold and visually striking design. This led me to start working on my mood board.
I put together images that I thought would stimulate interest and capture my primary audience's attention if they were to go on the website. I wanted elements such as large call to action buttons, images to naturally draw the users to simple and recognisable objects.

BRIGHT COLOURS

CODING IMAGES

FUNKY TYPEFACE

USE OF WHITE SPACE

Style Guide.

I moved on to creating my style guide so that when I start designing I can ensure a continuous brand experience and keep the consistency throughout the different viewports. I organised the typography and its weights starting from mobile first.

I chose OCR-A as because of its distinctive technical appearance.

The colour scheme bright bringing a young ambience.

‍

Webflow.

For the second week of the project my goal was to transfer my Figma designs onto Webflow, a fantastic tool where you can build a responsive website. I enjoyed rolling up my sleeves and learning about the foundations of building from scratch.

What I learned.

TESTING IS KEY- although this was a UI based project and being the sole decision maker everything was based on my assumptions. I would love to be able to test the designs with the primary audience and see whether the information is clear and grabs their attention.

‍IMPORTANCE OF VISUALS- make sure that the navigation and call to action areas are the focal points. We want to attract the right demographic and to make the charity visually memorable as well.

‍RESPONSIVE and ACCESSIBLE DESIGNS- understanding the foundations of how a website is built and what can and can not work and how I can create designs that developers can later build on.

Responsive Design.

Check out the Prototype below!