Voltron Quiz App Prototype
Challenge
For this project, I was asked to design a Buzzfeed-style quiz app prototype for an iPhone 6+ using Adobe XD. I had to create an artboard for at least 6 pages with hot spots for all clickable information. This included an introduction or home screen, 4 pages of questions, and an end screen with a share/like feature.
Approach
Content
As a fan of the animated TV series Voltron: Legendary Defender by Dreamworks, I thought it would be fun to recreate a quiz similar to the one at the end of the The Paladin’s Handbook, a guidebook for the series. The quiz helps determine which of the Voltron Lions the reader would pilot, which I felt would translate well to the style of a Buzzfeed personality quiz.
Firstly, I began developing the content of the app by writing down the text that would be included in my prototype. Secondly, I chose a character to include on the results page and what the result would say about a person whose answers reflected that character. Thirdly, I chose which questions and the 5 answers I wanted to include. Finally, I searched for images royalty free photos to represent the quiz answers, like Buzzfeed often includes with their choices. My search also included images of the series logo, characters, and backgrounds that I could use to add branding and familiar imagery to the design.
Typography
I also researched the typography of the series because I wanted the type in the app to be consistent with the Voltron brand. My final choice was the typeface Sui Generis, which was identified in use on the Voltron website. I chose to stick with a normal font style rather than italic to avoid blocks of italic text that might create accessibility issues.
Visual Research
Both in the TV series and in the VR game, many of the navigational and messaging features of the Lions and the Castle use holographic screens. Therefore, I did some visual research on these in particular because I wanted to incorporate their aesthetic into my design for the quiz app.
After that, I sketched out some ideas for a screen asset to display the questions and the results page title. I considered which design would be most reminiscent of the series and would work well for displaying both short and long questions. Once I figured out the design for the screen asset, I had everything I needed to start defining the structure of the app. So, I sketched some wireframes of each of the pages so that I could make sure my app contained each of the necessary features in an appropriate location.
Sketches for the panel asset Wireframes of the app pages
Solution
Once I finished my wireframes, I designed the screen asset in Adobe Photoshop using transparent shapes with inner and outer glow effects. It was important to me to chose a color palette consistent with the holographic screens of the series and that would also offer enough color contrast for readability. I then used iconmonstr.com to quickly make matching social media icons. Later, I added the glow effect to the social media icons by using the features in Adobe XD.
In Adobe XD, I created an iPhone 6/7/8 Plus (414×736) design with responsive resizing. Guides helped me align button and image elements to keep everything organized. I made sure the buttons sizes were big enough to select easily on mobile devices. Then I added the hotspot interactivity for each of the buttons for the prototype to function.
Interactivity of the 1st question page Interactivity of the results page
Result
I enjoyed working in Adobe XD to create a prototype of a quiz app. Although 6 pages were created that fulfill the specifications of the project, it would be great to expand on the fidelity of this prototype by including all of the necessary pages and specific interactions that could lead to the different results. Additionally, there are some revisions I would make by adding:
- Back buttons on each page
- A button to take the quiz again on the results page
- A progress indicator so users know how many questions there are remaining
- Visual feedback on which answer is selected
Home Screen Question 1 Screen Question 2 Screen Question 3 Screen Question 4 Screen Results Screen
The final interactive prototype of the Voltron quiz app prototype:
