UX Design Portfolio Workby

Simon Zoyisile Kubeka

SKILLSTASK FLOWS, USER

JOURNEYS, SCENARIOS

SITE MAPS, CONTENT INVENTORIES

SCREEN FLOWS, NAVIGATION MODELS

WIREFRAMES SKETCHES

RAPID PROTOTYPING, INTERACTIVE PROTOTYPES

FUNCTIONAL SPECIFICATIONS

USABILITY TESTING

HIGH-FIDELITY VISUAL DESIGN

HAND CODING HTML5, CSS3,

JAVASCRIPT,JAVA,XML etc.

GATHERING USER DATA, INTERVIEWS

I have a multidisciplinary skill set that integrates creative knowledge with technical and business expertise. I master the best and most current design tools in the industry alongside having a strong understanding of and ability to perceive human nature and human behaviour. I’m a critical thinker with an open mind, a communicator and a facilitator.

Design thinking is a philosophy that helps me to identify problems and jobs to be done furthermore it helps me solve those problems.

Design Thinking ProcessEMPATHY

DEFINE

IDIATE

PROTOTYPE

TEST

IMPLEMNENT

1 Empathy - Gain knowledge of users, context, technologies, gather user data, research competitive products, conduct interviews and field studies.

2 Define – Combine all my research and I observe where my users problems are. build user profiles on gathered data, produce materials that will aid the outlining of the project, site maps, content inventories, screen flows, navigation models, task flows, user journey scenarios.

3 Ideate – Generate a range of innovative ideas.

4 Prototype - Create design specifications and evolve concept/ wireframes, and prototypes into full design solution.

5 Test - Evaluate design with stakeholders to obtain feedback and conduct usability testing.

6 Implement - complete design and produce deliverables.

Jobs To Be Done FrameworkDEGINE

LOCATE

PREPARE

CONFIRM

EXECUTE

MONITOR

MODIFY

CONCLUDE

1 Define – Determine customers goals, and plan resources.

2 Locate – Gather information needed to do the job.

3 Prepare – Set up the environment to do the job.

4 Confirm – Give customers the information they need to confirm readiness

5 Execute – Carry out the job.

6 Monitor – Assess whether the job is being successfully executed.

7 Modify – Make alterations to improve execution.

8 Conclude – Finish the job or prepare to repeat it.

CASE STUDIES

There is quite a vast list of projects that I have worked on since I started my career. This is a selection of my best and most recent UX work that I have done. The projects are relevant for their industry and devices.

AFCKO WEBSITEDATE: 13 NOVEMBER 2016

PLATFORM: DESKTOP AND MOBILE

TASK

Build a website that curates current, credible, trustworthy, reliable content for users who want to take part in martial arts as a sport.

WHAT I DID

1.Setting goals and objectives

2.Stakeholder interviews

3.Establishing key audiences

4.Building personas

5.Creating scenarios

6.Creating site maps

7.Conducting competitive research

8.Low-fidelity prototypes

9.Creating wireframes

10.High-fidelity design & guidelines

11.Usability testing

SETTING GOALS AND OBJECTIVES• SITE URL: www.afcko.org.za

• SITE OWNER: African Full Contact Karate Organization (AFCKO)

WHAT IS THE WEBSITE ABOUT?

• Afcko.org.za is a sport content website showcasing what AFCKO is generally about, its services and what it offers its users.

WHAT ARE THE GOALS OF THE WEBSITE?

• The Goal of the website is to provide current, credible, trustworthy, reliable content, and provide resources for its users.

WHO ARE THE USERS OF THE SITE?

• Primary audience: Sponsors

• Secondary audience: Karate practitioners in South Africa

CONDUCTING INTERVIEWInterviews provide me with a qualitative method of gathering evidence, data and information about the project that I’m working on. At the heart of the qualitative research is the desire to expose the human part of a story.

ESTABLISHING KEY AUDIENCES

SPONSORS

EVENT MANAGERS

KARATE PRACTITIONERS

Interviewing the stakeholders has helped me identify the right audience for the product and characteristics of study participants. As with every product or service, the best offering comes from carefully identifying the target audience, their needs and their wants.

BUILDING PERSONASWHO ARE THEY? PAIN POINTS

• Decision makers › Finds it hard to find relevant content for this industry

• Age: 15 - 35+ › The content found is not always up to date

• Gender: Mixed › Finds it hard to get the contacts for the right people

• Family: Married, Children, Youth › Hard to distinguish the level of quality of the content presented

• Education: Strong media background, business orientated

HOW DO THEY FIND INFORMATION?

• On desktop/laptops - smartphones, information and data focused - email primary communication

• Forums for broadcasting trends - media groups on social networks such as Facebook

MAIN GOALS/WHAT DO THEY WANT? MOTIVATION

• To find the right level of information quickly › Find new suitable content

