Ingressive For Good (I4G) 30 Days Of Design Competition
Ingressive for Good exists to equip young Africans in need with tech skills to help them impact and contribute to the development of Africa, socially and economically. Ingressive For Good (I4G) was created to address the glaring inequities that exist within African tech ecosystems.
The Challenge
Designers are tasked to work on daily design challenges for 30days.
The Goal
Improve your design skills, explore new styles, learn animation, and showcase your designs.
Org
Ingressive For Good
Awards
1st Position
Skills
UI Design
Start
12 August, 2021
Tools
Figma
End
11 September, 2021
Role
UI Designer (Solo) – Research, Design, Wireframing, Prototyping
Backstory
My User Interface (UI) design path started with I4G when I earned a scholarship to study UI design using Figma. A couple of days after completing my course, I received a newsletter about a design competition. I took up the challenge because I saw it as an opportunity to learn and become a better designer.
Ready.Set.Go.
For this (semi) case study, we will explore 7 out of 30 designs from the I4G design challenge. I grouped the designs based on concept, prototype, and redesign.
Let’s get started
Day 7
Challenge: Discover any popular brand with a bad website design. Give it a nice look. Just a simple creative landing page.
Design Solution: For this challenge, I picked Kingdom Books and Stationery, Ghana. I buy arts and craft supplies from them so I thought why not redesign their website.
What’s available
I started out by looking through their current website and assessing the home page. I wanted to change the layout – remove the side menu, show items on sale, adjust the main slider, and shop layout.
At this point, I was not sure how the design would look like. I looked for inspiration on Dribbble and Themeforest.
Initial brianstorming
Before I learned UI design, I used to work with HTML & CSS UI kits. Since the kits had components, I would make a list of what I wanted on a page and then put the components together. I applied this technique to the challenge.
Low-Fidelity – High-Fidelity Wireframe
Using my list as a guide, I created the first low-fidelity wireframe using a grey color scheme. I slowly added text, images, and colors. I picked the primary color from their logo.
Final Design
My goal was to keep things simple. I limited the use of colors to eliminate distractions.
Day 10
Challenge: Design a landing page for the Nigerian Basket Ball Team
What’s Available
I found the Nigerian Basket Ball Federation website. My goal was not to redesign it but to use it as a reference. What content is relevant? What should I show on my own design?
Initial brianstorming
I had a lot of ideas – may be a bit overambitious considering the timeframe. As usual, I created a list of what I wanted and sketched some sections – just to give me an idea of what I had to design in Figma. I wanted the navigation dots to be a basketball and as the user swipes through, it rotates. Sounded good in my head but I did not have the skills nor time to implement it.
Wireframes
I created a Low-fidelity wireframe using my list as a guide. I had to make changes and get rid of some sections. For example, below the main slider, we should have a carousel of upcoming games. Due to time limitations and exhaustion (with a touch of frustration), I had to remove and replace it with partner brands.
Final Design
*insert Khaby*
Bonus: Day 11
For day 11, we had to create an animation slider. I decided to modify the slider for day 10. I replaced the white basketball indicator with a colored one and I downloaded the Figmotion plugin for Figma.
Did I get the ball to rotate? Yes. Did I like the outcome? Not really. To save time, I discarded the animation.
Video Prototype for Day 11
Day 13
Challenge: Concept idea for an online platform designed for architecture lovers.
What’s Available
On day 12, I had created a dashboard for a construction company in Ghana, Empire Domus. For me, day 13 felt like an extension of day 12. I am not complaining because I love architecture. When I read the challenge, the first thing that came to mind was Zaha Hadid then black and white. I wanted to keep things minimal.
I started out by looking at architecture websites like Houzz and Archilovers. I wanted to see the layout and how they present information.
The idea
My idea was to create a platform for Architects to showcase their projects and portfolios – Dribbble for Architects. I wanted to understand how an Architect would present their portfolio so I did some research and saved ideas on Pinterest. I used this as a guide to design the home page, portfolio section, and portfolio cover.
I made notes of what I had learned and listed out what I wanted on each page. Initially, I wanted to showcase Zaha Hadid’s works. I felt her designs will fit perfectly with the color scheme but I changed my mind. The reason was – I would need more time to select the designs plus I had to work on three pages and the deadline was 11:59 PM WAT.
On the discover page, I wanted to showcase recent projects uploaded on the platform. I looked at Houzz, Dribbble, and Behance to see how they designed similar pages.
Initially, I experimented with an image slider for the home page but I did not like how it looked. It felt out of place. I returned to my pinboard for inspiration and I decided to recreate the bottom-right image for the home section.
Wireframes
For the home page, I started out by arranging squares/rectangles with a spacing of 8px, then I filled the spaces with smaller rectangles. When I was satisfied with the outcome, I added images.
Home Page
Portfolio Page
Editorial/Discover Page
Day 23
Challenge: Play with slider transition effects
Design Solution: A specs page for Innoson Motors
On day 21, we had to design a rates page for Innoson Motors. I continued from where I left off by working on a slider to showcase the cars’ specs.
What’s Available
Once again I looked for the current specs page on the Innoson website to see what was available and how I could improve it.
I thought about a car garage with specs and the price somewhere – top left or right. I wanted the user to focus solely on the car and to keep the information short. I did not want to have smaller images on the side of the slider – it would ruin the entire look. I decided it would make sense to place indicators on different parts of the cars and when the user places their mouse over it, they’ll see a larger image overlay.
Wireframe and Prototype
Day 24
Challenge: Design any government mobile app
Design Solution: Electric Company Of Ghana (ECG) app
What’s Available
I logged out of the app so I could get a better feel of everything and decide what I wanted to improve. I picked three screens login, dashboard, and contact.
For the login, I did not like the blue background behind the logo, and the input fields.
With the dashboard, I wanted to clean up the entire page. Rather than have the user tap on ‘Meter Management’ before they could see their meters, we could display all the meters on the dashboard. Notifications and User Settings can be moved to the top-nav bar.
When a customer taps on Report Issue, they’ll have to choose a complaint type, then complaint issue (see image). I knew this had to be improved but I was not sure how. Then it hit me, a chatbot. I played back the conversations I had with Wysa (a mental health chatbot). And this would be a better fit. The customers would feel like they’re talking to a rep and not just filling forms.
I decided it would be best to combine Contact us and Report Issue.
Notes + Sketches
I put all my ideas down on paper and sketched some sections to guide me as I designed.
I used this image as a reference when designing the meter cards for the dashboard.
From my initial sketch, I wanted the user to swipe and have a light bulb turn on before the login screen. The deadline was fast approaching and I did not know how I would go about it. I removed it from the final design.
Final Design
Bonus: Day 25
I decided to continue with day 24 and create gradient meter cards.
Day 28
Challenge: Design a new landing page for ingressive for good
What’s Available
The first thing I did was explore the current website. I looked at every page to see what information could be relevant on the home page. I also checked out NGO templates on ThemeForest for inspiration.
Notes + Sketches
The current homepage has a slider, I knew I wanted to do something different but I was not sure. I thought maybe we could have polygon ‘i’, ‘4’, and ‘g’. I searched for polygon numbers and letters and dowloaded images.
Once again I outlined the pages, sections, and how the layout should be.
I wanted to create consistency with the I4G brand so I took inspiration from their social media flyers. My goal was to have the ‘i’, ‘4’, ‘g’ match the images below. Letter ‘i’ and ‘g’ was easy but number ‘4’, took over 2hours and I had to abandon it at one point to focus on other sections.
Wireframes + Final Design
On the current website, users have to scroll down to see upcoming events, I felt it would be better to have this after the hero section. Once a user lands on the home page, they’re informed of events coming up. Next up, I decided to remove the donate button from the top navbar and create a donate section below the about us. Reason – once people learn about I4G, they should see donate to support initiatives.
I created a section for the latest blog and press updates to give users information on the latest gists. I wanted the new design to have a summary of everything going on with I4G.
Challenges
The biggest challenge for me was underestimating the complexity of the design brief. I would write down what I wanted to design and when I start, the complexity starts to show. I struggled with font sizes, font pairing, spacing, and color selection.
I had not learned how Auto Layout worked – when I added a new component or removed one, I would manually adjust the spacing.
My skills did not match the ideas in my head. The execution was hard and I had to let go of some concepts to be able to submit.
Prior to this challenge, I had a bad habit of working in isolation due to fear of what people will say. It was difficult to post daily. I struggle with imposter syndrome – I barely saw the beauty in my designs until the competition ended. Working on the case study made me appreciate my hard work more.
Final Thoughts
Once the competition was done, I took notes of my weak points and got relevant courses. I recently purchased a Domestika course by Pablo Stanley – Web design with Figma: Building Striking Compositions. My favorite part of the course would be: Defining your visual style. The course is perfect for newbies as it is simple, straightforward, and packed with information.
I’ve learned about AutoLayouts from Udayraj Sathe on Youtube (which in my opinion, is the best video on auto layouts).
The design challenge was great – it pushed me out of my comfort zone. Looking at my designs now, it is hard to tell that I was frustrated and on the verge of giving up. The icing on the delicious cake was coming first place 🙂
Press Play
All 30 Designs from the Challenge
View All Designs Here. I documented the entire challenge on Twitter – view thread.
Credits
Images: Envato Elements, Pexels, Unsplash, Ambitious_vick(IG), Dtigress(IG), Nbbfline.com, _thenigerianqueen(IG), NigeriaBasketball, Innoson Vehicles, ECG, I4G, SVGBackgrounds
Icons: Flaticons, Font Awesome, Feathericons, Freepik, Prettycons
Illustrations: Sapiens
