Otter App Image Mockups "Welcome  to Otter" text

Otter

App Design

An app designed to support students in gaining professional experiences.

My goal was to work with a cross-disciplinary team of students to identify a problem and design an app as a solution, focusing on user needs and developing skills in design and programming best practices
Skills Used:
User Experience Design
User Interface Design
Competitive Analysis
Accessibility Audit
Usability Testing

Information Architecture
Discovery and Research
Visual Design
Wireframing
Prototyping
Sticky note design thinking activity
Design-thinking activities used to identify our challenge the focus of our app
Brainstorming
As a project team, we began brainstorming our challenge. After partaking in a few design-thinking activities, we uncovered a problem that we could all relate on:
University students are not gaining enough experience to get an entry-level position after graduation.
We then explored a solution to this problem by creating a platform for students to complete jobs for other students based on their skill sets. This would mutually benefit the students, helping one gain professional experience while helping the other complete a task or project.
Research
Our team engaged in research to ensure that our app would be a valuable asset to our audience.
The research process included:
  • Completing a competitive analysis to identify strengths and weaknesses in products offering similar services.
  • Researching for information and statistics about the undergraduate student experience from credible sources.
  • Conducting a survey with over 30 MSU students to gain a basic understanding of our audience’s needs.
  • Conducting interviews with MSU faculty members.
“Considering I’ve been applying to jobs since July and have only gotten three interviews and no call backs it seems employers don’t value in-class work as much as the MSU professors say they will…”
-Survey Participant
Screenshot from the Otter Competitive Analysis
Preliminary user research including a user survey and competitive analysis
Otter user flow diagram
User flow showing the journey of finding a job within the Otter application
Design
The next step of the design process was to create user flow diagrams to fully articulate how the user would navigate the application. During this step, our team was able to gain a better understanding of the elements, interfaces, and functions that would need to be incorporated.
We then created low-fidelity wireframes and creating a brand identity. To ensure our designs were cohesive and consistent, we created a style guide and were sure to seek out user feedback on both the aesthetic and function of the app early on in the process.
As the app design developed and went through an iteration process, our team conducted usability testing through Figma to reveal problems and ensure effective interactions between the app elements.
Otter App Mockups: Messages, Profile,  and Home
High-fidelity mockups of app interfaces
From left to right: Messages, profile, home feed
Lessons Learned:
  • Users will decide if they want to use your app within the first 10 seconds of opening; it is important to make a strong first impression.
  • When working in a cross-disciplinary team it is important to explain your processes and decisions using terms that can be understood by everyone involved.