RESEARCH FINDINGS
To gain a better understanding of who we were designing for and the type of problems they were facing, we did user research in the form of interviews and a competitive analysis.
From our user research, we found that a lot of our users only heard about the secondary educational resources that were offered by word of mouth. We saw this as an issue because word of mouth isn’t always reliable in getting the information out to everybody who might want it. For those who did hear about resources like the Center for Learning and Undergraduate Enrichment (CLUE), they still found it hard to make study buddies. These were the two main problems that we wanted to address in our solution.
To get an idea of some of the current solutions for the problems that we found, we conducted a competitive analysis.
Using the information we collected from our user research we made an affinity diagram to group similar findings to create our personas.
PERSONAS
Based on our user research, we started drafting our user personas. When we finished our first draft, we sought out critique from our classmates and some of the comments we received were questions regarding why we were so fixated on CLUE. This was a mistake on our part because we weren’t focusing on the root problem for our users. We should have focused on WHY our users were attending CLUE and not the underlying problems with CLUE.
Once we had a better understanding of our users, we created our polished personas to use as a reference point for when we need a reminder of WHO we were designing for. Our persona included information regarding what our users goals, desires, and pains were, as well as a scenario of a typical day for one of our users. This helped us create a user journey map for a typical scenario of one of our users.
USER JOURNEY MAP
From the information we gathered from the polished personas we created our user journey map. The journey map helped us visualize the experiences our users have when interacting with a product or service so that we could evaluate and improve each moment. Through the journey maps, we were able to see the different emotions our users felt throughout their experience with taking a midterm exam. Overall, the journey map gave us a better understanding of who we are designing for and helped us see ways we could improve our users’ experience when making our design requirements.
DESIGN REQUIREMENTS
By identifying the emotions a user felt when going through exams and other pain points, we were able to create our design requirements. Design requirements are simple sentences that describe what our personas require to accomplish their goals. Some of our design requirements include:
- Allow users to log in and all of their registered classes for that quarter will appear
- Allows users to receive help by getting their questions answered for a class
- Provides each user with feedback on their performance trends in class based on the number of .. .study sessions attended
- Allows users to anonymously submit questions about course material
​
Our design requirements helped us generate a storyboard of how some of our design requirements might look in its given context.
SITEMAP
This is the introduction to your project. It’s where you offer an overview of the main ideas you’ll be presenting. Begin by outlining the topic you’ve chosen, and then continue by explaining your specific point of view or argument. Your introduction is the hook to engage your audience so make sure yours is clear, concise and focused.
STORYBOARDS
Through our storyboards, we were able to convey current experiences that our users may have and evaluate the contexts of our new ideas. When creating the storyboards, each of us created our own and came up with two different scenarios. One of them was hand-drawn and the other was created with images. While one scenario focused on a specific interaction within our application, the other was more focused on the context and use. Through the process of sketching specific uses of our storyboards, we were able to be more prepared when it came to thinking about the entire flow of our system. The storyboards we made helped us in designing and conveying a positive user experience.
SITEMAP
After going through a few scenarios of our users interacting with our app, we created a sitemap. A sitemap is a visual diagram of all of the possible ways a user could navigate within our app. Having a visual layout of this helped us easily figure out what screens would need to be created when building our paper prototypes.
PAPER PROTOTYPE
Using our sitemap as a guideline, we generated a few key scenarios that one of our users might go through when using our app in the form of a paper prototype. We started with paper prototyping because it was a quick way to get our ideas out there. The key scenarios we chose were “finding a secondary educational help resource (as displayed below)”, “finding a study buddy using the ‘connect’ feature”, and “utilizing the ‘to-do’ feature to help our users stay on task.” Once we completed our paper prototypes, we went out to conduct user testing to see what was working and what could be improved with our designs.
USER TESTING
From our post-task questions and observations, we found that one of the biggest strengths of our app and task flow was that it was intuitive. For the most part, our users were able to quickly navigate through our app and complete our assigned tasks. A lot of the quick decisions from our users come from the fact that our navigation and signifiers includes intuitive text. One of the main task flows, find a secondary educational help resource, is information-heavy so there aren’t a lot of confusing buttons that would hinder our users from completing the task.
ANNOTATED WIREFRAMES
The information we gathered from our usability testing, helped us identify key design issues we needed to improve in our next iterations. Using Adobe XD, we began bringing our entire system to life based on our research findings, information architecture, and paper prototypes in mind. These wireframes were created as low fidelity mockups, with little to no color and space holders in place for user-generated content. After creating the entire application, we annotated each screen and explained our key functionality and explicitly stated the reason behind each choice. Through this process, we were able to focus and think about each intention that came from each element. After finishing our annotated wireframes, we were able to receive feedback, which guided us in the right direction when making our high fidelity mockups.
HIGH-FIDELITY MOCKUP
From the User Centered Design Process, our last step was creating high fidelity mockups. We turned a few of our low fidelity wireframes into better-improved screens after having an in-class peer review session. We were able to solidify our icons, layout, and color scheme with the constructive criticism and feedback we received. The high fidelity mockups allowed us to put all of our well thought out ideas together and showcase it in a professional manner.
REFLECTION
For us, A+ was one of our biggest accomplishments we achieved so far as designers and we are extremely pleased with our outcome. We worked together for at least ten hours a week, where we learned firsthand the skills of proper team communication, efficiency along with ebbs and flows of creative friction.
If we had more time, we’d simplify. Towards the end of our design process, we realized the potential of our app and developed it in all sorts of directions. After bringing an even greater wave of functionality to our app only brought more complexity, and in today’s society, simplicity is the key to efficiency.