Start small, by volunteering

#neubrutalism

What do you use to break down your qualitative research?

Elon Musk's X-citing Twitter Transformation: A Risky but Rewarding Move

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lYqk0j0NV_m0a8hYlrmf3A.jpeg"></figure>Learning design, especially for beginners, can be fascinating, but it can get to a point where you wonder why the money is not coming your way. We are always impatient with our growth journeys and ask ourselves, “wtf am I doing wrong?”
I get it; you may have started a design journey thinking it’s a quick way to join the market, but the reality is ‘mambo ni mangumu‘ especially here in Kenya. My advice, take it slow, by following the below steps:
<ol>
<li>Learn the design basics</li>
<li>Do a personal project.</li>
<li>
Volunteer — yeah, you heard me right
</li>
<li>Draft a portfolio</li>
<li>Start applying for a job</li>
</ol>
The above steps may look a bit long but trust me, it’s worth it.
For this article, I’ll talk about step 3, volunteering. It’s a crucial step to test what you have learned in the real world. Yes, it may sound harsh that you are doing real work for free, but in the real sense, you are giving yourself space to identify errors before you get involved in tight contract projects that don’t give an F on mistakes.
I’ll use myself as an example; in early 2022, I volunteered for a UX Job through an online platform, <a href="https://www.catchafire.org/">Catchfire</a>. I got lucky working with an organization that wanted to redesign its site.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*URABnxD1v1kwXvCZbShRKw.jpeg"><figcaption>Site redesign for a non-profit at Haitian</figcaption></figure>What I learned from my volunteer work
You can’t acquire some crucial skills via books or design boot camps until you practice them in a real-life scenario; that’s when you can call yourself a UX designer. Below are a few things I Learned:
<ul>
<li>
Empathy in the real world — The first thing you usually learn in UX is that you should empathize with your users. In this project, I had a chance to put myself in the users’ shoes compared to the dummy projects I had done earlier on.</li>
<li>
Meeting deadlines with an agile flow — I earlier thought designers had all the time in the world to do research, design, and iterations. But in the real world, it doesn’t work like that; time = money. Managers need to review your work in advance, and developers need to implement what you work on. Instead of mentioning the submission date, It’s better to outline all the work you’ll be doing on an excel sheet and share it with your team. This will help you work in an <a href="https://www.guru99.com/waterfall-vs-agile.html">agile process</a> instead of <a href="https://www.guru99.com/waterfall-vs-agile.html">waterfall.</a>
</li>
<li>
Communicating like a champ — Being a UX designer without communication skills is chaos. You’d work with teams from tech to managers in real projects. I learned how to compose myself whenever I got feedback on my designs and use different languages when interacting with managers and the tech team to drive a point home.</li>
</ul>
To cut it short, volunteering will help accelerate and sharpen your skills before getting into paying jobs. Also, adding a real job to your portfolio may increase your chance of getting hired. You may even get senior-level design opportunities, having attained crucial skills in volunteer jobs.
Nice, so where can I Volunteer?
My best suggestion is to check out the opportunities at <a href="https://www.catchafire.org/volunteer/">Catchfire</a>; they have a large pool of organizations with charming projects, from design to development, that can help you grow your career. Besides that, you can volunteer through internship opportunities shared on LinkedIn.
That’s all for now and I hope now you have a better understanding of the next step to take in your design journey.
Cheers ✌️
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=73b18a4aa8ea" width="1" height="1" alt="">

