Spiked Ice - User Interface
Problem
In my Intermediate Graphic Design class, we were tasked with designing a fictional company's mobile application. After creating another company with four other University of Central Florida students, I was assigned Spiked Ice for my personal design project.
This is the client's brief, made by a group of UCF students posing as the company, Spiked Ice. This fictional company serves alcoholic milkshakes catered towards a youthful crowd.
This is the style guide, created in another assignment by another student of UCF. The main goal of this assignment was to stick to the brand's guidelines while designing.
Solution
Information Architecture Map
I started the project with a flow chart of how the user would interact with the application. This method made sure that I included all the information the company provided on the brief, when I started mock-ups.
Mid-Fidelity Wireframes
I decided to skip to mid-fidelity wireframes, using the brand created by another student as a design compass. This was due to the time constraints on the assignment, as well as the luxury of having a complete style guide from the start of the project. After this step, I sought approval and advice from the company and moved to a high-fidelity prototype, shown below.
This prototype satisfied the stakeholder's requirements, however I still had one more week to improve the design. I took suggestions from the user tests I conducted by watching three people interact with the demo. I discovered that visibility was an issue on the home page, and navigation options weren't consistent, which confused two of the three testers. After improving the design one final time, here are my finished high fidelity mock-ups:
Outcome
This project was setup to help students see what it's like to be both a client and a designer, with the ultimate intention of creating empathetic designers. I found that most of my struggles related to obtaining the right information from my client. Since I was able to meet the company three times; I was able to split the work using the 30-60-90 Principle. By presenting the layout and information architecture in the first meeting, I confirmed the foundation of the design; the second meeting allowed me to present a basic prototype(using Adobe XD); in the third meeting, I presented the complete product design, and noted final adjustments as I conducted stakeholder/user tests.
