Magic Hub Interactive Display with Mobile App.
Magic Hub is a functioning interactive home display with supported mobile app and a iOS watch that improves household coordination.
- Client BrainStation Project
- Timeline 2 Months
- Skills Figma, Miro, InVision, CSS, Javascript
My Role
I worked as a Product Designer, UX Researcher, and Front-End Developer to build this product.
Business Goals
At the beginning of the project I set personal goals including :
- Design Thinking Process: integrate UX process to emphasize, define, ideate, and prototype a solution
- Gain Development Experience: build MVP and learn coding to understand challenges developers face
- Create Prototypes: create and refine prototype using Figma in mobile, desktop, and custom responsive environments
Design Process
While designing, I mostly followed traditional design thinking process by going through convergence and divergence phases while keeping user-centric focus. However, at times I took steps back to previous phases after gathering insights in order to refine the problem statement and improve the prototype.
Emphatize
Define
Ideate
Prototype
Test
How do you manage household responsibilities ?
Understanding Problem
To explore the problem, I interviewed 5 couples and studied secondary research sources. Afterwards, I created an affinity map to synthesize the insights that emerged.
Interviewing 3 Couples (6 People)
Exploring Problem SpaceParticipant Criteria
Barbara | 30
Living with John for over 2 years in Toronto. Both struggle coordinating responsibilities. Works in IT, managing marketing.
Joanna | 35
Living with Nader for over 3 years in Toronto. Both complain about household responsibilities. Works in IT, in project management.
Nicole | 27
Living with Leonardo for over 3 years in Toronto. Both struggle coordinating responsibilities and planning social events. Works in IT, in technology sales.
Choosing Occupation & Early Adopters
This chosen occupation was chosen because of higher propensity to adopt technology. According to research, 4% of the population are early adopters of technology, they’re more likely to be working fulltime (63% versus 41%), and to be in IT field (11% versus 3%). They’re more likely to be younger, between 25 and 39 years of age (YouGov Data).
User Interviews
Various empathic listening methods to elicit deep responses including work from Criss Voss and Carl Rogers – labelling, mirroring, and dynamic silence.
Understanding Problem
StatisticsA Significant Problem
Problem Landscape
Couples struggle to coordinate household responsibilities while living together and keeping up with their busy lives. At the same time, couples who share household responsibilities report higher levels of relationship satisfaction. On the horizon, there is significant growth in technological IoT market that may address this problem.
Making sense of data
GroupingCategorizing Insights
Creating Affinity Map From Interview Notes
Using interview notes, individual data points from each participant were categorized into goals, gains, and pains using FIGMA. Themes began to emerge.
Themes
After synthesizing the insights from research, 3 major themes emerged where one one chosen.
Mobile Calendars
One person uses a mobile phone calendar but doesn't share
Miscommunication
One person makes plans in their head and expects the other to mindread them
Vertical Surfaces
We gather around the kitchen and use vertical surfaces to display information (calendars, stickies, reminders, etc.)
Exploring Vertical Surfaces
We tend to use vertical surfaces and gather around fridge to communicate information, store reminders, and keep track of notes. However, the analog approach has significant drawbacks – we can’t update them on the go, calendars can be challenging to write inside, and lack of data flexibility. I explored further how people interact with vertical surfaces at home and in outside environments such as subways, malls, and busses. Through observation, what I learned was that we use tapping gestures with vertical surfaces more often. This was the major insight that was useful later on during ideation in choosing the kind of interactions.
How might we help [couples] who share household responsibilities easily align on expectations in order to coordinate chores and events to increase satisfaction in relationships?
Persona
I formulated a persona to reflect the demographic of the average user I was targeting.
Experience Map
Then I created an experience map to illustrate the journey persona is taking with associated steps and emotional experience.
Task Flow
Based on user stories, I created epics, and then formulated the task flow. Once the user reaches home, several user stories are met including viewing today’s time, weather, current day, and upcoming events. Then the user is able to create events and add details. Through scrolling, events are seen in the future. Then, voice is used to schedule events. At the beginning, personal calendar data is captured and later presented allowing switching between the family calendar. All done on large surface.
Building Touch Screen Board
I assembled physical touch display after ordering required parts and installed operating system with a microcomputer that powered TV in vertical position to get ready for prototyping further.
Creating Functioning Prototype
Assembling Required PartsBuilding Touch Screen Display
Putting It All Together
After ordering all the required parts, I have assembled the MVP prototype inside my own kitchen and mounted everything on the wall.
Modifying GitHub Code
ConfigurationLearning to Code
Modifying Open Source GitHub Code for MVP Features
I wanted to get experience in coding in order to be able to communicate as a product designer in future with developers. With my limited beginner knowledge, I was able to learn how to configure Raspberry Pi operating system, navigate and install to test over 39 GitHub repositories and configure them, and most importantly learned how to modify CSS and layout to build what was in specification of my MVP.
Responsive Design
Design Screen AdjustmentsTranslating Screen & Mobile
Translating Large Display to Mobile Screen
After creating a large wall mounted surface, I translated large surface into mobile version in order to meet the requirements for BrainStation project. Later on, after user testing, users wanted mobile version to control the large screen so it all worked out amazing. For the large surface, I set up 12 column grids which are a standard for desktop screens and then worked towards mobile. Time widget was not included in mobile as mobile phones have time indicator in status bar.
Low & Mid Fidelity Prototype
Using the task flow and vertical touch screen, I developed sketches using UI inspiration with InVision followed by creating mid-fidelity prototype.
Using InVision
Using InVision
After task flow is created, it’s time for inspiration. Designers create Inspiration Boards that are a collection of UI components, patterns, and interactions that users will find beneficial in completing the job they are trying to do.
From this collection, low fidelity sketches would be created to explore variations of possible screens.
InVision is a platform to organize the visual elements on one digital board.
Dribble, Mobbin, and UX Archive were some of the websites that were used for inspiration.
Cards
Cards
A card is a container for a few short, related pieces of information.
Let’s take the best from what Google Calendar, Apple Calendar, Fantastical, and Sunrise Calendar has to offer.
How would the cards look like for entering events? Is there a way of having a card pop out instead of blocking the whole screen? How would calendars look like in static state?
More examination on best calendars that are out there.
How would the cards look like for entering events? Is there a way of having a card pop out instead of blocking the whole screen? How would calendars look like in static state?
Form Fields
Form Fields
Form fields enable users to fill out a form. While looking at the task flow, I began thinking about at which areas the users would be inputting information.
Inputting user information during sign up process deals with inputting names and selecting calendars to sync. Information is also inputed at the event page with details.
Considering it’s a large visual surface we are working with, the fields should be large and easily clickable.
How would UI look like to make it easy for household members to enter information?
Icons, Navigation, and More
Icons, Navigation, and More
Icons are visual representation of an object, action, or an idea. What kind of icons could be representing calendars, events, and voice recognition? What about weather?
Navigation is generally defined as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product.
What can be displayed to make navigations easy? How should voice recognition step look like?
For more comments and inspiration pieces visit the InVision link bellow but the ones presented here were the essentials.
Divergence Sketches
Divergence Sketches
Using inspiration gathered from UI Board in InVision, I began the divergent phase of skething solutions and potential navigation flows of how the first prototype will look like. No critique just yet. Open minded brainstorming, an exploration of a range of concepts and ideas that relate to chosen task flow.
More sketches.
A timer was used for 30 minute increments for 3 sessions with breaks in between each session. Since imagination is limitless and as creative people we are abundant with ideas, a timer served as a creative constraint while maximizing focus time to extract a workable number of ideas. In other words, without time constraints, divergent phase would continue forever which will be counter productive in order to be prepared for the next phase.
Convergence Sketches
Convergence Sketches
After stepping back, it was time for convergent phase of sketching. Having brainstormed earlier, I marked began highlighting areas that seem interesting, essential, important and areas that may not be relevant for upcoming solution sketches.
More sketches.
Best sketch solutions were then chosen.
Now it’s time to put best ideas together.
Final Sketches
Final Sketches
From a narrowed down paper sketches, an actual prototype began to emerge.
A hand drawn low fidelity prototype was created.
Normally after this step I would prototype the hand drawn sketch with Marvel’s Pop app but because the screen size is bigger then the size of cell phone the app was not applicable in this situation.
Figma interactive paper prototype was created.
Because I was unable to use Marvel’s Pop app, I decided to recreate the same experience using but using Figma. Still using paper. Figma mobile functions similarly to Pop mobile app. Problem solved.
Transferring paper solution sketches from low fidelity prototype, using Figma, a mid fidelity prototype was created. No detailed UI elements but rather approximations of how the app would look like in grayscale. No color was used because that is often considered a distraction during upcoming phase of user interviews. Only the core elements are presented with components that are essential to the task flow described previously.
After going through the paper low-fi prototype earlier I realized the prototype needed couple of more frames to illutrate changes during core functions, reflected in the live prototype. Further, I added a logo during Google sign in for consistency and aesthetics. Finally, a secret button to reset prototype to save time testing next person.
A mid fidelity prototype was created.
User Testing
Once the prototype was created and tested for basic functionality, user testing was the next step.
Testing Methodology
Goal: Conduct usability testing with at least 10 users in order to improve design of the prototype before creating a next prototype. Understand the mental map of users and evaluate their experience in order to create user centric product.
Criteria One: No Designers
In my experience doing tests with fellow designers leads to big bias towards aesthetics, much like how software engineers towards coding.
Criteria Two: In Person Testing Only
Over the years in entertainment I became highly skilled in reading body language and empathic questioning which is my strength. Too much info is lost on Zoom.
Criteria Three: Under $20 Budget
Living the student life.
An Unexpected Opportunity
An Unexpected Opportunity
I went for a walk and explored…
I walked into one small business called Ed’s Mercantile located on one of the busiest streets in Toronto, Bloor Street.
An Opportunity Opens
“Hey Leo, my vendors have bailed tomorrow so there is nobody selling anything in front of the store” said the owner. “Well, I am doing a UX project, what if I borrow the space?” I answer. “Sure, see you tomorrow.”
The Day Comes. The Capstone is due in 48 hours. Zero sleep within 36 hours.
Big Challenges
How am I going to set up big screen?
What will be the reward under $20?
How am I going to do 10 tests?
What am I doing in the middle of tests?
How can I make this experience a win-win for store owner?
Set Up
I need to create a solid wall and mount the Digital Interactive Board
Solid Wall Secured: I find a wooden skid realize that if that is flipped vertically, you can mount a large screen on it so it resembles a kitchen environment. I ask them if I could have it and they end up helping me carry it home because its heavy.
Transport Dolly Secured: In order for me to carry the “wooden wall” I now needed to figure out how to carry it physically to the store. I find a dolly that someone threw out because it had one flat tire. I couldn’t believe it. The universe aligned. Putting this wall on the dolly and wheeling it on one wheel I somehow make it to the store.
No Internet, No Problem: Because Figma would need internet. Wi-Fi of the store doesn’t reach it. I sync my cellphone as a hot spot for mobile Figma!
Rewards
Rewards Secured
What am I going to give participants and why would they even care stopping and giving me time, half an hour, even more?
I walk to a local convenience store and see a table full of perfectly ripe one-day organic bananas. I buy the whole table for $11.35 which fits under $20 budget.
One organic banana was offered as a reward to each participant because they taste great and everyone loves bananas 🍌
I find an exotic plate and set up a mountain of banana’s on one bowl. Literally a mountain.
I raise customer awareness further for my user test.
I ask my amazing partner to blow up balloons and fixate them around the store. People are noticing and stopping. That’s the plan.
Interview Script
Once the participants were selected and the prototype was tested for basic functionality including having hot spots hidden within Figma, participants were greeted with the following script before getting into performing any tasks.
Participants were asked to perform essential tasks while verbalizing their responses under several scenarios.
Empathic Listening
Observing Non-Verbal Communication
Body language was observed including micro expressions. Whenever participant displayed incongruent body language with respects to what they said, empathic listening techniques were deployed from above to clarify the response.
Recruiting Participants 🎥
I come up with any idea of filming a video and posting it on Instagram that the store owner recorded. During video, I promote the store by attracting people to come, do the user test, with exchange for bananas.
Hours later I meet several recruits because of the awareness that was raised. This was positive for awareness for store owner also.
Stopping Couples On Street:
I stop people on the street who are walking together and holding hands which is a safe indicator they are a couple. Also, those not in a rush. It worked. Asked for 25 minutes. “I am a student doing a project…” line works better tha “Can you help me?” Everyone loved bananas.
The balloons, crazy wall, salsa music, lit up display, a mountain of bananas worked slowing people down.
Once someone agreed to proceed, I turned off the music and did the test. Some tests were 45 minutes because of amazing insights that people generously shared.
Bonus: Marketing Campaign! 🎥
Regroup After 5 User Tests
After 5 user tests, I take out the laptop and went inside the store to take notes before doing more user tests.
Created a marketing campaign in 5 minutes.
I come up with another idea to raise brand awareness after synthesizing notes. The board is outside and can’t just sit there.
Using FIGMA, I create an advertising display with a dancing banana. It goes on social media. Strangers stop and take pictures. I get more user testers. 5 minutes. Store is flooded with visitors.
I manage to import a GIF and match the store’s typography to create a sign that stopped people. Watching through the window at the back, I saw people taking bananas with smiles, stopping to take a picture of the sign, and then going inside the store! t worked!
The video get’s posted on official social media.
Win-Win number two.
User Testing Round One
Being in front of the users is one of the most valuable activities because the insights were useful for iterations and have shown my blindspots as well as opened up ideas I never considered before.
User Test Participants
User Test Participants
These are the participants that were interviewed during the first round of interviews. For the purpose of this assignment, I will be sharing the insights from 10 users in total.
Being in front of the users is one of the most valuable activities because the insights were great and have shown my blindspots as well as opened up ideas I never considered before.
User Test Results
User Test Results
After conducting user interviews and recording notes, here are the patterns that emerged regarding core tasks.
Overall Task Analysis
Overall Task Analysis
After analyzing individual testing records, a summary of insights was created. They represent core issues the users experienced.
Checking weather and navigating calendar were the biggest issues.
Assumptions
I believed that the weather would be intuitive to understand with the line graph. People would want to provide location without hesitation and “add a user” text would sound personal.
Ways to Improve Insight Accuracy
Testing with greater sample size and with users that resemble the persona would improve accuracy of overall insights. Part of this will be done in the next phase.
Design Prioritization Matrix
Design Prioritization Matrix
Design prioritization matrix shows the relative importance of a set of items based on two criteria’s – the value to the user and the effort required to implement the design choice. The low hanging fruit is the highest value for the user with lowest effort required to make that happen.
Highlighted in green are the concepts that are high in value and require mostly low effort to make maximal difference for the users.
Prototype Iteration Changes
Prototype Iteration Changes
Weather: Add Y Axis: Helps with understanding of temperature
Location: Add Description: Tell user why location is important
Navigation: Put Arrows on sides of month name: Users are used to having arrows on side of month
Navigation: Add Full Text to Toggles
“I don’t know what W, M, Y stands for, takes effort to think”
Navigation: Add Circle: “I look at the month to see what day it is”
User Testing Round Two
Being in front of the users is one of the most valuable activities because the insights were great and have shown my blindspots as well as opened up ideas I never considered before.
User Test Participants
User Test Participants
These are the participants that were interviewed during the first round of interviews.
For the purpose of this assignment, I will be sharing the insights from 10 users in total.
Being in front of the users is one of the most valuable activities because the insights were great and have shown my blindspots as well as opened up ideas I never considered before.
User Test Results
User Test Results
After conducting user intervies and recording notes, here are the patterns that emerged regarding core tasks.
Overall Task Analysis
Overall Task Analysis
After analyzing individual testing records, a summary of insights was created. They represent core issues the users experienced.
Checking weather and navigating calendar were slight issues.
Assumptions
I believed that adjustments from previous sections would be beneficial.
Ways to Improve Insight Accuracy
Testing with greater sample size and with users that resemble the persona would improve accuracy of overall insights. Part of this will be done in the next phase.
Design Prioritization Matrix
Design Prioritization Matrix
Using information from summary of insights and other issues gathered from testing records and sessions output document, a set of sticky notes were created.
A design prioritization matrix was constructed using sticky notes.
Design prioritization matrix shows the relative importance of a set of items based on two criterias – the value to the user and the effort required to implement the design choice. The low hanging fruit is the highest value for the user with lowest effort required to make that happen.
Highlighted in green are the concepts that are high in value and require mostly low effort to make maximal difference for the users.
Prototype Iteration Changes
Prototype Iteration Changes
Inspirational Quote: Add Inspirational Quote: Users want a motivational quote or something with affirmations. Many wanted this feature although it was not considered earlier.
New Format Note: Ability to format a note
Weather: Create Labels
Add User: Change Text: Rephrase the text; Confusing and impersonal, has a strange question mark… add a person?
View Event: See who created event: In households with many people, it can get confusing who created the note
Key Learnings from User Testing Method
Key Learnings
- Challenges Are Good: The stars lined up to build a vertical touch surface. It was probably the hardest cold water plunge into coding. I did so in order to understand what software engineers go through so I can collaborate better. This gave me greater appreciation for developer hand-off procedures during Figma.
- Quality User Testing & Rapid Iteration is Great: Even if you are tired, haven’t slept, and beyond exhausted – user testing is still good. The amount of insight I gathered in such a short period of time by being in front of people is gold. I could barely keep up with generosity and the amount of great ideas that evolved through each interaction.
- Win-Win Solutions: I frankly don’t know how I did it but the most enjoyable experience was doing a crazy marketing campaign with that vertical surface that ended up working for the business owner. The second win-win was doing a crazy Instagram story that also brought people in. I was able to get more users and the store owner more traffic. I was able to connect the dots with business and the UX design project.
- Biggest Insight: High Visible Areas Reminders: The biggest insight was that people keep track of reminders in a high visible areas (doors and fridges). Having surface on high visible wall opens more opportunities because locations of doors and fridges has limitations. Conversations with people validated the concept further.
- You Miss 100% of Shots You Don’t Take: I had less than 24 hours to prepare and get everything ready to go. It was one of the most amazing experiences. The window of opportunity to get access to that many people would have closed if I didn’t act.
- Trust Dot’s Will Connect: I began discovering other business applications by creating digital experiences. For example, creating interactive vertical surfaces for store owners which create eye catching experiences for passerby’s.
Branding
I went through a multi-stage process to create a brand name and associated wordmark.
Brand Development
I followed multi-step process bellow to develop the name, tagline, and associated mood board.
Brainstorming Adjectives
Brainstorming Adjectives
A moodboard is an arrangement of images, materials, pieces of text intended to evoke a particular style or concept. It’s a tool that I used to create a visual identity for the solution. I began the process by brainstorming adjectives related to brand.
Top Chosen Words
Top Chosen Words
After brainstorming the adjectives that embody the brand, I created a top 5 word list to narrow down the words that I felt reflected the brand the most.
A More Than B
A More Than B
By using the A more than B list, I was able to determine the boundaries of the moods and concepts of brand’s identity.
Potential Names
Potential Names
While brainstorming for potential names, I kept the words innovative, minimalistic, elegant, safe, and magical in mind.
Brand Names
Brand Names
It was challenging to select the name because there were so many ideas available but based on the previous filter of words I was able to narrow down the choice.
Selected Name
Selected Name
“Magic Hub” with “The hub of your home” tagline was chosen because of several reasons:
- The name reflected five words that were chosen previously (innovative, minimalistic, elegant, safe, and magical).
- The name had consonants because names with consonants are usually easier to remember.
- The “hub” reflects the function of the solution while the tagline is relevant towards location and is minimalistic in terms of number of words used to describe the solution
Moodboard
Moodboard
For inspiration, I used InVision to assemble images that reflect the color, mood, and style of reflected brand values previously selected.
Wordmark
After assembling the images to set the mood, I began searching for inspiration for typography that will reflect my wordmark to make the brand stand apart from others.
Typographic Inspiration
Typographic Inspiration
A wordmark is a type of logo design that includes only the company name, a text only typographic treatment of the name.
I was looking for thick and simple sans-serif font with thick weight to represent minimalistic look and increase accessibility because of easier visibility.
Letter Sketching
Letter Sketching
Using the inspiration gathered from the moodboard, I began sketching wordmark ideas with variations of letter formations. The purpose of sketches was to get creative juices flowing and create connection to the meaning of the brand.
Symbol Variations
Symbol Variations
San Francisco font was chosen because it’s simple and elegant without having rough edges.
Here are some of the variations that I brainstormed using the sketches done previously.
Capitalizations and weight were chosen as an accessibility consideration and higher wordmark visibility.
As I was using Figma to create Vectors, I came up with few more ideas. Creativity never stops.
Font Variations
Font Variations
After selecting the main choice, I decided to experiment with three two other fonts to see if there are major changes in how it looks.
I also added a gradient. That gave it a polished look and transition between black color into accent color.
I decided to keep the choice with San Francisco. The lato font although sophisticated seemed too thin and would be challenging to see. Futura font’s “i” is challenging to see and may pose accessibility issues.
Selected Mark
Selected Mark
After testing the logo in front of family members, I decided that this will be the final choice as it relatest best with my brand’s values. It’s minimalistic in nature. The circle represents some of the circles present in calendar’s view and is a form of a reminder for an event which is a core feature. We also tend to read from left to right in Western hemisphere, so the letter M will stand out and be easily remembered.
Once the user interacts with technology, there is a possibility of animating the M within the circle in elegant ways that are non-distracting which is another way we can make the name stand out during use.
High Contrast Versions
High Contrast Versions
Here are the variations of the black and white versions of the wordmark to have high contrast options at the disposal for future.
Application Icon
After word was was selected, I ideated the design for the logo to have a symbolic effect.
Icon Ideation
Icon Ideation
After word was was selected, it as time to determine the mobile icon for the app. I began sketching for ideas that resemble the values of the brand along with the context of home based coordination solution.
Icon Design
Icon Design
After coming up with sketches, I decided to settle on an icon that is minimalistic, magical, and feels safe.
It’s a simple symbol to perceive which will aid in easy recognition & recall for users.
The style is also consistent with the wordmark.
Symbolisms
Letter Sketching
The icon fits the brand’s chosen representative words of innovation, minimalism, elegance, safety, and magical feel.
Furthermore, it represented symbols and illusions within the design.
Color Exploration
Using InVision, I utilized the moodboard to create high fidelity colors related to the brand.
UI Inspiration Board
UI Inspiration Board
Using InVision, UI inspiration board was expanded to focus on high fidelity treatment regarding typography, colors, and icons.
Color Extraction
Color Extraction
From the mood board assembled previously, several colors stood out.
Fit with Brand
Fit with Brand
These colors seem to fit with the feeling that the brand is trying to evoke.
Color Psychology
Color Psychology
The chosen colors for the brand also correspond to psychological effects with relation to perceived color.
Black – evokes a feeling of sophistication and minimalism
Grey – a neutral color where the impressions of this color is easily affected by their surrounding colors
Blue – evokes a sense of loyalty, dependability, and trust
Combining Colors
Combining Colors
After trying combinations, I was able to choose the colors that seemed to work together while providing contrast.
Primary colors are the building blocks from which all other colors are derived
Secondary colors are color combinations created by the equal mixture of two primary colors.
Tertiary colors are the combinations of primary and secondary colors, the accent colors that pop.
I kept in mind the golden ratio which represents that 60% of colors should be primary, 30% secondary, and 10% tertiary. These selections seem to fit the golden ratio criteria.
Color Palette
Color Palette
After choosing colors that look best, I organized the colors in a color palette to include functional, neutral, and systemic colors. This made it easier to have one place of reference for colors that I will come back to as I inject color into UI
Atomic UI Design System
The atomic design system was used which is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.
Accessibility Evaluation
To ensure that color combinations were accessible I used an accessibility tool to determine best WCAG legibility and accessibility ratings.
Watch App
I created an Apple Watch prototype because it fits within the user stories. They included being able to manage events and reminders while on the go and having an easy way of entering information through voice – which are the core functionalities of the watch. The watch functions as an input and reminder medium compared to the primary surface that is used to look at for general information. Furthermore, this fits within the persona of a person who works in IT, having positive outlook on technology, and a person who loves trying new technology. By having a third compatible device, there is an opportunity for greater adoption of this new technological solution and an opportunity of increasing usage.
Voice Flow Diagram
Voice input is one of the key features that is supported by user stories. Voice diagram helped me plan animations and few visual modals that needed to be created to reflect the user journey more visually.
Landing Page Design
I created a responsive desktop and mobile version of website to promote the product after doing exploratory sketches, solution sketches, and deciding on breakpoints.
High Fidelity Prototype
Using the design system, I created a mobile and digital board prototypes. Bellow is the mobile app that is used to control the Magic Board remotely.
Key Learnings
There were several key learnings after completion of this project
Development
It seems easier for a designer to tell developers to "make it pretty" but after experiencing the challenge of building, coding, and creating a prototype I learned about limitations of design ambitions.
Eye Tracking
Eye tracking technology can be used to increase accuracy of user tests compared to observational research methods.
User Testing
Never do one kind of user testing, try to supplement other methods of validation, especially if working within tight timelines & budget.
Thank you for reading this far!
