Background
What did you do during your summer?
Let me explain..
During the summer of 2019, I had the pleasure of interning as a UX design intern at Microsoft through the Garage program in Cambridge, Massachusetts. Throughout my time there I was able to work on designing a project focused on demonstrating Azure AI and ML capabilities.
Our project name is R.E.E.L., which stands for Recommendation Engine Example Layout. R.E.E.L. is a movie recommendation application that demonstrates the usage of the many recommendation algorithms Microsoft has. This project uses a visually compelling solution in order to easily demonstrate the output of these algorithms for Microsoft customers. The application, R.E.E.L. was built/coded using Microsoft Xamarin forms.
MEet the team
*I do not own rights to this audio, found via YouTube
Now that you've met the team, let's get into the REEL details...
Step 1:
Identifying the Problem
We first began with identifying the purpose of our the application. The current system in place for the AI CAT team involves showing forms of code to demonstrate how to implement algorithms into their company's product.
Step 2:
Who is our user?
Identifying who would be using our product. REEL would be used to demonstrate Microsoft Recommendations to clients (both technical and non-technical), along with being accessible on the Recommenders Github repository for open source usage.
Once this was determined, I was able to develop a general user flow for the application to follow. This flow was then used to develop paper prototypes for user testing to find any inconsistencies.
Step 3:
Research & Prototyping
After developing our concept fully with our team, I decided to move on to research. This included paper prototyping research which involved creating user flows to begin, then designing the paper wireframes, cutting them out and testing them with various interns and other potential users.
Since REEL is an internal product, it was difficult to find any existing applications with similar offerings. For example, Amazon Web Services and Google Cloud Services were both evaluated for competitive analysis but unfortunately were not helpful in aiding our analysis process.
Step 4:
Testing 1, 2, 3...
Once we had completed some rounds of paper prototype testing, I decided to move onto testing digitally through Figma. These design comps featured above show the beginning of the design process
Step 5:
Defining the Style
Once our team got further into the process of both development and design, we started to put more emphasis on the overall look and feel of the UI and Visual design of REEL.
I developed two separate moodboards, one light mode and the other dark mode. After asking my team members which they preferred, we all came to agree on the dark mode style.
Step 6:
Animations for Information
Into the development process, it was determined that on-boarding was a necessary step in informing the user about the goal of the application and how to proceed. These animations accompany the on-boarding process to provide visual aid/instructions.
Step 7:
A Quick Walkthrough
This is a video walkthrough of the design assets I created using Figma demonstrating how the REEL on-boarding works within the application. Once the user completes this process it takes them to the home page where it shows recommended movies based on their input.
For switching between algorithms, the settings page lists the twelve different algorithms to change between. For the duration of the summer, our team was only able to program and train 2 of the 12 total algorithms.
Final Takeaways
Try to narrow down your scope sooner than later
User Testing with your product provides you with an outside perspective on your product's progress and helps to improve any flaws you may not have noticed
Strong communication with your developers goes a long way when creating a product
Focus on the MVP (minimum viable product) as your end result
And that's a wrap but..
If you're interested in learning more, click to read more below