• Trending, impactful & cost efficient content › Discover new trends in the industry

› Access fresh & new content markets

BUILDING PERSONASAUDIENCE NEEDS

• What is your best content about?

• Who is the audience for that content?

• What are the trends in your industry?

• What can I buy – how much?

• Exhibitions – when, where, who?

• New content

• What is your distribution platform?

• Is this data up to date?

• How do you produce your content?

• How engaging is your content?

• Where can I find details about your events? Do you offer any additional services? – local office / contact details?

SOLUTION (CONTENT & FUNCTIONALITY)

• Interactive website design

• Accessibility, UX, UI – improvements Product search/filter

• News media section (Facebook)

• Contact details

• Email

• Content analysis

• Karate development programs

• Success Facts/Stats

CREATING SCENARIOS

The user navigates to afcko.org.za

The user check for

new events on the

website

The user scrolls down to read, learn more about AFCKO and

what it offers.

The user has a choice of selecting

Facebook as a Link to keep

up with latest news of the

NGO

The user is interested in the gym and wants to

know more about AFCKO, therefore he goes to the about us

page

The user will click on

gallery to view recent

photos taken on events.

The user has an option on going on the contact

page

If the user is interested in the

gym and wants to ask someone

about it, he can leave a message on the contacts

page

CASE STUDY PORTFOLIO 2017I use scenarios to describe the stories and context behind why a specific user or user group comes to the site. They note the goals and questions to be achieved and sometimes define the possibilities of how the user(s) can achieve them on the site.

USER JOURNEYS FOR DATA COLLECTION

A user wants to log on the site

Click on www.afcko.org.za

Once the user is on the site he/she has an option of going on different tabs and links on the site.

Success messaging

User wants to join a club near his/her geographical location

Click on contactTab on the main menu

Register with your personal details

Success messaging

User journeys are useful in demonstrating the way users could interact with the website, in this particular case I illustrated, hierarchically, the series of steps necessary for the user to take in order to collect different types of data.

CREATING SITEMAP

CASE STUDY PORTFOLIO 2017Once I’ve completed the personas and user journeys, I’ll create the sitemap. It visualises what I’ve have learnt about how users navigate the site, what sort of content they will need to support them in their goals and what sort of language they use to identify things.

COMPETITIVE PRODUCT RESEARCH

In order to be competitive, you need to know what’s out there and what has worked and has not worked. To connect the dots, you needs to be doing solid investigative market research, because it is essential for building a successful product.

LOW-FIDELITY PROTOTYPES

I use low-fidelity prototypes in order to have an early validation of the product saving time and making sure I’m not producing wasteful design work. I can easily and efficiently make changes while including users feedback based on their reactions.

CREATING WIREFRAMES

I build high fidelity wireframes and fully annotated diagrams, having a basis to begin creating screens; I also use them for user testing and as a reference point for functional specifications and communicating the functionality I am going to build with stakeholders.

HIGH-FIDELITY DETAILED DESIGN & GUIDELINES

Having a background in design I love getting my hands dirty and producing the final high quality visual designs as well as the guidelines and specification. I’m always up-to-date with the latest industry trends and I also have a passion for design innovation.

CONDUCTING USABILITY TESTS

PROJECT OUTCOME

ACHIEVEMENTS

• Healthy & steady traffic growth since launch

• Responsive design success revealed in low mobile traffic bounce rate

• Referrals, and social sharing validates content quality, trust and credibility.

• In page analytics and click tracking indicates successful navigation

Without credible UX success measurements, we all risk not being able to quantify our success. Without credible UX success measurements, we are unable to align our efforts to an organization’s business objectives and desired outcomes.

Date: October 2016Platform: Mobile

CHALLENGECreate a Court - Counter app that helps track scores between two teams within a basketball game.

• Setting goals and objectives• Stakeholder interviews • Establishing key audiences • Building personas • Creating scenarios • Conducting competitive research • Low-fidelity prototypes • Creating wireframes • High-fidelity design & guidelines

2nd Project: Court Counter App

SETTING GOALS AND OBJECTIVESAPP NAME: Court - Counter

APP OWNER: Mlab SA

WHAT IS THE APP ABOUT?

• Court - Counter app is an app that helps track scores between two teams within a basketball game.

WHAT ARE THE GOALS OF THE APP?

• The Goal of the app is to provide a tool for all basketball officials to use when counting scores for various teams competing against one another.

WHO ARE THE USERS OF THE SITE?

• Primary audience: Basketball officials.

• Secondary audience: Basketball fans.

A UX strategy includes the why, what, how, who, and when of the project, the details that will provide its structure and demonstrate its progress and evolution. First, I identify business goals; then I identify usability goals that allows me to develop the UX vision and strategy.

CONDUCTING INTERVIEWS

Conducting interviews is essential in gathering information, throughout the years I’ve learned that the better you get at this the more useful the information will be. Knowing how to structure your questions, how to listen and how to be grateful is the key.

