UX/UI Design Portfolio

1. Hello I’m
Zainab Kashim
Thanks for viewing my portfolio
!

2. I’m a passion-driven UX/UI Designer based in Nigeria.
I specialise in researching user needs and designing
user-friendly digital experiences for startups. I use a
mix of research and design methods to improve the UX
and usability of web and mobile products. I love
working with founders and small teams to turn their
vision into a tangible product MVP.
Featured clients

3. Projects
1. Motorfixr
2. Autohub
3. A Storytime
4. Riby Dashboard
5. Sky Travels
6. Quizzly

4. 1. MotorFixr
UX UI IOS
MotorFixr is an app for buying auto
parts and connecting with
nearby mechanics.
The Problem
The MotorFixr team noticed that
finding reliable mechanics and
verified auto parts for their cars was a
difficult task in Nigeria. People had to
rely heavily on word of mouth which
limited the options available to them.
ANDROID
The Solution
We created a simple, cross platform
app that allows users to buy verified
spare parts and connect with certified
mechanics nearby.

5. My Role
I was responsible for creating this project from scratch. I carried out tasks such as: user research,
creating user flows, wireframing, branding & logo design, prototyping, user testing & developer
collaboration.
The Process
Step 1: Project Kick-off
We kicked off the project with
Stakeholder Interviews. I used the “5 Ws
and H” framework to align everyone
around a single goal and make sure the
team starts off on the same page.
The main challenge I faced was not
having the budget for thorough user study
so I carried out quick interviews with
people around me that had cars and will
be interested in the app. Then I created an
Empathy maps to help us visualise how
and in what context users are likely to
interact with the product.
Step 2: Empathy Map
MotorFixr App - 5 Ws and H’ framework
MotorFixr App - Empathy Map
Project: MotorFixr

6. Step 3: User Scenario & Requirements
Next step is to envision user scenario
and anticipate the problems users
might come across. Writing user
scenarios is a very powerful way to
transition from understanding the user
to envisioning the solution. It also helps
in coming up with the UX requirements
of the app.
Next I start sketching out ideas for the
interface. I started with writing down the
flow for the ‘searching mechanic nearby
and searching auto parts since these are
the core functionality of the app. From
there I sketched out different ideas for the
UI and the information architecture
emerged as a result.
Step 4: Sketching, User flows, Navigation
MotorFixr App - Sketches
MotorFixr App - Context Scenario & Requirements
Project: MotorFixr

7. Once the functionality and user flows are
finalised, I start working on the visual UI design.
I came up with a couple of designs for the
branding, logo and UI. We decided to go for a
clean and minimal design that looks
attractive and trustworthy to the user.
Step 6: Visual Design
Project: MotorFixr
Step 5: Wireframes
Once the key screens were sketched out, I
started finalising the interaction design in
wireframes. Starting with wireframes allows
me to focus on the functionality and user flow
of the app.
MotorFixr App - Wireframes
MotorFixr App - On-boarding Screens
Created with
Project Status:
In development Phase

8. Screens from MotorFixr App Project: MotorFixr

9. 2. Autohub
Autohub is a car dealer website
template where users can search for
cars and contact the dealership to
schedule a test drive
Context
Zeroqode is an agency that creates and
sells website templates for the bubble.io
platform. I worked for them as a UI
designer for some of their website
templates Autohub was an outdated
template that needed a complete
redesign within a short timeline.
UI
My Role
I was responsible for creating a fresh
visual design and style guides for the the
website using existing sitemaps.

10. The Process
Step 1: Sketching & Wireframes
This project is a redesign of an existing website so the first step I took was to look at the structure
of the existing website and come up with an improved structure for the existing content.
Project: Autohub

11. Step 2: Visual Design & Style guides
This project is a redesign of an existing website so the first step I took was to look at the structure
of the existing website and come up with an improved wireframe for the new design
Project: Autohub

12. Project: AutohubFinal Designs
Created with

13. 3. A Storytime
UX UI IOS ANDROID
A Storytime connects children with
their loved ones through their voices
and stories.
The Problem
A storytime team wanted improve
UX, UI and branding of the existing
app because the current app had a
complicated user flow and the UI
did not suit to the ideal audience.
The Solution
We designed an intuitive and easy to
use, customer-facing interface. We
wanted to clean up the previous UI and
bring the most important features to the
surface. We also developed a refined
logo, branding assets such as a custom
iconography and illustration set.

