UX Process

Challenge

The challenge is to understand users’ response to the current UI, discover pain points and propose a solution to improve their experiences.

Process

I start the process with guerrilla usability testing to understand current problems. During the following phases, I use affinity mapping to determine priorities, create task flows, and prototypes to validate the redesign. Now let’s go deeper into each step:

RESEARCH

Guerrilla Usability Testing

To uncover pain points while using the the UI, I conduct guerrilla usability tests directly with the targeted user group. I give each user three scenario based tasks to complete within the UI.

SYNTHESIZE

Affinity Map

I synthesize my findings under 3 categories based on the main functions of the UI (Generic examples below for your viewing pleasure): Get inspired, Shop products, and Find pros. The findings from my research were then organized on an affinity map to better understand their relationship to each other and to determine priorities moving forward.

 

Base on the study, here are the 5 problems I decided to focus on:

• Difficult to find inspiration photos. Confusions about “ideabook”.
• Difficult to see more product pictures when shopping.
• Difficult to find home professionals.
• Challenge to sort and select home professionals.
• Difficult to get quotes from home professionals.

IDEATE

Task Flow

I create task flows for the steps a user typically goes through in order to complete two common tasks in the UI:

• User wants to decorate a room
• User wants to find a Pro

To better understand where in the process users were having trouble, I highlighted the areas in purple where most users struggled, where I want to focus most during the redesign.

 

Lo-Fi Sketches

Based on the established pain points, I sketched multiple options to test and see how by initiating minimal changes to optimize the user experience. During the process of redesign, I continued referring to the target audience, company mission, revenue model and my goal to focus on how to improve the user experience rather than making design changes. After a few rounds of iterations I came to a good place with the solutions.

 

PROTOTYPE

Hi-Fi Prototype

Moving forward with the process, I turned my Lo-Fi sketches into Hi-Fi prototypes. Below are the screen comparison showing before and after side by side.

 

Animated Prototype

To demonstrate the proposed flow when users arelooking for home pros, I generated an animated prototype showing activities of browsing, selecting, and contacting pros for pricing. The new design allows users to sort pros by customer rating, and request quotes in the UI from multiple businesses.

Clickable Prototype

A clickable prototype was created to test my ideas and validate the redesign. It was extremely helpful to test users on the tasks that I focused on to gain realistic insights, also understand what worked well and what requires further improvement. The prototype only covers the aspects of tasks that I planned to test users on.

Here is an example of a clickable prototype I made in Adobe XD in the mobile app above (click on each screen to proceed to the next screen).

 

VALIDATE

Conclusion

After eight weeks of user research, analysis and redesign, I was able to validate the assumptions and changes I had made. I did this by testing my clickable prototype with seven new users. The results are:​

1. Searching for inspirations: 7 out of 7 users found it in 5 seconds.
2. Shopping: 7 out of 7 users were able to switch between product pictures.
3. Looking for Pros: 6 out of 7 users were able to find it quickly.
4. Selecting Pros: 7 out of 7 users were able to sort and select easily.
5. Looking for Pros: 6 out of 7 users clicked “Request a Quote” and found it helpful.​

Notes: For future studies, I would like to spend more time collecting data on how often users call and how often users email when looking for home professionals. Also, how is this received from the business side.

 

UX Section End.

_______________________________________________________________________________________________________________________________________________________________________________

UI 12 Step Approach:

Creative Brief: User Interface Design and for Web and Mobile is a creative, technical and people process.

Defining the Brand and the Audience: Define the current brand perception, market positioning, awareness. Understanding what the users care about.

User Environment: How will the users access the digital content: web, mobile, tablet, wearable

Segmenting: Creating user personas: Gender, Age, Occupation, Role, Expectation and Goals of these users.

Navigation: What are 5 screens or content areas the user can navigate between.

Content Audit and Utility: Updating Current Content? Content Priority Hierarchies - Top 3. Stock Photography, Icons. Defining the utility of each screen.

Flow: Creating wireframes, interaction patterns, click behaviors

UI Prototyping: Create 3 UI designs for early feedback: Art of the Possible, Classic, Safe

508/JAWS: Incorporating accessibility principles

User Feedback: Testing and use case test scenerios

Relevancy: Optimizing for social media and SEO

Testing and Launch: Release Candidate Done. Soft Launching with 5-10 Beta Users to find any 'launch blocker bugs'

Launch and OutReach Strategy: Site Replacement Live Time, Launch Announcement, Social Media, MailChimp/Constant Contact Email, Marketing, SEO

UI UX Methodologies:

I design websites with usability and user experience in mind. Sometimes if I find that there is a UX defect after a digital product is launched - then I will do usability surveys and Use Case test scenerios to determine the defect and correct it quickly. Here is some of my UX and Usability methodology and process:

