The challenge is to understand users’ response to the current UI, discover pain points and propose a solution to improve their experiences.
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:
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.
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.
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.
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.
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.
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.
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).
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:
- Searching for inspirations: 7 out of 7 users found it in 5 seconds.
- Shopping: 7 out of 7 users were able to switch between product pictures.
- Looking for Pros: 6 out of 7 users were able to find it quickly.
- Selecting Pros: 7 out of 7 users were able to sort and select easily.
- 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:
- 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
Adobe Creative Cloud Application Experience