Get your food fast when the line is long — a UX/UI case study
By: Becci Williamson
Tags: User Experience, Case Study, UI, UX Design, UI Design

In the third iteration of our design, we resolved the friction points we observed in users by:

Changing the words on the requester’s home screen from “Restaurants Near You” to “LinePals Near You” to clarify what the person icon and numbers meant next to restaurants.

Getting rid of a button that would lead users away from the status screen and making the text telling them they would receive a notification when their order was accepted more noticeable.

Changing the word “orders” to “status” on the bottom navigation to make it a more accurate description of where the user would go when tapping that option.

Adding preset tip amounts and a preselected method of payment to the food request screen to reduce the user’s cognitive load.

To reduce the cognitive load required of users on the food request screen, I had the app automatically choose the user’s default method of payment they’d selected at account set-up. I also added buttons the user can tap to add a preset tip amount.

App Demo

This demo is of the side of the app a person would use when adding food to their order for someone.

This demo is of the side of the app a person would use when making a food request.

Final Design

Since our team would be submitting LinePal to the App Store, I did a lot of research on Apple’s Human Interface Guidelines (HIG). We used HIG UI components and made sure we complied with the guidelines on how the app should look, feel & function.

The Style Guide helped our developers know the specifics of how we wanted the app to look.

Style Guide

Our research gave us a specific idea of how we wanted LinePal to feel to our users. Because we were asking strangers to connect, we wanted it to feel friendly. Because we didn’t want to add to the stress of ordering our users felt, we wanted it to feel pleasant and simple.

We achieved the feeling we wanted by using circles and rounded rectangles which are happier and more bubbly than sharp corners. We also chose colors that are vibrant enough to be playful and happy, but not so stark that they’re jarring. Each side of the interface had it’s own distinct color so it would be obvious what side the user is on.

To keep things visually simple & consistent, we used Apple’s SF Compact Display typeface for all the text in the app except the logo. We created a visual hierarchy by using different font sizes and weights.

I created a style guide for our Developers so they would have all the design information they needed while coding the app.

COVID-19 — Working Remotely

A couple of weeks into our project we got word we would be switching to a mandatory remote environment and living under a stay at home order. There was so much uncertainty about everything — our project, our personal lives, the world. At the beginning of our project, our team was made of one Project Manager, two UX Designers, two iOS Developers, and three Quality Assurance Engineers. Due to issues surrounding the COVID-19 stay at home order, we lost one Dev and two QAs by the end of the project.

Working remotely added extra stress and complexity to work life, but it also taught me a lot of beneficial things. Finding ways to communicate effectively, work collaboratively, get organized, and stay motivated were the main issues I overcame.

It was a lot easier to communicate as a team and within my department when we were in the same building. To keep communication lines open, we used Slack, Discord voice and text channels, GoToMeeting, Zoom, Google Hangouts, and texting. Some people’s computers had issues screen sharing or getting the mics to work with different platforms, so we had to be persistent in figuring out what would work depending on what team members were involved in the meeting. Some people would respond promptly using one platform, but not another, so I had to figure out what was the best way to get in touch with specific individuals. I communicated closely and often with our developer to get her the information she needed in the format that would be most helpful.

To work collaboratively, we used Google Drive, InVision, Miro, Jira, screen sharing, screenshots and sending many Sketch files back and forth.

A good old-fashioned paper planner, lots of list-making and the timer on my phone were essential in keeping me organized.

There were several times when my design partner struggled to stay motivated. He missed several meetings and would often not respond to messages. I kept moving forward on our responsibilities without him when he was struggling, but it made it hard for me to stay motivated as well. I discovered that voice chats with screen sharing at specific times, and reminding him with text messages were the most effective ways of working with him. I also learned that chatting with friends, playing online games in our department, and setting boundaries for when I would and wouldn’t work helped keep me and other people motivated to keep working.

Agile Environment

Each week, our team had a sprint planning meeting on Monday, a retrospective on Friday, and short stand-ups every morning to report on daily progress. Our project manager kept track of all our tasks on a Jira board. These meetings were helpful to make sure we had a good understanding of how each team member fit into the success of our app. After we went to a remote work environment, staying organized was even more important. Our sprints helped us stay on top of our responsibilities, be accountable to each other, and flexible enough to see areas we could step in and help other team members or alter our pace.

Lessons Learned

Each UX project helps me realize more of what works and doesn’t work in my design process. There were a few things I experimented with when working on LinePal that I would do differently on future projects.

Recording Usability Tests

In past design projects, I’ve recorded my usability tests. With LinePal, I chose to try taking detailed notes instead. I definitely prefer having recorded sessions and will go back to that in the future. Recording tests helps me be more present with the user as I’m doing the test. I’m able to pick up different things every time I watch the recordings. When defending my design decisions, it’s also more impactful to be able to show bits of the recordings as evidence instead of just explaining what the user said or did.

Better Use of Low-Fidelity Designs

Because our initial research indicated we needed to switch directions from our first idea, we felt rushed for time. My partner and I spent less time figuring out designs and flow in wireframing, and our first Sketch designs were more like mid-fidelity than low-fidelity. We thought that would save us time. Looking back, it would have saved time and helped us have a better design if we spent more time figuring things out with wireframes and lo-fi designs before moving on to higher fidelity designs.

Inspiration from Senior Designer

When I was all but finished with my hi-fi mock-ups, I had the opportunity to get feedback on them from a Senior UX Director at a local company. The date for me to hand my designs over to the developers was too close to be able to change very many things based on his feedback, but my visit with him was inspiring. I want to keep learning and practicing so I can notice potential design improvements as quickly as he did. I’m currently improving my knowledge base by studying heuristics and reading “Don’t Make Me Think” by Steve Krug.

One of the reasons I love UX so much is because I get the chance to learn about new topics and human behavior with every project. This particular project gave me more opportunities to learn than normal — first due to having to change directions dramatically in the early stages of the project and then because of the once in a millennia experience of working through a world disrupting pandemic. The most important thing I learned is that there are so many creative ways to solve problems. I’m excited to keep getting more experience in UX/UI Design so I can get better at bringing more helpful solutions to the world.