.
Creative Digital Media App
____________________
.
This was a project I made in my fourth year in college for the Application Design and Development module. This was the first time I created an app and used the ionic and angular js framework. I had already developed some websites in past years, but never an application.
The brief was that I had to “develop a concept which will be designed, prototyped and tested. The concept should be the result of the student’s own imagination but should form the basis for a functional app".
The app I created was for my course, Creative Digital Media. Below is the process I went through.
____________________
Section 1 – Design
Chapter 1. Research
• App ideas:
I thought of a few ideas for the app: To learn a language; For exercises; For reading; Planner/agenda; Health tracker; Movies/series; For Creative Digital Media students. While I was still sketching out ideas, I decided to give some thought to the Creative Digital Media (CDM) app.
The idea was to have a page for each module with a quick overview - e.g., the web design page would cover the basics of the module, and the photography page would include brief explanations about lenses, camera settings, and more. With this, I would be developing an app for those who are new to the course or for 4th year students (like I was) who are facing the ionic and angular js framework for the first time and want to have an overview of everything in one place.
Below are the original sketches I made.
After making this sketch, I decided to build this application focusing on audio, video and photography modules.
• Feature list:
- As I wanted this app to provide quick and easy search for students, it needed to contain all the essential information and at the same time be concise.
- I thought of when students are out in the field, working on their assignments, and they forget the name of a shot type or need to adjust camera settings but are not completely familiar with the camera. At these moments, it can be quite frustrating to have to stop everything and search on the internet for what you need. Therefore, this app will provide all the information in a direct and easy-to-find way.
- I also decided to create an “Edit” page for post-production.
- Additionally, I included a “More” page where students can find suggestions from people who explain and teach creative ideas related to each of the topics (audio, video, editing and photography) on the internet.
- In total, there are six pages: home page, video, audio, photography, editing and more. The Edit and More pages contain brief guidance for the student, while the Video, Audio and Photography pages delve into more detail:
- On the Video page, there is information about shots types, movements and camera angles.
- The Photography page covers topics such as shutter speed, ISO, shooting modes, depth of field, white balance, focal length, histograms, rule of thirds, visual weight, and leading lines.
- The Audio page has information about microphone types and polar patterns.
• App statement:
This app was created thinking of users who need quick and easy access to information about equipment and techniques related to audio, video, photography, and editing.
This app was created thinking of users who need quick and easy access to information about equipment and techniques related to audio, video, photography, and editing.
• User persona:
• Journey map:
• After creating the user personas and user journey map, I made some other sketches:
• Tree Architecture Diagram:
Chapter 2. Prototype
XD prototype (low fidelity):
Chapter 3. Prototype Test Plan
• Objectives:
- I tested the app to see if users could easily use the app and find the items I asked them to find.
- I tested with 3 users: one of the users corresponds to my persona number 1 (CDM student), and the other corresponds to my persona number 3 (self-taught). Unfortunately I didn't find a third user that matched another persona I created.
• Script for conducting the testing:
1. I informed the user what the application was about.
2. I made sure the user was aware that they are not being tested, but rather the app (to ensure they don't get nervous about the process).
3. Once I ensured the user was comfortable and had no questions, I started the user testing.
4. The first task: from the home page, can you go to the Video page?
5. The second task: on the Video page, can you find the camera movement called “crash zoom”?
6. The third task: from the Video page, can you go to the Photography page?
7. The fourth task: on the Photography page, can you point out the “Histogram”?
8. The fifth task: Can you show me how to navigate from the Photography page to the home page?
9. The sixth task: on the home page, if you wanted to know more about a topic, where would you click?
• Analysis of the results:
I made a mistake in the first two user tests: I carried out the tests using the iPhone 8 but the prototype was made with the iPhone 14 Plus, which lead the prototype to be cropped, for the third user, I used a laptop with the Figma prototype open so the user could see the app on the iPhone 14 Plus screen. Using the splash page as an example, the user shouldn't need to scroll down the page to see the rest of the content, but due to the difference in screen sizes, this problem occurred (you can see this problem in the images below).
All tasks were performed successfully on the first try. However, there was an unexpected problem: during the sixth task, users 1 and 2 tried to click “More+”, but quickly realized that they needed to scroll down and click “Learn more”. I believe this confusion occurred due to the difference in screen size between the iPhone 14 Plus (prototype) and the iPhone 8 (used for user testing), as the “Learn more” button was initially hidden below the URL during testing. The third user had no problems.
From this user testing, I observed that users did not stop to read the information. With this in mind, in future user testings I will ensure that users spend more time exploring the app.
• User testing:
User 1:
User 1:
User 2:
User 3:
Section 2 – Build
• App Design:
In the original sketch of the app, I did not have the footer on the Video, Audio, Photography, Edit, and More page. When I started making the low fidelity, I realized that I would be making the user return to the initial page every time he wanted to go to another page, because of that, I added a footer.
In the low-fidelity version, it is possible to see that all the pages had a footer (all of them but the splash page), for each of the buttons, I added the name of the page below the icon. However, when I brought it to Figma for the high-fidelity version, the names were hard to read. So, I decided to remove the text and only leave the icons. The same thing happened in the header: in the low-fidelity version, I added the name of the page with the icon and the arrow button to the home page, along with the word 'home.' But it was adding a visually busy feel to the page and was squished together.
One other thing that changed from the low fidelity to the high fidelity was that I added collapsible sections for the Video, Photography and Audio pages. When I started to add the information, I noticed it was becoming very messy and would be confusing for the user to have a lot of information displayed at once. This was happening most evidently on the Video page. To solve this problem, I placed the information under collapsible sections, which made it much cleaner and easier to find information.
• Color palette:
I decided to go with a green monochromatic color palette for the app as the idea of the app is to be straightforward and easy to use, the less information and visual distractions were in the app, the better.
I decided to use a dark green background, thinking of when the user is in the field filming, and the sunlight makes it hard to see the screen. So, by having a dark background and white text, it should be easier to read.
The icons (the buttons) were originally white, but they were very predominant and competed with the body text, so I decided to leave them in this light green.
