Errandly

Timeline
Areas
Collaborators
Tools
15 weeks
Sep 2023 - Dec 2023
Market Research
UI/UX Wireframing & Prototyping
Full-Stack Development
Agile Methodology
Esther Bae
Clarice Du
Julia Graham
SwiftUI (XCode), GitHub, Firebase
Figma, Procreate, iMovie
Slack, Trello

Errandly is a mobile marketplace for college students to post and fulfill daily errands with their peers.

Project Overview

My team conceived Errandly as part of a mobile app development competition sponsored by Capital One, where the challenge was to build an app from scratch over a 15 week period (6 sprints).

Errandly simplifies the lives of busy college students by providing a marketplace for students to post and fulfill errands. Whether you need someone to help you move into your dorm, petsit your cat over winter break, or help with any other task, Errandly connects you with trusted peers who are ready to assist.
My Contributions
I took on various hats in the design and development of our app. I was primarily responsible for designing the UX/UI flow, visual identity, and branding.

I also contributed to the code development of Errandly's features in SwiftUI, polishing the views and logic, and I designed various marketing artifacts: a cel-animated commercial (see above video) and brand poster (see at the end of case study) conveying our application features.
Errandly screens with slogan.
GIF for Errandly post requests.
GIF for Errandly pick up requests.
Users can describe what they need to get done by posting a new errand to the marketplace. They are able to share extra details or requirements, mark a preferred date that the errand needs to be finished by, and offer transactions for your errand runner.

To help other students find their errand request, users also have the option of adding their location and/or subject tags to their post.
Get compensated for lending a helping hand. In the marketplace, users can find various errands from local students, and view errand details to pick up errands that match your schedule and resources.
Post Errand Requests
Run Errands for Other Students
Sort and Filter Errands
Search, filter, and sort for available errands. Users can order by time and due date, or look for specific errands based on title or tags.

Users can also sort errands by the distance the errands are away from them, simply by optionally enabling the app to use their iPhone location.
GIF for errand sortingGIF for errand filtering

Other Features Include:

Secure Payments with Apple Pay

A simple and efficient transaction system for users to receive compensation for helping with an errand, or to pay an errand runner through Apple Pay.

Message Users with iMessage Redirection

Connect with other students through text. User can find those who are ready to assist or seeking help, and stay connected throughout the process.

Customize Profile & Check Errand Histories

Log in with your Google account and keep track of your history: which errands you’ve posted and picked up, which are in progress or complete.

1.

Problem
Pixel arrow pointing downwards.

2.

Research
Pixel arrow pointing downwards.

3.

Prototypes
Pixel arrow pointing downwards.

4.

Development
Pixel arrow pointing downwards.

5.

Reflection
1. Problem Space
For college students, it’s difficult adjusting to and balancing adulting and college.
Coming into college and their adulthood, students are often on their own for the first time in their life and face a drastic increase in individual responsibilities. Standard tasks such as moving apartments, grabbing food and supplies, or taking care of a pet can be made complicated if students don't have a car or travel often.

We explored the problem space more by interviewing real students. To understand pain points, we surveyed 35 students on college-specific chores they've needed another hand to help with. The 6 most common errands that students have needed outside help to complete with are shown below:
Through interviews, we also found that certain student demographics may not have the resources, time, or community support to get their errands done in a convenient or efficient manner. Specifically, freshmen, international students, and out-of-state students come into a new environment and may struggle to find help.
"“As an international student in a new country who doesn’t know anyone well yet, it’s sometimes hard to find someone who can help [with errands].”
“I have difficulty with any task that requires transportation, because I don’t have a car at university. Things like carrying a lot of groceries, moving in, or storing my items over the summer. I always have to ask around and hope a friend can help me with them.”
2. Market Research
Our competitive analysis of existing applications showed us that other existing task-related apps were either too broad or general.

3. Wireframing, Prototyping, and APIs
A live prototype of our wireframes can be found here.
We brainstormed early screens of what features and functions our app should include. For example, I created a preliminary app example called NexTask, below, with a very basic onboarding and a three page menu layout including a marketplace, post form, and profile.
We then identified which features to prioritize. For example, from the brainstorming above, we took and iterated upon the idea of adding tags to each errand in order to easily find ones relevant to the user. From other brainstorming wireframes we decided upon ideas like having a search bar, and being able to view the errands you've posted and picked up in your profile.
After developing a set of low-fidelity wireframes, we conducted 5 user tests to see what features users thought were the most useful and which they liked. From those, we learned that the most important aspects of the app was that we needed to refine was the terminology used (ex: “request”, “expired”, “market”, etc.) for user clarity, as well as refine the flow for picking up an errand (i.e. the difference between the “contact poster” and “pick up” buttons). Each piece of feedback, if it was determined to be relevant to our MVP, was then used to guide consolidation for high-fidelity wireframes.

With these insights, we developed hi-fi wireframes:
Using these wireframes, we:

1. Built an interactive prototype which you can explore here.
2. Tested users on the prototype
3. Tested our information flow with our APIs, which we then set up in Firebase and Apple.

We also explored smaller changes to our app's visual identity, and UI indications to personalize the app experience. For example, after exploring ways to visually differentiate the errand tags without making the tags too distracting, we chose to implement our tag system with emojis in the real application.  
4. Developing the App
In the first version of our app, we focused on developing our main features, and making sure users would be able to login with their Google account, post an errand to the marketplace, view other users as well as errands details, and other simple CRUD features like editing their profile or deleting an errand.

App assets (such as the icon, logo, and launch page shown below) were imported in app during our development of version 2, where we polished our application to completion.
During our transition period between app version 1 and 2, we conducted user tests on the first version to refine the features we added next. For one, we found that our app was very slow and laggy when deployed on real phones, so we knew to focus on improving the performance of our app and refactoring our code.

On version 2 of our app, we integrated our API work: users could now get their current location using CoreLocation, message other users in iMessage with an external redirection, and pay errand runners with Apple Pay. We also included more nice-to-have features such as an onboarding tutorial for new users, debugged various visual inconsistencies that our user testers found from version 1, and guaranteed users could have more immediate feedback when pressing buttons and navigating through our app.

Our development documentation for Errandly is found here.
Errandly poster
5. Reflections
This was my first time developing within the mindset and scope of an iOS mobile app, so building Errandly from idea to conception was a new and exciting avenue for me.

To the left is the poster I designed for the competition app fair. While we did not take first prize in the competition, I learned so much about my own skills and limits in development. Before this project, I was unconfident in my programming knowledge, and thought it might be better for me to stick to working in Figma. However, in building our app in Swift, I learned how to patiently problem-solve and debug when encountering issues, and ultimately deliver the UI that we needed. I now understand the designer versus developer memes that are created, and I can appreciate the work of both much better from personal experience.

I was also reminded of the fruitfulness of working in a group; I believe my team was able to really come together and we could leverage all of our differing backgrounds (with teammates who had more CS-heavy or PM-heavy skills) in a way that balanced our strengths together very well.
Back to UI/UX
Street Typer