Whenever an upcoming designer asks me for advice, it’s usually: “Where can I learn Figma?” The idea that design is just about mastering Figma has taken over the industry, leading to many designers with only surface-level skills. Sadly, many only realize later on in their careers that while they know how to design, they can’t solve the problems they’ve been hired to fix.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Io0EgZHBTnuMRN5zFNr8HQ.jpeg"></figure>Figma is just a tool to help showcase your UX skills. So, what else do you need to be a great UX designer?
<h3>1. Understand the Problem</h3>
Skipping this step can result in designing the right solution for the wrong problem. Many companies waste millions on new products only to discover that users aren’t interested in them.
Steps:
<ul><li>
Ask the 5 Whys — Figure out the <a href="https://www.smartsheet.com/content/problem-statement-templates">Who, What, When, Where, and Why</a>. This helps you fully understand the problem you’re tackling. Let the stakeholders answer these questions, as they own the product. It’ll save you from being told to rework everything later because it doesn’t align with their mission.</li></ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z_TfFlH4JAcU24uFwBCBpg.jpeg"><figcaption>Image from <a href="https://www.smartsheet.com/content/problem-statement-templates">smartsheet</a></figcaption></figure><ul><li>
Customer Problem Statement —Put yourself in the shoes of the customer and define the problem. This will ensure you’re solving for the customer, not just for the company.</li></ul>
<h3>2. Do Some Research — It Won’t Bite;)</h3>
Today, any product without data to back it up is seen as risky. The same goes for design. To ensure you’re on track, you need to research to validate the solution you want to design.
For solo projects, check existing data online before diving in. If you can talk to real customers — then that’s better! You can gather qualitative and quantitative insights through interviews or surveys.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*B9BGkSAUqjRoWYH1RWVUMA.jpeg"><figcaption>Reviewing a transcribed interview on dovetail.</figcaption></figure>Got a big audience? Tools like <a href="https://dovetail.com/">Dovetail </a>can transcribe interviews and highlight the key insights you need for your project.
Also, if your stakeholders are slow-moving, showing them data can help push things forward!
<h3>3. Brainstorm Solutions</h3>
When brainstorming, use tools that your team can easily follow. Skip Figma for now😉. Bring out the paper, markers, and a whiteboard. Let everyone share their ideas, no matter how wild they sound! Including everyone at this stage ensures that the whole team, not just you, are aligned with the solution.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*g3WN5C0GYapGFidKsFNCNQ.jpeg"><figcaption>Brainstorming with colleagues at Sote Hub</figcaption></figure><h3>4. Hot Potato Handoff</h3>
You might be tempted to design the whole product and then hand it off to stakeholders. However, this can lead to designing for yourself and not for them.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pzFfwpYZKM49y-pzWtIV5w.jpeg"><figcaption>Ref: <a href="https://helio.app/blog/design-handoff/">https://helio.app/blog/design-handoff/</a></figcaption></figure>To avoid this, try the “<a href="https://uxplanet.org/hot-potato-process-as-replacement-for-design-handoff-8a131e23da04">hot potato</a>” method: after designing a few key screens or flows, share them with the developer or stakeholders for feedback as you continue working on the rest. This may not work in every environment, like in fast-paced corporate settings, but when possible, it can save you a lot of headaches!
Psst!: This is just a high-level overview of what you need to grow your UX career. I’ll be sharing more tips, so stay tuned! 😉
And remember, don’t let anyone tell you you can’t succeed. Be unique in how you design your products!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=41cf95888d6a" width="1" height="1" alt=""><hr>
<a href="https://medium.com/design-bootcamp/ux-design-is-not-figma-41cf95888d6a">UX design is not Figma</a> was originally published in <a href="https://medium.com/design-bootcamp">Bootcamp</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX design is not Figma

