We started the first step in the process by answering the 5 W questions according to the design prompt given.

The next step was conducting a quick competitor analysis to determine the pros and cons of other similar apps and sites. From there, we created user stories to better understand our users’ needs and goals.

Our main takeaways from this stage included:
1.   Information needs to be digestible
2.   Information should be supported by real and engaging pictures and videos
3.   Information should be presented in various ways and interactive tasks should be included to promote different modes of learning
4.   Saving and sharing features should be included to encourage and allow users to spread their knowledge
5.   Navigation should be simple and intuitive

Our competitor analysis and user stories helped us  determine the essential features the app would need to make it successful and useful. We also created a user flow diagram to map out these features and see what kind of screens would be necessary for the app.

Next, we sketched low-fidelity wireframes with pencil and paper. After we agreed on the general layouts of our screens, we turned to Adobe XD for our mid-fidelity wireframes. As this was a collaborative project, we created a shared file where we could work on the same file at the same time. Before we started wireframing, we decided to apply a 12-column grid to create an organized and consistent look throughout our screens.

In our shared Adobe XD file, we compiled all of our components, colors, icons, and typefaces in the Styles page of the file. This later helped us build a style guide to show and instruct others on our final choices for all user interface aspects.

We continued to use Adobe XD to create the high-fidelity wireframes and an interactive prototype. We also used Adobe XD’s auto-animate feature to make the app more fun and engaging for our users. We incorporated as many interactions and animations as we could, while making sure that they made sense in the overall flow and were not distracting or disruptive to the experience.

While we were not selected as finalists in the competition, our ambitious timeline paid off when we were awarded 6 free months of Adobe Creative Cloud for being one of the first 100 teams to submit a qualifying project.

During this project, I was able to explore the collaborating and auto-animate features of Adobe XD. As my first team project, it was exciting to experience the collaborating features firsthand.

As for next steps, I would like to add more auto-animate features, such as speech playback, to make the app even more appealing. I would then conduct usability tests to validate concept so far. It would be important to find out if the app’s flows and visual design resonate with users or not. I would also like to see where there are areas of improvement as continuous iterations are an integral part of the design process.