Hi, I'm Mokhachane💡

UI/UX
Designer

I help innovative companies build digital products that accelerate
growth. If you need a website/app that solves your customer's problem,
is easy and enjoyable to use and is inclusive, let's chat.


UI/UX Designer


WEB PLATFORM

Lenoma Legal

UXUI Design.. Web Development..Client

Empowering small business owners.
Through user-centered design I helped an early-stage legal-tech startup build a self-service web platform to provide affordable legal help to small businesses.

APP

City Time

UXUI Design..Concept

An easy to use web app that helps you figure out the time in different parts of the world by using city names or time zones.

WEB APP

Memory Page

UXUI Design.. Concept

Keep their memory alive forever.
A social app for creating 'Memory Pages' for sports public figures, heroes/icons/loved ones that have passed on, to keep their memory alive with short voice note stories, photos, videos and written posts.

WEB PLATFORM

Green Onyx Foundation

UXUI Design.. Web Development..Client

Changing perceptions about disability.
Using design to ensure that vulnerable populations living with disabilities are safe, supported and adequately cared for in work places


About Me

I believe that good design can have a direct impact on the core business of a company by making or saving it money.

As a UI/UX designer, my primary focus is helping businesses translate their goals into a functioning experience that meets their customer's needs. I enjoy figuring out how people use products, and how the products can be made easier and enjoyable to use.

I am 100% remote. I work from home in the Northern Cape province of South Africa.

Apart from designing I enjoy writing songs and playing guitar. Reading also relaxes me, my favourite book is Shantaram by Gregory David Roberts.

View my resume


APP

Memory Page

Role
UI/UX Design

Responsibilities
Wireframes, User Research, Visual design, Information Architecture, User flows, Interaction design, Prototype

My Father, Thabo Mofolo, passed when I was 9 years old and I don't really remember much about him.
But I treasure the few memories I have; like walking next to him to the store trying to keep up with his big strides - taking five steps for every one of his. Or when he bought me a bicycle and we took it for a ride, he walked with me as I clumsily cycled along next to him.

Years later I sat a dinner table and my aunt shared memories of him that I had never heard before, I enjoyed hearing about him from others and wondered what other endearing stories I would hear if I met more people that knew him well.

"Crowded spaces"

There isn’t a social media platform made just for people to share memories of loved ones/icons/sports heroes that have passed on. When a person shares a memory on FB/IG/Twitter, it gets lost in the sea of unrelated posts and invading ads.
We all loved Kobe, imagine logging on to Memory Page and visiting Kobe’s page where family are sharing never before seen Mamba photos, friends are retelling familiar stories from a different view and strangers get to admire their hero all over again. A place to keep their memory alive forever.


⤷ Kobe's memory page

Project Description

A social platform where friends, family and fans can create “Memory Pages” for sports public figures, heroes/icons/loved ones that have passed on, to keep their memory alive with short voice note stories, photos, videos and written posts.
Memory page creates one place for fans, friends and family to remember the person with posts generated not just by the owners of the accounts but by fans, friends or family. This allows people to share their feelings and make a connection by creating good memories together.


Understanding the user

I carried out some interviews so I could understand the emotions that people experience around sharing good memories of public figures, heroes, sports icons, celebrities or people they admire that have passed on, on social media.
I created 3 proto-personas and interviewed 4 people that closely matched them.

⤷ Carrying out user interviews with video call


⤷ Persona 1 of 3


My research identified the following insights:
"A social media platform with the correct privacy measures and ease of usability will make it easy for people to share good memories of people that have passed on that they admire, if they can decide who can or cannot interact with the post."

Findings

People value sharing memories on social media, but with loved ones they trustLack of privacy on social media results in people not sharing memoriesPeople only think of sharing memories when its triggered by something; conversations, clothes the person used to wear, or seeing people close to the personPeople aren’t interested in a “journaling-like” experience to keep memories because it takes too much time

Pain points

Privacy
Lack of privacy on social media platforms


Respect
Trolls and people that aren’t genuine or show respect on social media platforms

Starting the design

After creating a user profile, the next thing to do is find some memory pages to follow.
The app suggests pages to follow based on user interests or a user can type in a name and search if a memory page was created for the person.

One of the personas, Katlego Moloi, is a loyal basketball fan. He immediately types in Kobe Bryant's name and searchers if a memory page has been created for the "Mamba".


“As a Kobe Bryant fanatic, I want to follow his Memory Page to share my memories of him with others.”

⤷ Userflow sketches

⤷ Wireframes

Refining the design

If a Memory Page wasn't created for Kobe then, as a fan, Katlego could create one. 'Relation' tags appear on the Memory Page and let other users know whether the page was created by fan, friend or family.

If Katlego wants to create the page for a closed group of fans then he can choose to make it a private page, and users will need permission from the page admin to follow the page.
This addresses the main concern that came up in the interviews; "I want to make it for friends and family." and "What if people are insensitive and say negative things?!".
Making the page private lets you choose who can and cannot follow the memory page.

“As a Kobe Bryant fanatic, I want to follow his Memory Page to share my memories of him with others.”

⤷ Refined wireframes + Interaction design for creating a memory page


Style Guidelines


⤷ I turned some of the elements to components (some with variants) in Figma so I could re-use them and not have to re-create them over each time


