USER EXPERIENCE, INTERACTION AND INTERFACE DESIGN
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.
As UX consultant for Logic 20/20, I was hired to improve the user experience of the privacy information and training portal for XBOX game developers. As a mom of an avid gamer, I am personally concerned about privacy, and pleased that Microsoft takes it very seriously with the studios that develop games for XBOX.
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 Microsoft 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 Microsoft 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.
On this project I was asked to curate, edit and design assets to be used as a part of Microsoft Office. Users would not be experienced designers, so it was vital that the assets be produced cleanly and easy to modify. They also needed to be well organized and tagged for optimal user search. In addition, localization concerns were extremely key in preparation of these assets, as users could be from anywhere in the world.
This example is of assets in Microsoft PowerPoint (these aren't necessarily images I personally produced - though this is how they will be accessed). I worked 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.
At Respect Network I developed the mobile UI for Respect Messenger, Respect Elect and Queue.
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
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.
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.
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.
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.
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.
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.
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.
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.
“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
“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
“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.
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.
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.
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.
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.
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
User 3: Didn’t really like the term ‘break the ice’ suggested ‘start conversation’ instead.
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.