Overview

My role: UI Designer

Deliverables: Mood board, Sketches, Wireframes, and Hi-fi prototype

Timeline: 2 weeks

Problem

The company Phil already had the UX research as well as the wireframes for a website. What they needed was a mobile UI design to be created that was similar to their inspiration for the web app.

Brief:

• How can users find activities they want to go to? (The app helps them find a local activity to attend).

• How can users be more engaged with the app? (The app provides personalized information that makes it more relevant to them, as well as more interactive and fun).

• How can users feel that they have control over what they see on the app? (The app gives them control over their app preferences).

Audience

Individuals who are looking for something fun and new to do in their local area, aging around 21-50 years old.

Solution

I analyzed the competitive analysis that was given and what elements were implemented into the web app version of Phil. Moving forward, the approach I took was friendly and playful, with also a bold, modern user interface. Because the web app was already simple, I wanted to mimic that in the mobile version.

Process

Mood board

I found various images on Unsplash that represented what Phil wanted for the inspiration of the mobile UI design. As mentioned earlier, I was moving towards more of a friendly, fun, and modern theme especially throughout the animation and colors that were chosen.

Sketches

Here you’ll see what I had originally envisioned for the UI of Phil. Something that inspired me through the process is images I had found off of Dribble that also showed elements of machine learning. Something that is currently on the market in apps is a location tracker. This helps better the experience for the user by allowing accurate events to show up near them.

Wireframe

Branching off just a bit from the wireframes, I explored more into machine learning. I believe that for this project, I was really pushing to make the AI known, especially within the onboarding process. For example, I wanted the animated figure of Phil to pop in and say hi to the user before proceeding to sign up or sign in. Typically, for UI design, AI is becoming more familiar with users and I think it’s important to have it as it’s pretty current on the market. You can also see I have Phil pop up on the homepage as well, in case the user had a question there would be a live chat bot to help.

Prototype

Finally, we’re getting into the Hi-fidelity prototype for Phil! The typography was kept simple, Opens Sans all the way. The choice in the color palette seemed appropriate for the theme of a friendly, playful, simple app. For the onboarding process, I chose to stick with 3 easy steps 1) Decide to do a 7-day trial or subscribe 2) Select at least 3 topics that interest you 3) Allow locations. From there, the user has a confirmation that the process has gone through and they are on their way to the homepage.

Hi-fi prototype

Interesting spin: Originally, I had played around with how to go about the checkout process and what could be the most intuitive way for a user to complete the process before an event. I thought about a simple add to cart, insert payment, and boom the order is complete. Now, let’s take a massive turn in the topic — when you board an airplane nowadays, usually your ticket is on your phone, they scan it and you’re good to go! After doing some research on other apps on Dribble that have implemented this method into a checkout process, I thought it was pure genius to move forward with the idea (whoever invented the barcode scanner method, kudos to you it’s been bliss).

Guerilla Testing

For this project, I explored new ways to test my design. I conducted guerilla testing at a small cafe near my home and also did a couple of remote & scheduled tests via Zoom. Because this project was rather quick, I found this method to be the most efficient way to gather feedback. Guerilla testing is a relatively fast and informal way to test ideas, gather quality feedback, and uncover potential user experience problems. I’d also like to note that a majority of the test users found the UI to be easy to navigate and graphically pleasing. From the user testing, here are the key takeaways:

1. The interactive map seemed to be like a filler for the screen, many questioned what was the use for it? (Solution: Add location markers on the map to indicate any events nearby, add color-correlation to the marker and the event).

2. For the discover screen, there was no place for the user to go back and edit their chosen categories (Solution: Add a way to go back and edit the categories, an icon that is familiar and easy to spot).

3. The end screen with the barcode scanner had some of the elements that were difficult to see (Solution: Enlarged the font size to 16pt and the exit button to 40x40).