Otter App Image Mockups "Welcome  to Otter" text

Otter

App Design

sUMMARY
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. This led to the creation of Otter; An app designed to support students in gaining professional experiences.
PROJECT DESCRIPTION
Client
Michigan State University
Role
User Experience and Visual Designer
Contribution
User Experience Design
User Interface Design
Competitive Analysis
Accessibility Audit
Usability Testing
Project Management
Information Architecture
Discovery and Research
Visual Design
Wireframing
Prototyping
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.
Sticky note design thinking activity
Design-thinking activities used to identify our challenge the focus of our app
Screenshot from the Otter Competitive Analysis
Preliminary user research including a user survey and competitive analysis
Research
Our team engaged in research to ensure that our app would be a valuable asset to our audience.
Research process
  • 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 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
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 user flow diagram
User flow showing the journey of finding a job within the Otter application
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.