So welcome to the second part of the Xmas Countdown App. If you are new here please check <a href="https://medium.com/@githumbi74/christmas-count-down-flutter-app-part-1-ec98080b618f">part1</a> first before proceeding so we flow together 😊
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wjR_F1-8iWGxGR9EvFlOKg.jpeg"></figure><h3>Adding CountDown Animation</h3>
so in this part I’ll discuss how we add the countdown animation to the countDownScreen.dart file.
The good thing about flutter is that it is open source and a lot of developers are currently taking a lot of coffee ☕ and coding all night to make your Flutter life waay much cooler by creating <a href="https://pub.dev/">Flutter Packages</a>. These packages enable developers to use less time to write their code in a clean format.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Hf9T_Yha54SUl3pgDwuQaA.png"></figure>Search for the count down package <a href="https://pub.dev/packages/slide_countdown_clock">here</a> and put the following line in the pubspec.yaml
<figure><img alt="" src="https://cdn-images-1.medium.com/max/608/1*4wvxRI61Qwx_AszpQ6r53w.png"></figure>Do the same in the countdown.dart by importing the package using
<pre>import 'package:slide_countdown_clock/slide_countdown_clock.dart';</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7Fij1IvGyhMyIrTbDsih6A.png"></figure>Following the online Documentation of the package on the README page, I simplified it to look like this
<pre>Widget build(BuildContext context) { return SlideCountdownClock( // duration: Duration(days: 1, minutes: 1000000), duration: Duration(seconds: 5), slideDirection: SlideDirection.Down, separator: "-", textStyle: kXmasCountDown, onDone: () { // _scaffoldKey.currentState.showSnackBar(SnackBar( // content: Text('Clock 1 finished'), // backgroundColor: Colors.green, // )); }, ); } }</pre>
Now we are able to create our own countdown specifying the number of hours, minutes and seconds before the countdown expires. The project is at Github so you may check the full file <a href="https://github.com/githumbi/Xmas-Countdown-Flutter/commit/7e69dbd5b7c17af44336bf0d8ed59dfc9f5b2a4c">here</a>.
Now we have our countdown look like this
<figure><img alt="" src="https://cdn-images-1.medium.com/max/720/1*olmTKjfFXKBLb4qF6c_msA.png"></figure><h3>Now What happens after the countdown?</h3>
Now on the last Screen 😜
So we want an image or text to come up after the countdown ends. So we need to add a function that enables some activities to happen after the countdown ends.
The good news is that the countdown package we included came with these functions that ease our work
<pre>Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; AnimationScreen())); },</pre>
With this code, we are able to move to the next screen called animationScreen.dart that enables us to move to the last screen.
Since Christmas is tomorrow, I won't do animation but just add an image and text in this file. It will look like this
<figure><img alt="" src="https://cdn-images-1.medium.com/max/720/1*Jw1J0ytg3MEyKaWOEIUs5A.png"></figure><h3>Now For Some Designing</h3>
Ya, I know, the design looks horrible from far and who the heck would wish to use such an app 😂?
So let’s start redesigning the welcome / splash screen,
I wanted a bit of animation so I added this SVG image instead of the image.
<pre>Image.asset( 'images/xmascat.gif', height: 200, ),</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/450/1*cChnngAlhHZPsGhpCphtYg.gif"><figcaption>ain’t much of a cat lover though 😅</figcaption></figure>Also, I added a Xmas-like font style using <a href="https://fonts.google.com/">Google Fonts</a>. Download a font you like and put it in a new folder(call it asset) and add it to the pubspec.yaml file
<pre>fonts: - family: courgette-Regular fonts: - asset: assets/Courgette-Regular.ttf</pre>
Now my Welcome Screen is a bit tidy. Do the same with the Countdown Screen.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/720/1*X8RFP5kooHjQaFAfKqposQ.png"></figure><h3>Cleaning up your code</h3>
It's a good habit to make your code DRY — less repetition
so I created constant.dart file where I put the main code that will be reused by other widgets. Also, arrange your files in folders to avoid confusion when your project becomes bulk.
<h3>Now Let’s Hot Reload, Sit back and Watch our work</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/600/1*JTYw-WFsFuQZbRNuA9SLUQ.gif"><figcaption>awesome!!</figcaption></figure>That’s all for now if you need to use this project, feel free to fork it at <a href="https://github.com/githumbi/Xmas-Countdown-Flutter">https://github.com/githumbi/Xmas-Countdown-Flutter</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9e7ea35c8a22" width="1" height="1" alt="">

Christmas Count Down Flutter App (Part 2)

