Otter iOS Development

API UX Design / Visual Design and Interface Design

 

Project Overview

 

Challenge: Designing a new experience on campus for college students to gain experience in their respective fields. Create an experience for students that would impact the community on college campuses. 

Solution: Created a platform that helps bridge the gap between a student and a career for both in college and after graduation. 

Team: A team of 4. UX designer, Content strategies, UX researcher, Developer

My Role: User experience design, user testing, user interface design, visual design, interaction design, digital prototyping, wireframing, user research

Technologies Used: Adobe XD, Sketch, Adobe Illustrator, Swift development, Adobe InDesign.

 

As the UX designer of the project, my main focal point of the project was UX design and to assist with the user research aspect with one of my team members. I did a lot of low-fidelity planning to make sure I understood the purpose and goals we wanted for the platform through the dashboard. From there, I moved into mapping out information architecture and creating high-fidelity mockups for the dashboard. I iterated on each of these stages and eventually crafted an interactive prototype for testing with users. Each of these pieces was also used as resources for the programming team as they built a database and API, then eventually put together the front end of the dashboard. 

 

This process is broken down in detail below, or you could scroll down to the deliverables to view the final products.

 

 

 

 

 

My Process

 

This project was a go at your own pace and come up with what you wanted for as development. The first thing as a team we did was to spend a few weeks on design sprints where we could come up with an abundance of ideas and get feedback from.

 

1st week into design thinking/sprint: For the beginning of our process as a team, we had no idea how to tackle such a broad overview of designing an impactful experience for college students. Our first approach going into the project was to come up with categories on what we wanted to work on for our challenge. Those categories were: Accessibility, Music, VR gaming, Food, Fashion, Sports, Media/Videography, etc. 

 

 

We marked the best choices with stars.

 

2nd week into design thinking/sprint: With two weeks into the design sprint and doing multiple design thinking activities as a team we still were unsure of what to tackle. 

 

3rd week into design thinking/sprint: We found it interesting that we were four students going through different stages of our college career, yet we were all facing a similar issue. That issue was being rejected from internships or not getting other job opportunities because we were told “we didn’t have enough experience.” This led us to research this issue further, to see if others are struggling in the same way that we were. 

 

 

Research Process

 

Our first approach to the research process was to conduct secondary research in identifying several sources of information to understand the challenge space. As a team, we began by conducting secondary research on existing research, and statistics regarding college work experience for respective job fields. 

 


This information, and more, began to lead us to our why. Why do we want to create an app? We noticed that some students are not gaining the experience and knowledge most employers want. The gap between graduation and their future job needs to be filled. How are we going to try to fix this issue? By creating a platform for students to gain experience by sharing services with other students based on their skills. What are we going to create? An app called Otter.

 

After understanding our challenge; or our why statement, I conducted a competitive analysis to see if there were platforms already out there.

 

Competitive analysis of 4 other apps.

 

Though we found similar apps, nothing focused specifically on students. We also felt it was important to understand the perspectives of faculty through interviewing. This led us to recognize the importance of the reflection, or storytelling, aspect of our app.  We sent out surveys to students across campus to shape our challenge and understand our user needs.”


 

Survey Information & Questions

Main content of the survey page

 

 

  • Would you use an app like this?
  • Do you feel you are gaining enough experience to get a job post-graduation?
  • If so, how are you gaining the experience
  • If not, explain
  • Do you feel you can reflect on your experiences in a meaningful way?
  • What is your major?
  • What kind of experiences are required to get a job based on your major?
  • Would you feel comfortable letting another student (that you might not know) do a task for you based on their skills?
  • Why or why not
  • Would you feel comfortable doing a task for another student based on your skills (that you might not know)?
  • Why or why not
  • Based on our description, what kind of things would you like to be able to do in this app?
  • Would you be interested in participating in other studies for this app? If so, leave your email here:
  • Do you feel students are gaining the experiences they need to get a job after graduation?

 

Link to survey graphics and responses. 

 

A big takeaway from survey responses

 

 

 

Reframe

 

Through conducting secondary research, collecting our responses from the survey we created we put everything together to narrow down our challenge. 

 

We got the opportunity to talk to experts in the educational field and were able to get feedback from them on our app. We did one particular interview with a college advisor who stated:


This emphasized to me, not only are students not gaining the experience they need, but they’re also unsure of how to reflect on that experience. 

 

The biggest takeaway: College students don’t have stories to tell interviewers and the story aspect is of vital importance to recruiters. 