ESTABLISHING KEY AUDIENCES

There are many different methods we can use to think about our audience segments, focusing on differences can help us prioritize and design the features that best meet the needs of each.

BUILDING PERSONASWHO ARE THEY?

• Average age: 11 - 43

• Gender: 60% male, 40% Female

• Marital: 23% married 71% single 5% Divorced

• Social Class: Upper Middle 42% Lower Middle 32% Skilled working 16% Working Class 9%

• Ethnicity: All ethnic groups

HOW DO THEY FIND INFORMATION? MAIN GOALS/WHAT DO THEY WANT?

• On Smartphones › To be able to “catch” the moment

Sport websites ›To be the first to know about the latest results

• Social networks such as Facebook, Tweeter etc.

PAIN POINTS MOTIVATION

• Finds it hard to get share results with friends › Provide new quality upgrades to the app

• Hard to distinguish the level of quality of the content presented

CREATING SCENARIOS

I use scenarios as a description of a persona using a product to achieve a goal, they describe an instance of use, in context. Scenarios are usually narratives that tell a story describing one or more tasks in a specific environmental situation.

COMPETITIVE PRODUCT RESEARCH

I conduct user experience competitive analysis to assess the strengths and weaknesses of the product. Effective product design involves an understanding of context, including the services or features, techniques and standards of others in the market space.

CREATING WIREFRAMES

Wire framing is all about corralling ideas into a cohesive flow of pages with a clear, well-executed focus it creates clarity of purpose, a streamlined set of features, and a focused, compelling way to communicate with user

HIGH-FIDELITY DETAILED DESIGN

As a UX / UI designer I’m typically responsible for creating a cohesive style guide and ensuring that a consistent design language is applied across the product. Also maintaining consistency in visual elements and producing high-quality visual designs from concept to execution.

Date: December 2016Platform: Mobile

CHALLENGEReport Card App is a mobile app which stores university Report Card app using mySQLite database and storing data on firebase

• Setting goals and objectives• Stakeholder interviews • Establishing key audiences • Building personas • Creating scenarios • Conducting competitive research • Low-fidelity prototypes • Creating wireframes • High-fidelity design & guidelines

3rd Project: Report Card Mobile App

SETTING GOALS AND OBJECTIVESWHAT IS THE MOBILE APP ABOUT?

• Report Card is a mobile app which stores university students results on a database which makes it easier for students to view their results on their smart phones.

• Report Card app uses mySQLite database and stores data on firebase

WHAT ARE THE GOALS OF THE App?

• The Goal of the app is to provide up-to-date, specific, well structured reliable content. Current and relevant content.

WHO ARE THE USERS OF THE APP?

• Primary audience: University Students.

• Secondary audience: University stuff members.

CONDUCTING INTERVIEWS

Conducting interviews is essential in gathering information, throughout the years I’ve learned that the better you get at this the more useful the information will be. Knowing how to structure your questions, how to listen and how to be grateful is the key.

ESTABLISHING KEY AUDIENCES

There are many different methods we can use to think about our audience segments, focusing on differences can help us prioritize and design the features that best meet the needs of each.

BUILDING PERSONASWHO ARE THEY?

• Average age: 18 - 58

• Gender: Male, Female

• Social Class: Middle Class (University Academics)

• Ethnicity: All ethnic groups

HOW DO THEY FIND INFORMATION? MAIN GOALS/WHAT DO THEY WANT?

• On Smartphones › To be able to “catch” the moment

• Social networks such as Facebook, Tweeter etc. ›To be the first to know about the latest results

PAIN POINTS MOTIVATION

• Finds it hard to get share results with friends › Provide new quality upgrades to the app

• Hard to distinguish the level of quality of the content presented

CREATING SCENARIOS

I use scenarios as a description of a persona using a product to achieve a goal, they describe an instance of use, in context. Scenarios are usually narratives that tell a story describing one or more tasks in a specific environmental situation.

COMPETITIVE PRODUCT RESEARCH

I conduct user experience competitive analysis to assess the strengths and weaknesses of the product. Effective product design involves an understanding of context, including the services or features, techniques and standards of others in the market space.

CREATING WIREFRAMES

Wire framing is all about corralling ideas into a cohesive flow of pages with a clear, well-executed focus it creates clarity of purpose, a streamlined set of features, and a focused, compelling way to communicate with user.

HIGH-FIDELITY DETAILED DESIGN

As a UX / UI designer I’m typically responsible for creating a cohesive style guide and ensuring that a consistent design language is applied across the product. Also maintaining consistency in visual elements and producing high-quality visual designs from concept to execution.

For information please contact me on: Mobile: +27787934264Email: kubekasimon@gmail.com www.linkedin.com/zoyisilekubeka

THANK YOU VERY MUCH