Thesis Statement
Reframe is a creativity support tool designed to help users iterate on their work sooner, by providing suggestions on how to move forward, or how to start something new. Reframe also serves as a progress binder, allowing users to document their creative process, set goals and objectives, and save notes with helpful feedback received in and out of the app.
Final Product
The main function of the app, as well as several of the apps internal screens
This was an animation made for the app startup
Thesis Presentation
Introduction
Reframe started off as a problem that I and many other creative professionals face constantly in our work. The inability to fail faster. Failing faster is the action of creating and iterating broadly towards the beginning of a project, to see what works and what doesn't, and get big mistakes out of the way before they matter. Since I was never good at the process of failing faster, I decided that the best way to help myself was to focus my design endeavors on crafting a solution.
Audience
The audience for Reframe is any and all creative professionals that have issues in the creative and iterative process. The app is designed with a filtering system in mind so that the suggestions the app provides on how to move forward, can be tailored to different mediums. Sometimes a painter wont always want to receive suggestions on how to change the typography of their work. Just like how an illustrator wont want suggestions for how to move forward with a sculpture. The app is designed to be flexible because of the breadth of users and mediums amongst creative professionals.
Visual Sources
Since I was familiar with the problem that I was trying to solve I started my process by researching the types of solutions others had come up with for it. In doing so I discovered creativity support tools, tools designed to help eliminate the very same creative block at the heart of my issue. Upon researching further however, I learned that most if not all creativity support tools focus on creating and not iterating, so I decided to focus on iteration as the niche of my design solution.
These are some example creativity support tools. These helped inspire how I thought about the delivery of my content, as well as functioning as visual inspiration.
Goals
Early on in the development of Reframe, I had to decide the form that my thesis project would take, and after researching and discovering creativity support tools, I decided to make an app as it satisfied the following goals:
1. I wanted to gain more experience with UI/UX design, and continue learning a skill that I had passion for.
2. I wanted my design solution to portable, so that creative professionals could solve their creative issues wherever they were working.
3. I wanted to avoid card based media, because I didn't want to follow along with the status quo for creativity support tools. I wanted to branch out.
Once I had decided to make an app, I started looking at integrations of user experience with visuals. The Virtual Economy by L'Atelier was a particularly large influence.
Process
After researching a few examples of user experiences, I started making wireframes experimenting with different landing page layouts, and really focused on movement.
My experience looking at The Virtual Economy really excited me and drove me to try
and create a user experience that had that same dynamic field.
The initial hand sketches focused heavily on directing the movement and thinking about how the navigation and the main core of the app could interact
The second step was to update the wireframes, and bring them into the digital space.
After the Initial wireframing was completed, I moved to what would end up being the most important step in the development of my app. The creation of my "content cards". At this step what my app needed to help inform the correct direction forward was to see the kinds of suggestions the app would give to help users of the app. To create these suggestions I referenced critiques I had experienced myself, did research on some more extraneous types of critiques, and also had 1 on 1 consultations with some of the art professors at Western Michigan University.
The "content cards" created in the early stages of app development.
The next step in my process was to find a name for my app, and subsequently start creating an identity for my app. When it came to the creation of my name I started by assembling a list of key words and phrases that related to the themes the content cards had given me. Focusing on the unexpected outcomes that result when you shift your perspective on a problem.
Internal naming process
Then once the name had been determined I started creating a visual identity for my app, and once I started to sketch and refine my identity, I was interested in maintaining the energy and movement that I was trying to capture with the app wireframes.
The earliest ideas for my identity really focused on shifting the perspective to find something unexpected and interesting.
Then I digitally refined some of the better concepts from my initial batch of sketches.
The final identity
Once the app's logo and visual identity was created, the last step I needed to finish before moving on to the development of the final app was figuring out the color pallet of my app. Eventually, after many color explorations I decided upon a combination of a softer cream color, contrasted with a heartier violet.
The color explorations, starting with black and white refinements, and moving towards broader and wilder color choices.
With the app's identity in hand, I started turning translating those original wireframes into the final app. This was fairly easy for the home screen, as well as with the main functionality of the app. The thing that took much longer in this final step was the creation of all the auxiliary features required for the mockup to feel as realistic as possible. I had to think about questions like: How does the user save the project? How does the user update the thumbnail for the project? How do they sign in? And all these questions needed to be answered before the app was complete.
Frames from the final development of Reframe.
Reflections
The development and production of Reframe taught me a lot as a designer. First it taught me a lot more about UI/UX design, and how important it is to learn from other designers and how they create dynamic and engaging experience. Next it helped me to solve or begin solving the issues I had with failing faster, by changing how I was looking at problems and looking for those unexpected outcomes. And finally, the most important thing I learned through creating Reframe is the importance of content and context. Without creating my "content cards" I would have never gotten a feel for what the app would become, and wouldn't have been able to be as decisive about design direction as I was. Overall, Reframe was an excellent learning opportunity for me, and I look forward to continuing to improve and update it as I grow more.
References
Written Sources:
1. Shoshkes. (1989). The design process / Ellen Shoshkes. Whitney Library of Design.
2. Rose. (1987). Achieving excellence in your design practice / Stuart W. Rose. Whitney Library of Design.
3. Figoli, Mattioli, F., & Rampino, L. (2022). Artificial intelligence in the design process The Impact on Creativity and Team Collaboration. FrancoAngeli.
4. Saulais. (2023). Knowledge and Ideation (1st ed.). John Wiley & Sons, Incorporated. https://doi.org/10.1002/9781394208715
5. David, & Murman, C. (2014). Designing Apps for Success. Routledge. https://doi.org/10.4324/9780203505878
6. Maia. (2023). perspective about design cognition to research through making validation in graphic design. Gráfica (Bellaterra), 11(21), 91–97. https://doi.org/10.5565/rev/grafica.252
7. John Healy. (2016). The Components of the "Crit" in Art and Design Education. Irish Journal of Academic Practice, 5(1). https://doi.org/10.21427/D7RB1V
8. Lee. (2021). ‘A sculpture that has never been seen before’: the Advanced Sculpture Course, group crit and Silâns magazine at St Martin’s College of Art. The Sculpture Journal, 30(1), 71–85. https://doi.org/10.3828/sj.2021.30.1.5
9. Day. (2013). The Art Group Crit. How do you make a Firing Squad Less Scary. Journal of Learning Development in Higher Education, 5. https://doi.org/10.47408/jldhe.v0i5.178
10. Krabstadt Education Center, & Sille Storihle. (2022). On Crits and Games—and Crits as Games A Conversation between Sille Storihle and KEC. Parse Journal, Krabstadt Education Center: Conflated Places(14).
Visual Sources:
1. Lomas, Karac, M., & Gielen, M. (2021). Design Space Cards. Proceedings of the ACM on Human-Computer Interaction, 5(CHI PLAY), 1–21. https://doi.org/10.1145/3474654
2. KnowBrainer- Gerald Haman
3. ThinkPak- Michael Michalko
4. Color psychology 101: A beginner’s guide to the meaning of colors. Color Psychology. (2023, May 3). https://www.colorpsychology.org/
5. Brainsparker- Gabriella Goddard
6. Seattle Software Developers- tiktok
7. Clay.Global - slack
8. L’ Atelier- The virtual economy
9. Just type Playing Cards- Pentagram
10. Riposati, D'Addezio, G., Di Laura, F., Misiti, V., & Battelli, P. (2020). Graphic design and scientific research – the National Institute of Geophysics and Volcanology (INGV) experience. Geoscience Communication, 3(2), 407–425. https://doi.org/10.5194/gc-3-407-2020
