UX/UI
Design Research
Illustration
Project Overview
Architech is a proposed new learning software. It teaches history through the lens of architecture. It does this through lessons and a builder quiz. The builder quiz would allow students to create custom buildings, which would be critiqued by AI on historical accuracy.
Roles and Assets
- Nick Voss :: UX/UI lead, Builder Game Design, Research Support, Branding Support, and Builder Illustrations. Also provided major edits on all parts for the final version on this website.
- Other Team Members :: Jared Munoz (Branding Lead), Marcus Coley (Research Co-Lead), Chris Clark (Research Co-Lead).
- Image Sources :: Photographs courtesy of Unsplash under Unsplash License, Pexels under Pexels License, Wiki Commons under Wiki Commons License, and Freepik under the Freepik Terms of Use.
Final Outcomes
Project Journey (1/3) :: Getting Started
How Do We Teach History in a Fun Way?
United by a desire to design an interactive history education experience, we knew our task may end up being quite ambitious. The timeline for the project was tight, so we needed to get started. The biggest changes before us were the vastness of history and the complexities of creating fun and unique learning experiences. We needed to know about how history was currently being taught in schools, so we scoured the internet and interviewed teachers and students.
Phase Goals
- Research History Education
- Interview Teachers and Students
- Narrow Down our Focus
Interviews and Articles
Ideally, we would have utilized surveys, but because students are a protected group, and we lack access to large company resources, we had to rely on interviews with students and teachers that were either personal contacts or contacts of our personal contacts. Additionally we gathered information from articles on the internet.
What the Students Said.
We interviewed a few students in both middle school and high school. They all agreed on the following:
- History classes were dominated by dull reading and videos.
- Complained that world history classes, specifically, would spend a week or less covering a massive topic, and then expect them to remember the lessons up to two months later.
- Loved gamified learning, but found that most software was outdated, tacky, and childish.
What the Teachers Said.
Two teachers were interviewed. One teacher taught middle school, and one teacher taught elementary school. They both agreed on the following:
- Technology is becoming increasingly important in classrooms.
- Most software is simply comprised of reading and/or videos.
- Gamified or full interactive learning experiences left the greatest impact, and students were more willing to learn with them.
What Internet Articles Said.
Articles written by educators highlighted that the greatest struggles in history lay with world history. Some highlights of those articles were that:
- World history courses had to cover centuries and continents in a single day.
- The fast pace of the world history programs, meant that content was almost always less enjoyable and rushed.
- Anytime the teachers could find an enjoyable activity, students would remember that lesson the most.
One Interesting Student Comment
One of the students we interviewed was talking about his world history class. At a couple points throughout the interview, he mentioned the class’ study into buildings, like Buddhist temples. This was an interesting piece of information. Could we use this?
A New Goal
To us it was becoming clear that World History classes were in need, and that both students and teachers desired gamified learning. But there was still the question of how. World history is vast and contains many facets. How many games and interactions would be required to teach about politics, culture, warfare, technology, economy, and more? How can we simplify? And so we came up with a new goal and idea:
We want to teach world history through architecture. Architecture is visual and memorable. Architecture is deeply intertwined with the culture and functions of civilizations. And architecture is bound by specific limitations that may allow us to teach many concepts without bloating the required number of custom interactions and games.
Project Journey (2/3) :: How to Tackle Our New Goal
We're Not Game Developers.
It’s easy to say that a gamified learning experience is wanted, but it’s much harder to actually make one. As a group, no one amongst us had made a video game, and our program does not teach game development. Our solution was unknown and our path was unclear, but we figured that the best place to start was by looking at both popular education software and video games with architecture or building features.
Phase Goals
- Look at Other Educational Software
- Figure Out What Our Gamified Experience Is
- Design the Website or App that Houses Our Experience
Other Education Software
After going through numerous programs and learning materials, we found that a few stood out to us.
Geography Software
This software may be the best, in terms of simple but fun interactions. Some interesting features these programs had were:
- Drag and drop the country mini-games.
- Quizzes where you click the correct spot on the map to answer the question.
Quiz Based Software
This is the traditional learning software. It does have its merits though:
- The lesson to quiz structure is intuitive and works.
- Though the learning methods aren’t always exciting, they’re very modular.
- A lot of content can be posted in very little time.
- It’s still better than a book.
Cross Section History Books
As soon as architecture became a possibility, these books came straight to our minds. The books would feature illustrations of castles or cities, but the walls would be missing. You could see many illustrations of historical peoples carrying out their lives, with small text giving explanations for every nook and cranny. Everyone we mentioned these to loved and remembered them.
Video Games that include Building
We talked for a long time about what to make, but we still hadn’t landed on an idea. We wanted something as fun as the geography software, but we couldn’t figure out how to make architecture fun in the same way. The cross section history books would be amazing, but we couldn’t figure out what the interactions could be. So, with most of the education material research not helping us find a solution, I took it upon myself to look into non-educational gaming for inspiration.
Age of Empires II
If your unfamiliar with it, Age of Empires II is a late 90’s real time strategy video game. In the game, a player trains units, builds buildings, gathers resources, and wages war. One thing that stood out to me was:
- Though the game seemed to be 3D, it wasn’t. The game relied on an art style referred to as isometric art. Instead of lines converging in the distance, they remain parallel. This means that no matter where your camera is, the shapes of buildings and the world remain unchanged.
Minecraft
Minecraft is incredibly popular, and you can build almost anything block by block. It has its limits though, as fine details are not usually possible. But one thing was true:
- There are a number of people out there that are capable of recreating historical buildings in Minecraft. There are even teachers who have done so, to show roughly how a building, that no longer exists, could have been like.
Starfield
Right as we were starting this project, the game Starfield was released by Bethesda Game Studios. Most of the game is a first person adventure shooter, but it also contains both a base builder and ship builder. It had the following unique and interesting features:
- All rooms were placed as blocks through a limited number of mount points, and an algorithm would determine certain attributes about your ship, such as thrust to weight ratio.
- Not only could larger components be used, but decorative elements could be added as well. These were good enough for players around the world to recreate ships from other games, tv shows, and movies.
A Potential Solution
While researching for this project, including the video games, I was taking the Intro to Artificial Intelligence class in the Texas State University Computer Science program. This led to me beginning to develop an idea. After discussion with my group, it seemed we may finally have a solution.
We were going to let students build entire highly customizable buildings. To get around the limitations of most video games, and to further push it toward history education, an AI algorithm would evaluate their building for historical accuracy and give them feedback.
Explaining the Concept and Beginning to Design it
While in my own mind, the concept was solid, my team had plenty of questions and doubts. Below are the first sketches of the concept, followed by the points of concern amongst the group.
How Are We Going to Create A Mockup In Such Limited Time?
There were major concerns about how we could render and demonstrate the concept. We had no one capable of 3-d modeling, and the project was behind schedule.
- I wanted to utilize isometric art, so that we could render building parts in Illustrator as grid based vector graphics.
- Figma is capable of simulating dragging mechanics a little, but we would need to capture the workings of the builder mostly in still frame images.
Will This Truly Teach History, or is it Just a Game?
Just like how in a design class, getting your work critiqued can often teach you more than doing the work itself. If an AI gives feedback in a critique like manner, offering little pieces of history commentary along the way, the user should hopefully learn a lot. The Following Solutions were suggested:
- No scoring of the quiz, just critiques
- Have the builder provide extra details that the learning sections do not provide
- To incorporate the builder into the lesson plans
Can AI Do This?
A project like this would ideally require a seasoned AI engineer. But from my limited experience with AI decision trees, I could see how it could work. Below is how I could imagine the AI critiquing a castle window placed by the user:
- An information tree would be populated with castle details
- Some key notes in the tree would include, checks for the height on the wall, the kind of window, the kind of block it’s on, and more.
- If a window was outside the castle, which could be determined by connection points in the game engine, but it was too low, the AI could tell the student that, “You’re window is too low. castles are first and foremost defensive structures. You don’t want attackers getting in your windows!”
Time to design
We were running out of time. The deadline was approaching fast, so we decided to divide up the work. I took the task of designing the builder and illustrating the building blocks, while the rest of the group began creating branding and the website navigation. As the UX/UI lead, I still kept track of their progress and gave advice on their parts.
Project Journey (3/3) :: First Version, Testing, and Pushing the Design Forward
Testing the First Design
The first version was put together quickly. We needed to test it and make corrections, as there was still a lot of work to do.
Phase Goals
- Show Our Initial Design
- User Testing
- Feedback
- Figure Out Next Steps
First Design
The builder in the first design was received with enthusiasm. The rest of the design was less liked. The list of adjustments needed was substantial. The full list of critiques will come after the images of the initial design.
Branding Critiques
The general opinion on the branding was that it wasn’t working. While the bright blue, combined with mature greys, fit the needs of the target age range, the oranges were jarring and not liked. Additionally, the Mascot Murph the Builder was poorly received. Teens and young adults perceived him as being too childish. People also complained about a lack of cohesiveness and oversized type.
Navigation Critiques
While the navigation was usable, there was concern on whether it left room for proper expansion. The vertical bar of movements was distracting, and the content didn’t properly fit within the screen. It was not intuitive enough, and the hierarchy was off.
The learning section was also a subject of critique. It was very book-like, especially when compared with the more innovative builder quiz.
Builder Critiques
The builder was the best received feature, and as the focus of the project, that’s a good thing. People did however want more of a tutorial to explain how it worked. It also was found to be missing features, such as an easier way to delete misplaced blocks. Another critique was that while the builder functions as a critique type environment, some of the wording, especially the use of “move on to judging,” was far too harsh.
Next Steps
People generally believed that many adjustments needed to be made, but that the project had great potential. Since, after that first critique there was no requirement to continue developing the project, and my teammates wanted to devote their time to other projects, I would take it upon myself to complete the project. All changes in the final outcomes at the top are my own. The updates have already been received far more positively than the initial designs. The greatest additions are a builder tutorial and new and improved education sections.