14. My Role
I was responsible for the Branding, UX and UI design of the app. I also worked remotely with the
developer to ensure that that the designs were properly implemented.
The Process
Step 1: Project Kick-off
We kicked off the project with meetings with the
stakeholders to talk about the current app and
gather all the requirements for the redesign.
The team had carried out some user tests with
the first version of the app, we used that data to
make key decision for this new version.
One of the main issues with the first version is
that users were struggling with the flow of the
app. By focusing on the three most popular use
cases, we had a sense of priority and we were
able to make sure the functionality that they
need was at the forefront of the application.
Step 2: Library User Flow & Navigation
A Storytime Product Requirements
A Storytime App- User Flow
Project: A Storytime

15. We designed a whole identity for A Storytime
app. We developed a refined logo, branding
assets such as a custom iconography and
illustration set.
Step 4: Branding
Step 3: Wireframes
I started finalising the interaction design in
wireframes.
A Storytime App - Wireframes
A Storytime App - Logo & UI Design
Once branding and logo design was finalised,
I start working on the visual UI design. My
overall design approach was to create an
app that was warm and friendly but not too
childish because our primary users were the
parents who record stories for their children.
So the branding and UI need to appeal to the
parents first, then the children.
Step 5: UI Visual Design
Project: A Storytime
Created with

16. Screens from A Storytime App Project: A Storytime

17. 4. Riby Dashboard
UX UI
Riby is a financial institution in
Nigeria managing National
programmes such as EfinA and the
legacy BoI programmes.
The Problem
I took over the project of redesigning
the Riby Dashboard because the
analytics team did not have a
centralised system to track the
progress of the various programmes.
The Solution
I designed a simple interface that
presented data in a visual and
interactive format which made it more
accessible for the analytics team.

18. My Role
I was responsible for UX and UI design of the dashboard. I gathered all the important data from
the business team in terms of the information that they wanted to be showcased and in order of
importance.
Project: Riby Dashboard
Step 1: Project Kick-off & Requirement Gathering
We kicked off the project with meetings with the stakeholders
to talk about the current system and gather all the
requirements for the design. Spoke to key stakeholders in the
analytics team to understand the kind of information that
would be crucial to include in the dashboard.
Riby Dashboard Requirements Excel Sheets analysts use

19. Project: Riby Dashboard
This block contains a summary of
important data across all projects
For a more in-depth analysis, the
user can access the various
projects through this navigation
Step 2: Wireframes
I started by finalising the interaction design in wireframes.

20. Project: Riby Dashboard
Step 3: Visual Design

21. 5. Sky Travels
UI
Sky Travel is a website template
where users can search and book for
flights, hotel and cars.
Context
Zeroqode is an agency that creates and
sells website templates for the bubble.io
platform. I worked for them as a UI
designer for some of their website
templates Sky Travel was an outdated
template that needed a complete
redesign within a short timeline.
My Role
I was responsible for creating a fresh
visual design and style guides for the the
website using existing sitemaps.

22. The Process
Step 1: Sketching & Wireframes
This project is a redesign of an existing website so the first step I took was to look at the structure
of the existing website and come up with an improved structure for the existing content.
Project: Sky Travels

23. Step 2: Visual Design & Style guides
This project is a redesign of an existing website so the first step I took was to look at the structure
of the existing website and come up with an improved wireframe for the new design
Project: Sky Travels

24. Final Designs Project: Sky Travels

25. Final Designs Project: Sky Travels
Created with

26. 6. Quizzly
UX UI
Quizzly is an app for taking quizzes
The Problem
I was approached my a group of
developed who built a product but
knew that the experience of the
product was lacking and wanted to
work with me fix these issues
The Solution
We decided to go for a simple minimal
looking app that presented questions
one at a time. We wanted the focus of
the app to be about the quiz first and
to make sure we did not include
anything that will be too distracting to
the user.

27. The Process
Step 1: Sketching & Wireframes
We had a couple of meetings with the developers to see how we can implement a new design
without making too many drastic changes to what they have already. We decided that we
wanted the user to focus on one question at a time.
Project: Quizzly
HEADER
Block Body

28. The Process
Step 2: UI and Visual Design
Project: Quizzly

29. The Process
Step 2: UI and Visual Design
Project: Quizzly

30. Thanks for viewing my portfolio
zainabkashim.com
@zainabkashim