- I subscribe to the User Experience Principles of the GodFather of Usability, Jakob Nielson

- Studied UX techniques from UX pros at Lynda.com

- Conducted many user use-case test scenerios with users using observation and surveys

- Created web usage surveys based for users to fill out after using the web product

- Compile usage data that reveals flaws in design or user experience that is stopping a user from being successful on a certain page

- Act on that data through implementing navigation, flow, content, positioning changes etc.

- Keep up with the Nielson Group's Usability findings and articles here:
http://www.nngroup.com/articles/

- Used Usability tools like UserTesting.com, Inspectlet.com and Google Analytics to gather actual user click behavior and videos of web and mobile products to see where users get stuck

- Examples of UX Test Scenerio Surveys Created and Used in User Testing:


1. Pre-Testing Widget Defined Functionality for the User:




2. User Usability Survey

3. Style Guide

UI Skills

Adobe Creative Cloud Application Experience

Clients:

Lifelong Learning Philosophy:

I am quick to be honest and say 'I don't know' when I dont know how to do something, but I am quick to learn it once I have the need for the client.

Statistics show that 80% of americans that get an undergraduate degree - never use what they learned in school - once they enter the workplace.

I have an undergraduate degree in marketing and a masters degree in 3D Animation and Visual information technology.
I am blessed to do and use what I learned in school everyday. I combine my classical training in both marketing and digital art to both understand
my audience and visually develop a message that connects with them as the target audience.

Good design never changes, but the platforms on which good design is delivered on, changes constantly with the speed of disruptive technology.
Web, 3D and Mobile Development technologies change every year with new platforms that are constantly updated with new features.

I have always enjoyed continual learning. I could have stopped 12 years ago with what I learned in school. If I had -
I would be a dinasour today - extinct in competency/relevancey to today's every changing IT world. Instead, the release of
new technologies excites me and I love to continually learn new methods to deliver multimedia in new and innovative ways.

Since I earned my Masters Degree, I use several sources to continually learn within the new developments of my trade:

- I learn from other professionals and co-workers in my field that I network with
- I learn from Lynda.com - the #1 video continual learning digital e-learning marketplace
- I learn from online webinars, forums, tutorials and e-books from vendors such as: CGsociety, Adobe.com, Adobe tv, Creative cow and my Amazon kindle app on my iPad
- I surf sites like mashable.com, thefwa.com, engadget and 148apps to stay on top of trends in social media, design, 3D, mobile and tech.
- I stay on top of new product releases at industry tradeshows such as Siggraph and Adobe Design Conferences.

I also subscribe to 3D World Magazine, Web Designer Magazine and Advertising Age magazine to stay on stop of those 3 industries.

The bottom line is if you need it and I don't know it - I will learn it, if it is in the domain of Design and Multimedia.

Creative Philosophy

A lot of people just talk. I listen. One of the most important things I can do at the start of the creative process is listen and study my client's mission, brand identity, marketing
goals and technical objectives.

Next I try to understand what is the utility(what activity is most trying to be accomplished successfully) of the website or mobile app that the client wants to build and what the call of action is on the website (what does the user need to do for the site to be a success).

I look at the website’s audience first and design around them. I like to sit down and talk to the actual users that are going to use the website. I design with user usability and
utility in mind. I like to build signup and inter-site help systems that help the user achieve the utility within the website. I design with artistic principles of color theory, consistency,
balance, white space, contrast, clean design (less is more as far as colors, fonts and content). I believe in adding branding concepts to a website if it’s relevant to an audience (logos and taglines).
I have an anal eye for consistency throughout a site - I can tell if even one HTML table is not right, something isn’t centered or there is a pixel off in a graphic. I believe in quick and snappy performance
for a website and multi-browser testing.

I like to treat the inside of a website with as much importance as the home page. I believe in collaboration as I design (and not secrecy) and I also know the balance in being creative
but still delivering exactly what the client wants (and staying within technical requirements and server performance standards). I love designing navigation systems that streamline
the user flow and add an intelligent hierarchy to the data. I know how to get the best creative out of the Adobe and Autodesk graphics suites and mix their outputs all together.
I value the programmers/managers/leads input as much as the user. I work closely with programmers every step of the way to ensure tight intergration with their code and my graphical
layouts.

What jazzes me about Web Design. Mobile Design and 3D Modelring is to try to always create something new that has not been done before while still staying within the requirements of the project.

I also love taking something that is boring, long and hard to use (like a technical document) and making it into a creative, fun easy and fast multimedia interface.

I have extensive experience presenting to, collaborating with & maintaining clients as well. in the end my goal is to always deliver excellence on time and on budget. Work that I have done has helped
to win future work for my employers. I am proud of that but never take anything for granted or feel that I have arrived.

Back to Top