III. Ideation and Prototyping
Defining the MVP
After completing the research and hypothesis statements, we defined the MVP with the features shown in the image below. The main consideration in defining the MVP was to create the minimum amount of work that will allow us to test our ideas. We included our core value proposition (notes and lists) along with a few supporting features to complement the movie note-taking experience.
Sketching and wireframing
I started by sketching our ideas about navigation, feature task flows, and basic wireframing on paper. After some discussion and critique, we narrowed down the direction we wanted to follow and refined the main ideas.
The bottom navigation contains four top-level destinations that need to be accessed from anywhere in the app: home, notes, lists, and profile.
To show how users would travel through the app, task flows for specific tasks were completed. These tasks include movie note-taking, movie search, list creation and adding a movie to a list.
Inspiration
Before starting to work on the low-fidelity wireframes, I reviewed other apps to gather ideas and inspiration for the features we wanted to design. I focused on movie cards, lists, tabs, search results, and journaling. Some of the apps I reviewed can be seen below:
Wireframing and usability testing
Initially, I explored the different ways a user would be able to search, writes notes, and create lists. As part of my process I created low-fidelity wireframes of the core features and conducted a usability test with 3 participants.
Feedback was obtained, organized, and analyzed using an excel sheet to identify potential areas of improvement. Insights obtained from this analysis were used in the next design iteration.
Brand name, visual identity, and typography
When developing the product name, wordmark and icon, many keywords and fonts that could be representative of the brand were used and tested. Ultimately, the selected font for the name was Didot and the chosen product name was MemoReel. We felt that MemoReel was an appropriate name because it embodies one of the main insights we obtained from the research process: “Users do movie note-taking to have a log of their movie experience and to remember movie details”.
For the product’s visual identity, we brainstormed different words that we wanted to be representative of the MemoReel brand. The ones that resonated with us the most was “creativity” and “elegance”. These words translated to purple as the primary color and light blue as the secondary color.
Purple is known to foster creativity by awakening the user’s senses and promoting the quiet necessary to make insightful observations after watching a movie. This color was used to emphasize actions, while, the light blue was chosen as an accent color to highlight relevant information.
The app background color is black because it contrasts well with the primary and secondary colors, as well as, enhancing the movie images displayed throughout the app.
The typeface used in the MemoReel app is San Francisco Pro. I decided to use this system font because I wanted to take advantage of its accessibility settings in the iOS. More detail about typography can be found on Section IV - Design System.
High-fidelity prototype
The features listed as the basis for the MVP were grouped in the four major sections shown below:
Sign up & Log in
To access the app, the user is presented with three options to sign up and log in. They can either use an email address, their Apple account, or Gmail account. Users can also access the app as guests, but with limited functionality.
The sign up and log in task flows are shown below along with their respective error states.
Home, movie discovery, & movie search
The home screen allows users to access the main four features of the app: search, movie discovery, notes, and lists.
The movie discovery feature exposes users to movies they might be interested in based on their preferences. It is an interactive way (swiping up, left, or right) to decide what to watach next.
The search function grants access to users to a large and detailed movie database (API). Users are able to see the movie's synopsis and details, as well as, information about actors, directors, etc.
Movie Notes
The note-taking feature of the app gets users to rate and write down their thoughts after watching a film in a simple way.
Users are able to check movie details by tapping the movie name at the top in case they have forgotten a few facts about the movie.
The autosave feature aids users by saving all their work in case of abandoning the note or closing the app by accident.
Movie Lists
Users are able to create lists of their favorite movies to organize them in different ways,
Users can name their own lists or can use name suggestions provided by the app.
When adding movies to a list, users are able to add multiple movies at the same time in order to reduce the list creation process.
Please note that this page, specifically the high-fidelity prototype section, will be updated periodically as the app undergoes significant changes or additions based on more user testing during design and development.