Espresso a study tool (codelabs)

Role:

- Team UX Designer

- Team UI Researcher


Timeline:

Professional Project Fall 2023 - Spring 2024 (estimated 3 quarter completion)


Overview:

A new take on a studying application for students consisting of both mobile ​and desktop executions.


PROBLEM:

Students have barely any free studying ​resources that can help them with their ​academics.

- Quizlet, a main resource for students is now paywalled ​and is not practical option for students to pay for

- Many free study tools are outdated and difficult to ​navigate/use, for example Anki, a free study tool has not ​been updated in years

- Students need a way to study that keeps up with modern ​university technology, along with providing them easy ​navigational and organization options

RESEARCH:

The most efficient way to study for ​everyone.

Our team used a variety of researching methods to be able to best understand what students need most from a ​studying tool.

- Our main pain points surrounded paywalls and ​the learning about the engagement levels of study ​tool users

- We focused early research on color theory. This ​helped us integrate a reward system for users, ex: ​we learned the color green is perceived by users ​as doing well/improving

- Interviews included my team researching different ​study methods from a variety of majors. This allowed ​our team to thoroughly learn about how different ​majors used different study tactics

RESEARCH SUMMARY & SOLUTIONS:

Our main goals surrounded removing a ​paywall and making an engaging study ​application.

- Branding and a theme would have to be ​essential, keeping users engaged while studying ​was incredibly crucial.

- Different types of studying, not everyone ​studies the same, implementing variation allows ​for more students to utilize this application.

- Streamline and simple, users want to be able to study ​efficiently, while engagement is important so is clarity on ​features and functions.

LOW FIDELITY WIREFRAMES:

- Challenges:

Designing a homepage that prioritized google sign ​instead of the traditional user name and password.

- Resolution:

Our design team learned how to let go of designs we ​personally really liked for the practicality of the ​developer team

This design is what as a team we thought was ​best to work with in further stages regarding ​our home page

Old home page screens we scrapped, ​however still took inspiration from later on ​during the project.

MID FIDELITY WIREFRAMES:

- Challenges:

Tackling the features we wanted to add and being hit with the reality that there ​was a lot to do.

- Resolution:

Developers and designers both realized this project was going to take a lot, the ​best solution was breaking it down step by step and helping each other out.

Home page improvements, finalizing placements of ​icons and starting branding

Landing page mid fi, laying down ​placements and content.

FLASH CARD PAGE EVOLUTION:

- Challenges:

As this project moved further along our greatest design challenge was also the core of our project, ​the flashcard page. It felt like we were throwing ideas out constantly and nothing was sticking, a truly ​frustrating process for the team.

- Resolution:

Combine what you like, we realized many of our iterations had small features we really resonated with. ​As we tried more and more ideas our flash card page became a combination of everything we liked ​from previous designs. Creating the perfect balance between usability and aesthetic.

What we ended up finalizing after a lot of testing ​and designing.

Other page iterations our final incorporated.

SMART STUDY FEATURES:

- Challenges:

With our project concluding we faced one final challenge, which was making our final pages and tools, ​as stated earlier we wanted to be inclusive with different study methods, so how do we do that with ​flash cards?

- Resolution:

Smart study features, for our final wireframes and tasks we implemented smart studying features, ​which allowed users to toggle between space repetition studying and normal flash card quick ​studying.

Spaced Repetition feature

Quick Study feature

High Fidelity Wireframe:

All finalized screens produced in this project.

REFLECTIONS:

Letting Go: While us designers were absolutely in love with some of the designs we made they just wre not ​practical to keep in the project as we progressed. Learning to let go for the better usability was something ​we were taught during this project.

Deadlines: Working with a team of designers and coder we needed to have this project completely ​coded and running by the end of the school year, this really helped us designers learn about staying on ​track and making sure deadlines were met so developers could also complete their tasks in a timely ​manner.