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.
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.
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.
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.
-
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.
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.