I asked myself what the bigger challenge was? And came up with solutions

 

  • Opportunity for networking while gaining experience
  • A lack of real-world experience in transferable skills to meet future job requirements
  • Students exchange services and skills helping them gain experience while building a strong reputation for themselves in the community.
  • Doing simple everyday activities 
  • Internships
  • A better version of Handshake and LinkedIn

 

Ideate

 

After gathering a good amount of research, I began the ideation process for creating our app. As a team, we would meet a few hours every Sunday to plan things out and my role started with branding guidelines to wireframes to design ideas. 

 

I began thinking about how the app would work through user flow diagrams, wireframing, and basic team brainstorming during our meetings. I started with a user flow diagram to understand the flow of the users throughout the app. Thus, developed our first wireframes.

 

 

Lo-fi wireframe of the design ideation

 

As you can tell by the journal pictures, the process was a bit messy, and a bit all over the place. I would find myself getting lost in the smallest parts of the app, such as what colors to implement. But, thankfully, those issues were quickly resolved through guerilla research. 

 

Design Process

 

Before conducting lo-fi mockups I began with creating a branding style guide. This was important because it helped us understand our mission as a team, audience, the voice we wanted to initiate, and typography and color palette. This also helped with prototyping later. 

 

 

The next step was for me to develop our first app mockups using lo-fidelity wireframes and the brand standards established, to better understand what the app interface would look like and how it would function. I created the key interfaces, dashboard, messaging center, and profile. We wanted to keep the interface as simple and familiar as possible to allow users to easily navigate through the app. The name “Otter” came from the idea that we wanted a social app, where students can interact and help one another. Otters are known for being extremely social animals. The name is friendly, while not being completely straightforward. 

 

 

Design Mockups

After the login, the user will be taken to the dashboard. In the dashboard, the user can either scroll through posts from other students looking for specific tasks to be completed that might fit their skillset or the type of experience they want to gain, or they can make a post, requesting a task to be completed for another student to find.  Next, they can go to the messaging center. This is where they will find all of their messages with past students, or be able to start a new conversation. Then, a student can view their profile. Their profile holds all of the information from their skillset and major, the work they’ve completed, and their past reflection on their work. 

 

The design process used was an agile design process by going from ideation to designing to user testing and getting feedback, then to ideation again. The user testing was done with a high fidelity interactive prototype made on Figma. I created a usability protocol to increase usability throughout the app. 

 

Test

 

To test the usability of our prototype, I conducted a usability protocol. The usability protocol objective was to understand if the user flow of the app is what we expected. To understand the complexity of how the app would work and what content it encompassed. This was the questions asked:

 

Image of user testing

​

  • Are there things that we are missing in the design that needed to be there? 
  • Do the headings make sense? 
  • Are users able to quickly and easily locate information?
  • Where would you go to send someone a message?
  • Where would you go to get back to the posts (dashboard/timeline)?
  • Where would you go to find your work experience?
  • How do you find your skills?
  • Where do you find your major?
  • Where would you go to submit a post to the dashboard?


 

Test Results

 

Participant 1: Found everything almost immediately. The only trouble was finding the skills (stayed on the profile but moved between work and about)

 

Participant 2:  Questioned if the messaging center was for receiving messages and sending new messages. Thought Otter was obvious for home/dash. Took a second to find skills but knew it was on profile. Had a hard time finding a major, went between all nav items before finding one profile (looked through before looking on top.) 

 

Takeaways: Rename about/work on the profile section because there were questions about what work might mean. Add a button for writing a message and submitting a post. Should we change where the major is?

 

Participant 3: Found everything intuitive except the very last question. They were unsure where to go to create a post, but looking in the correct place for it. Found the “plus” button a bit too discrete, would like to know more information about the button, and draw more attention to the button and its function. 

 

Participant 4: Found everything first, tried no hesitation, questioned the reflection aspect. 

 

Participant 5: Found everything within a few seconds. Knew exactly what pages everything would be on. 

 

Throughout these different iterations of usability testing, it was clear that most users were able to navigate through our app without difficulty. But, it was identified that there were a few places where the app could be improved. We realized that there needed to be more emphasis on where to post a job to the dashboard, and how work is displayed in the profile. It also sparked a conversation about how to best label the profile page navigation. 

 

Deliverable Video

 

Below is a hi-fidelity of the onboarding app experience and a video of interacting with the UI of the app.