USER EXPERIENCE, INTERACTION AND INTERFACE DESIGN
BUILDER SERVICES PORTAL
My contract with San Diego Gas & Electric came through Logic 20/20 with whom I'd worked previously on Microsoft. I was brought in a little bit late to the project, as the previous UX designer was having some personality conflicts with the client. With this knowledge, I felt it was important to immediately build a good relationship of trust and understanding with SDGE and the Logic20/20 team so I could complete the requirements in a shorter time than originally estimated.
What were the key asks/problems?
-
Redesign the pre-application process in the Builder Services Portal to make users more likely to upload required documents earlier in the process to save time and delay in tracking them down later.
-
Update the application to make it simpler for the user. There were too many unnecessary fields that didn't apply to every application. Add solar and EV types to the existing job setup.
-
Design additional enhancements to job detail, project summary and inspection details.
What did I do?
-
Met with project managers at SDGE to discover the bottlenecks in the application process. Determined that lack of required document upload slowed down approvals and initiation of projects.
-
Conceptualized and designed a 'tip' module to help walk the user through the pre-application steps. The module alerts users to documents required in the last step of the application process.
-
Reworked the UX of the application to reduce the amount of steps based on selections in each section of the application, which hadn't previously existed. Designed headers in the steps to track their progress in the application. Added solar panel and electronic vehicle installation types to the options.
-
Responsive design was key as large percentage of builders use the portal on a mobile device.
-
Regularly met with SDGE & Logic20/20 teams to share designs, discuss edits, plan with developers and review with QA team as it was being tested.
In addition to these UX modifications to the application, I designed some UI enhancements to other parts of the portal in the job details, inspection details and summary sections. Phase 4 updates to the project were completed on time and under budget. And I made some great friends at SDGE and Logic 20/20 in the process.
I was hired by 10pearls to work on the UX redesign of this retail website for Anne McGilvray. The product strategist provided me with direction to update and improve the shopping experience by making the process much more personal with the use of improved APIs and technology in their ordering system.
After a handful of interviews I created a persona to develop a wireframe of an improved shopping experience. Once those were perfect, I designed the UI in high fidelity including the mobile app experience and fresh design system.
VIDEO GAME DEVELOPER TRAINING PORTAL UX/UI DESIGN
As UX consultant for Logic 20/20, I was hired to improve the user experience of the privacy information and game developer training portal. As a mom of an avid gamer, I am personally concerned about privacy, and pleased that the game developer takes it very seriously with the studios that design games.
What were the key asks/problems?
-
Analytics showed sessions much lower and shorter than similar portals.
-
Even frequent visitors reported that they could not find content they required.
-
Stakeholders wanted new content to be seen from the hub home page.
-
New users did not know where to start.
What did I do?
-
I first interviewed the stakeholders at portal owner for their take on what they hoped to get from my research and recommendations on the site.
-
I also met with consultants who worked with these stakeholders for additional direction and background for the project.
-
I interviewed several users to understand how and why they use the site, what did and didn't work in the experience, and features they wished to see.
-
From these meetings I developed the most likely personas to use the portal. first-time user, frequent visitor and specific business teams looking for privacy resources. Now my challenge? How to make this site easy for both to find what they need!
Research and info gathering is a key part to success at the next step, wire framing the design and setting up the site map for optimal UX.
-
I set up a preliminary wireframe and sitemap to review with the stakeholders as well as the consultants at Logic 20/20.
-
I designed comps of the hub home and second level pages to 'bring my vision to life'.
-
After the initial reviews, I realized I needed to inventory the current site in order for the team to be able to determine what 'net new' pages there would be as well as which pages would need editing to bring the best content forward in the UX.
-
I modified my wireframes and site map to clearly show recommendations and task flow for all personas.
And, thanks for my deep background in visual design, I was also able to create the graphics for the new site, as well as consult on modification of the templates in the CMS to reflect the approved UX. I also provided templates for future content, which is an important goal for the team in the next fiscal year.
In this role I design, produce, and curate assets for Microsoft’s new products: Create & Designer. Additionally, I manage and monitor template UX on Microsoft Create. Attention to detail is paramount in this project. Template assets must be easily editable by the non-designer, care taken to localization, accessibility, and consistency for global rollout.
This is a preview of Microsoft Designer. I work on illustrations, icons, stickers, decorations, backgrounds and all styles of photography to be used in a wide variety of pre-set templates or available for import into a personal design.
AIRA
More often than not, when I'm hired to design a website,
I'm also responsible for the UX research and design as well.
See a case study for one such website here.
RESPECT NETWORK
At Respect Network I developed the mobile UI for Respect Messenger, Respect Elect and Queue.
MEDICITY
As Creative Director at Medicity I was responsible for UX research, flow creation and A/B testing, as well as UI and IxD for our applications and platforms ProAccess, MediPrise and iNexx.
CASE STUDY: LISTEN & LEARN
RESEARCH
The Challenge: Design a new language learning app.
Outcome: A mobile app that allows users to learn a new language with an A/V or audio only option for those who want to learn 'hands free' and serve as a resource to engage with native speakers.
Role: Lead UX Designer (research, interaction design, visual design)
During the research phase, I sought to understand the trends that set the standard in language learning, flashcard and quiz tools. I also needed to uncover the needs and frustrations of the target user to better understand how to appeal to them.
Research Goals
-
Define the basic requirements when learning a language.
-
Learn about current applications on the market.
-
Understand why users download a language learning app.
-
Define common behaviors of language learners.
-
Determine users’ needs and frustrations when learning a new language
-
Understand how users interact with learning apps.
-
Identify areas of language learning that could be improved.
Competitive Analysis
A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitor language learning apps.
Competitive analysis reached the following findings:
-
Flashcards are one of the classic ways to learn vocabulary. With the variety of apps available on mobile devices, the flashcard concept has been elevated to the next level.
-
Whether learning a new language, or words in your native language, hearing pronunciation of the new word is crucial.
-
The use of sound in learning apps can take the place of human teachers in a classroom and allow someone to learn what they want to know on their own schedule and location.
-
Learning on your own time can be improved by making the experience engaging and social.
-
Visual experience, animation, sharing, winning and interacting are all helpful in keeping the student interested and using the app.
User Interviews:
To better understand the perspective of the target user, I interviewed three people. I focused my questions on what they were doing, thinking and feeling about their experience learning a language through a mobile app. I asked direct questions to gain insight on my research goals.
After completing the interviews I wrote down all of the responses on sticky notes and began to cluster them based on topic.
Key Findings:
I thought my user should be able to learn in either flashcard or audio mode, and customize the time length of each exercise. I also thought the user could take quizzes, receive rewards, and share their progress with their social network.
When the user had the opportunity to practice their new language, I devised a feature in the app called 'Break the Ice' to easily start up conversations with native speakers.
PROTO-PERSONA
Next I created a proto-persona with the key goals and needs of the real users I interviewed, and attempted to capture the most successful task flow.
Problem Statement:
Thom needs a way to learn Spanish primarily by listening and repetition in short intervals because his learning time is limited and proper pronunciation is very important to him.
Hypothesis Statement:
I believe that by creating an app that contains short lessons with an audio component, Thom will be able to find the time and motivation to learn Spanish on his daily commute.
Task 1
“As a busy professional, I want to be able to learn Spanish in small bites so that I will be able to make progress while still fitting in learning time.”
Task: Complete a Short Lesson
Entry Point: Launch App
Success Criteria: 15 Words Learned
Task 2
“As a commuter who drives, I want to be able to listen to Spanish words so that I can continue to learn while watching the road.”
Task: Verbal Vocabulary Review
Entry Point: Launch App
Success Criteria: 15 Words Exercised
Task 3
“I have a great desire to communicate with my extended family in Spanish, though I hesitate to do so until I am more fluent.”
Task: Conversational Skills
Entry Point: Launch App
Success Criteria: 10 Phrases Learned
With the persona and flow as a guide, I rough sketched wireframes of each task to come up with screen designs the user would interact with the app to achieve the planned tasks. Tap to navigate the tasks through the low fidelity wireframe in Prott.
USABILITY TESTING
-
Direct Task: Select a language to learn.
Scenario: You have just downloaded the app ‘Listen & Learn’ and wish to select a language to learn.
-
Direct Task: Select a lesson in flashcard mode.
Scenario: You are sitting on the train in your morning commute and would like to complete a lesson with flashcards.
-
Direct Task: Take a lesson quiz.
Scenario: You’ve just finished a lesson and want to know how well you remember the words you’ve learned.
-
Direct Task: Share award on social media.
Scenario: You did so well on your quiz that you got an award! Share your success on social media.
-
Direct Task: Select a lesson in audio only mode.
Scenario: You are taking a walk with your phone and headphones and want to listen to a lesson.
-
Direct Task: Select a category in ‘Break the Ice.’
Scenario: You are traveling in a place where the language you are studying is being spoken. You wish to start a conversation with someone and need a place to begin.
Next up, I conducted usability testing with the rough wireframes. I gave my test subjects a series of direct tasks to complete. I observed errors and noted comments or suggestions made as they interacted with the wireframes. Analyzing the results, I assigned each error or issue a severity rating 0-4 and came up with recommended revisions to the design.
The test subjects were able to complete the scenarios quite easily, with mostly minor errors. The most severe issue being the location of the language selection. One of my test subjects had no desire to share progress on social media, suggesting that feature be a custom setting. Another thought 'Break the Ice' needed a 'start conversation' link. Feedback on the icon design was also offered.
Recommendations:
-
Take the user to settings immediately after onboarding.
-
Consider various icon styles for the flashcards.
-
Conduct further testing on the name 'break the ice'.
-
Add audio controls.
MID-FIDELITY WIREFRAMES
Implementing the recommendations from usability testing, I created mid-fidelity wireframes with Adobe XD and set up links to test the app functionality without being too concerned with styling. Tap the screenshot to test it for yourself.
A second round of usability testing revealed several improvements that could be made to the lesson task flow, eliminating two taps when making the choice between flashcards or audio only. One of my test subjects also proposed additions to the search feature to make it more useful.
-
User 1: It’s not obvious that language selection is under settings.
User 2: Liked the ability to set default lesson length and daily reminder.
User 3: Thought it would be a good idea to select difficulty.
-
User 1: Easily found the flashcard mode lessons.
User 2: Suggested the flashcard icon wasn’t clear.
User 3: Found the cards easily and liked the location of the audio icon.
-
User 1: The quiz seemed easy and fun.
User 2: Didn’t have a problem finding where to take the quiz.
User 3: Suggested a matching type of quiz rather than multiple choice.
-
User 1: It was easy to share on social media.
User 2: Would have preferred not to have the option to share
on social media.
User 3: No problems with sharing.
-
User 1: Found the audio only option easily, but can't control it.
User 2: Didn’t understand why where was an audio only option.
User 3: Liked the audio only lesson so the app could be hands-free.
-
User 1: Could find the link and go through the exercise.
User 2: Thought ‘break the ice’ was a cute way of describing
the section.
User 3: Didn’t really like the term ‘break the ice’ suggested ‘start conversation’ instead.
VISUAL DESIGN
After updating my wireframes to incorporate the recommendations, I moved on to visual design. Up until this point, my prototype lacked a color scheme, typography, and a brand identity. I looked for inspiration online and created a mood board to refer to while working on design of the app.
When brainstorming the design of the logo, I had in mind several key elements. The typography, the ampersand and the speech bubble. I tested different fonts, designs, shapes and colors before settling on the logo I would implement into the app.
Listen & Learn Mobile App Style Guide
After finalizing the logo and color palette, I put together a style guide and UI Kit to use when creating the final prototype.
FINAL PROTOTYPE DESIGN
Finally, I applied the branding from the Style Guide and UI Kit to the mid-fidelity wireframes. I transferred the wireframes from Adobe XD to Sketch for this design round. I prefer Sketch's page and artboard organization, intuitive prototyping and cloud sharing features. Tap here to preview.
