Classroom Markets:

A UI/UX Overhaul
















My Roles: Lead UI/UX Designer, Front-end Developer

If you’re interested, read the full case study here



CONTEXT


ClassroomMarkets is an educational tool that allows students to simulate a stock market with extra credit points.

CRM wasn’t very popular; conceived by a professor and executed by a software developer, the app was functional but students weren’t compelled to use it. 






We had to gamify the platform beyond its barebones function and discover what students truly seek from their digital experiences.





USER RESEARCH


Social Media Survey

We asked students from our networks three simple questions about their mobile app usage:

  1. What are the most frequently used apps on your phone (List 3+)?
  2. Why do you think you use these apps the most?
  3. What factors deter you from using an app frequently? (ie. think of a 'bad app' you've used– what makes it unappealing?)





  • Students’ most-used apps were (unsurprisingly): Instagram, Facebook, and Snapchat
  • Ugly UI is a big turnoff in using an app: “clunky”, “blocky” “hard to navigate”

Social Media User Interviews

Next, we conducted user interviews to gain more depth in understanding student perspectives. 

  • Students enjoy scrollable platforms (ie. Snapchat, Pinterest)
  • Social interactivity is a big motivator

Consider– Classroom Markets!

We asked students if they would use CRM in a Econ 101 class. 

  • The portal would have to be “super user friendly” 
  • Students want to see bright colors and eye-catching graphics.
  • Main usage would be the night before an assignment was due (relatable)







STORYBOARDING


We mapped out personas, user journeys, and early wireframes. 







GOALS + OBJECTIVES



⭐️


Create an easy to use platform for students drawing inspiration from social media

⭐️⭐️


Restructure information architecture, simplify user experience

⭐️⭐️⭐️


Develop a visually consistent brand for the web experience





INFORMATION ARCHITECTURE









FINAL UI







Click through the final design prototype below, or check out the site here!   







CONCLUSIONS + KEY TAKEAWAYS


  • The importance of & how to communicate with a team consisting of fellow designers and developers (just one of each, in this case)

  • You are not your audience. Although I was also a student at the time of this project’s conception, it was not enough to simply design this app based on my own wants and needs. Collecting user data proved to be immensely valuable, as people continually surprise you with their insights. 

  • It is important to understand broadly who you’re designing for & what goals you’re trying to accomplish– and equally as important to understand granullarly what this means in terms of information flow and microinteractions.