1.Latest activity notificationsskipskip10.Search bar memory pages by name or hashtagskipskip
2.Share a memoryskipskip11.Inspiring words by or for the deceasedskipskip
3.Follower countskipskip12.Categories / Themesskipskip
4.Primary navigationskipskip13.Follow a memory pageskipskip
5.Name + date of birth and passingskipskip14.Create a memory pageskipskip
6.Creator of memory pageskipskip15.Filter posts by followers relationship to deceasedskipskip
7.Relationship of page creator with deceasedskipskip16.Recently created memory pagesskipskip
8.Recently created memory pagesskipskip17.Posts by page creator or page followersskipskip
9.Header photoskipskip    

Creating a memory page

If katlego wanted to create the page for a closed group of fans then he could choose to make it a private page, and users would need permission from the page admin to follow the page.
This addresses the main concern that came up in the interviews; "I want to make it for friends and family." and "What if people are insensitive and say negative things?!".
Making the page private lets you choose who can and cannot follow the memory page.




Sharing a memory

If katlego wanted to create the page for a closed group of fans then he could choose to make it a private page, and users would need permission from the page admin to follow the page.
This addresses the main concern that came up in the interviews; "I want to make it for friends and family." and "What if people are insensitive and say negative things?!".
Making the page private lets you choose who can and cannot follow the memory page.



Following a memory page

If katlego wanted to create the page for a closed group of fans then he could choose to make it a private page, and users would need permission from the page admin to follow the page.
This addresses the main concern that came up in the interviews; "I want to make it for friends and family." and "What if people are insensitive and say negative things?!".
Making the page private lets you choose who can and cannot follow the memory page.


Takeaways

Finding users to interview is not easy. Personas are so specific and working on a project without a budget to pay interviewees means asking friends, online in slack groups or on twitter and linked in and hoping someone who matches one of your personas will agree to help you.

Next steps

Add an icon on a memory page to show whether it's public or privateRun some usability tests


Let's collaborate!

If you want to chat about a project — email me on hello@mokhachanemofolo.africa


I can help design a new product, improving an existing part of your product experience or build a strong design system.


Currently based in the Northern Cape province, South Africa — available for remote-friendly work.


APP

Snapplify

Role
UI/UX Design

Responsibilities
Wireframes, User Research, Visual design, Information Architecture, User flows, Interaction design, Prototype

WEB PLATFORM

Lenoma Legal

Role
UI/UX Design + Development • Client

Responsibilities
Wireframes, Visual design, Information Architecture, Interaction design, UX Writing, UX Development

Lenoma Legal is a South African-based startup, born without any outside funding or capital injection, but with the ambition to become a pan-African startup in its own respect. With this goal, I focused on getting back to basics and connecting the customer's needs with the business' goals, applying all my user-centered design experience.

Defining the problem

Lenoma Legal offers affordable legal services to small businesses. Despite the company’s brand presence and social media clout, it was clear that it’s online presence didn't reflect it's true capabilities.

Their old website was an Ecwid online store "plug-and-play" template with non-strategic design and an unpleasant user experience. It was hard to navigate, visually imbalanced, cluttered and not aesthetic.

Design Approach

It was important to do an audit of the of the old website's user interface to see whether the design was fulfilling the business' goals and meeting the user's needs. I checked for aesthetic and minimalist design, help and documentation, and flexibility and efficiency of use.

🧭 no navigation links

navigational menus should always be visible otherwise user has no idea where to go

💫 distraction

the bright logo, the whatsapp button and the blue chat button - more options lead to harder decisions

🤐 too wordy

too much information for the user to digest

🔗 non - conversion links

give user options to leave without getting any service


👁️ too many visual signals

too much detail can be overwhelming and distracting; office buildings outside, ceiling lights, window frames

The audit showed me which parts of the design needed work. I could now sketch some wireframes and work on the information architecture.
The copy also needed a lot of work; simplifying the legal jargon and making the language easy to understand for users - I started scribbling some ideas and writing it on the refined wireframe sketches.

Nav bar → Logo, Text links & Button

Hero → Headline text, Description text, Buttons, Image

Social Proof → Media Outlet logos

Services → Icon, Text & Text link

Value statement → Text, Button

Social Proof → Testimonial modals: Text, Avatar

Refined wireframes → I added some detail to the wireframes and jotted some ideas for the copy and micro-copy

Information architecture → Site map

Legal jargon can be intimidating so I avoided it and simplified the language in the copy and microcopy to avoid usability issues and provide users with decision-making clarity.

Swopping formal words for normal ones
mfvddfvmdfv


Pairing visuals with words so they won't be misinterpreted


Legalese vs Plain English
mfvddfvmdfv


Final design + Lessons learned

The biggest challenge was not having budget for research; to get around this, after shipping we asked some users to visit the site and use it. The final product proved to be effective and in line with the founder's vision, and received positive feedback from users.

⤷ Home page (desktop)

⤷ Components

⤷ Icons

⤷ Home page (mobile)

Consultations (Book a video call with a lawyer) → I designed and developed a landing page for each service so that users aren't overloaded with information or distracted when choosing a service.

⤷ Buy legal documents

⤷ Pages for contact, to get your documents customized and reviewed, and an about page so users can see the startup team

Working with this startup gave me the opportunity to learn how design can impact the success of a business, in a direct and indirect way. The self-service system design on the home page allows clients to get help directly from the website - saving the business costs and time, easing the admin load.
With a modern-looking and easy-to-use website, clients have a great experience and this impacts the business positively.


Let's collaborate!

If you want to chat about a project — email me on hello@mokhachanemofolo.africa


I can help design a new product, improving an existing part of your product experience or build a strong design system.


Currently based in the Northern Cape province, South Africa — available for remote-friendly work.


APP

City Time

Role
UI/UX Design

Responsibilities
Wireframes, User Research, Visual design, Information Architecture, User flows, Interaction design, Prototype