So it’s a few days to Christmas and is in the middle of learning Flutter, so I decided to start a small project of creating a Countdown app to Christmas. (Still not a Pro yet 😊 )
<h3>First things First..</h3>
Before starting the project I decided to check <a href="https://dribbble.com/">Dribble</a> and have a look at some of the UI/UX designs. It’s a good habit of checking out other Senior designers work to have an idea of how your app will look like and be on track. This is one of the designs I liked.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tV7lR58zoq0hwO_xbySuNw.png"></figure><h3>1. Prototyping</h3>
So here are my sketches of how I want my app to look like(don’t mind the handwriting 😅), sketchy as they may be, they guide you to be on track.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KKCmp3SVmixcO8c3M4aFwg.jpeg"><figcaption>Sketches for the app</figcaption></figure>So the prototype has three Screens— The First one is a splash Screen screen, Second one will have an animated countdown and lastly will have the reminder itself. Simple right?
<h3>Let’s start Coding!!</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/220/1*B5nqs1Q1BRF1ZIJe_MA-8w.gif"></figure>Create a new flutter project using android studio by running Flutter create &lt;appname &gt; on terminal. I prefer using android studio due to its simplicity and lot of goodies. Visual Studio is another good editor if your machine can’t handle android studio, anyway it’s your choice 😁.
<h3>Create SplashScreen widget</h3>
Splash screen is the intro page to any app, it gives a bit of intro of what the app does.
1.1 Navigate to main.dart where you’ll create the Splash screen widget.
To make it Simple I’ll just include an SVG image and a text Widget to the splash screen page.
1.2 So let’s start by adding the image.
Unlike png, jpeg images, flutter does not allow adding SVG images directly so we’ll have to use a dependency from <a href="https://pub.dev/packages/flutter_svg">flutter_svg dependancy</a>,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/956/1*OeG6BM3NTNokewIbBiVODA.png"><figcaption>pubspec.yaml file</figcaption></figure>add it to the pubspec.yaml file and click packages get button to update the dependencies.
1.3 Add this line to import svg package to main.dart.
<pre>import 'package:flutter_svg/flutter_svg.dart';</pre>
1.4 Now let's start adding images and texts.
Download SVG image <a href="https://iconscout.com/icon/bell-1919210">here</a> and add it to your project by creating an image folder outside the lib folder. Just as we did with the svg package, update the pubspec.yaml file by adding the location of your images.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/698/1*6D2VXX2NdA4__iMdbt3s5A.png"><figcaption>pubspec.yaml file</figcaption></figure>1.5 add this to your main.dart file
<pre>import 'package:flutter/material.dart'; import 'splashScreen.dart'; void main() =&gt; runApp(XmasCountdown()); class XmasCountdown extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Xmas Countdown', home: Scaffold( body: SafeArea( child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: &lt;Widget&gt;[ SvgPicture.asset( 'images/bell.svg', height: 200, ), SizedBox( height: 20, ), Text( 'Xmas CountDown', textAlign: TextAlign.center, ), ], ), ), ) ), ); } }</pre>
1.6 Now run your app by clicking flutter run on the terminal and Boom! You just created your app with an image and text 😜
<figure><img alt="" src="https://cdn-images-1.medium.com/max/220/1*Mhq6Dqo25cgigAUSkoKLaQ.gif"></figure><h3>2. Separating splashscreen content from the main.dart file</h3>
Now on the serious stuff...
So dart is an OOP language and it’s a good habit to make your code readable and clean. So we gonna create a new file and name it splashScreen.dart in the same folder.
2.1 Remember I did say android studio has some goodies? To separate widgets classes from the main class, hover around the SafeArea widget and click Flutter outline option on the right side. Choose safe area widget, right-click and click Extract widget option and give a name (called mine SplashScreen). It’s that simple 😊
<figure><img alt="" src="https://cdn-images-1.medium.com/max/955/1*ldEdBMQnBoUzVv4XB7BLaA.png"><figcaption>main.dart file</figcaption></figure>2.2 Now this will create a new SplashScreen widget below the xmasCountdown widget. Copy it and paste it to the new splashscreen.dart file.
Here is the structure of how the code looks like afterward.
main.dart
<pre>import 'package:flutter/material.dart'; import 'splashScreen.dart'; void main() =&gt; runApp(XmasCountdown()); class XmasCountdown extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Xmas Countdown', home: Scaffold( body: SplashScreen(), ), ); } }</pre>
SplashScreen.dart
<pre>class SplashScreen extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: &lt;Widget&gt;[ SvgPicture.asset( 'images/bell.svg', height: 200, ), SizedBox( height: 20, ), Text( 'Xmas CountDown', style: xmasTextStyle, textAlign: TextAlign.center, ), }, ) ], ), ), ); } }</pre>
<h3>3. Setting up Routes</h3>
So routes enable you to move from one screen to another and according to our project, we want to move from the splashscreen to the countdown screen.
To move from one route to another we use the Navigator.push Widget which acts as a button and to get back to the previous route use Navigator.pop. For more detailed explanation head over to <a href="https://flutter.dev/docs/cookbook/navigation/navigation-basics">Flutter site</a>
Navigator.push
<pre>Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; CountDownScreen()));</pre>
Navigator.pop
<pre>Navigator.pop(context);</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/600/1*b693NvzswsfPx-hV-rO-ww.gif"></figure>That’s all for today and stay tuned for the next session (Part 2) whereby we’ll continue with the Countdown animation. You can check the project at <a href="https://github.com/githumbi/Xmas-Countdown-Flutter">https://github.com/githumbi/Xmas-Countdown-Flutter</a> and if you have any idea or suggestion do let me know 😊
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ec98080b618f" width="1" height="1" alt="">

My Projects

Articles

Start small, by volunteering

UX design is not Figma

Christmas Count Down Flutter App (Part 2)

Christmas Count Down Flutter App(Part 1)

Contact Me