ribot Popup Marketplace app:
iOS Mobile Design
Overview
What is the ribot Pop-pup Marketplace app ?
This project is an app for the design studio ribot, in Brighton England. ribot sent out a design test for potential new hires to come up with an app to help market their outdoor event 'Terrace' as a space for food and drink pop-up events. For the purposes of this case study I wanted to use ribot's design test as an opportunity to showcase my visual design skills.
Project Duties
For this project I was the interaction designer and visual designer.
Project Scope
ribot's test came with a set of design constraints:
- Limited timeframe: This is a design challenge for the company with a strict 3-day deadline.
- Conceptual models: One or more psychological principles were to be used in the creation of the design. I used the mental note principle of ‘curiosity’ https://www.dropbox.com/s/v45ogxslxyn5isq/curiosity.png?dl=0
- iOS Mobile: The request was to create an iOS mobile app focusing on both the customers and vendors.
- Limited User feedback: The timeframe dictated a need to rapidly design, forgoing standard usability testing.
- Visual Design Screens: The end product required at least 3 high fidelity screens.
Problem Statement
Locals want to enjoy new food and craft beers in the coolest new spot in Brighton, the ribot Terrace. Vendors want to make money and spread the word on their food/beverage enterprises in a great local meeting space.
Solution Statement
Create a mobile app that lets customers explore the scheduled vendors and lets vendors learn about the space and join the marketplace.
Research
Personas
In order to make an app that addressed the needs of both the customer and the vendor I created personas for both.
Langdon
- 32 year old chef.
- Has a new food truck, using local produce.
- Wants to build his business in hopes of getting a ‘brick and mortar’ location.
- Has a lot of drive and passion for his food.
- Hates dealing with flaky organizations, usually skeptical of popups.
Karen
- 28 year old grade school teacher.
- Works in Brighton, likes to enjoy the summer happenings.
- Wants something fun to do locally.
- ‘Foodie.’
- Wants a full but relaxing schedule for her break.
- Does not like digging through a bunch of different feeds and apps to find out what is going on.
Interaction Design
Paper Sketches
Considering the needs of Karen and Langdon, I started to sketch ideas on paper. I did a word association to first think of aspects of what an event scheduling app would need.I wanted to give a clear and easy way for both of my users to access the vendors, events, and understand the space and their involvement with it.
Wireframes - View a Vendor
Both Karen and Langdon are curious about the vendors who have signed up.
Selecting ‘Our Vendors,’ brings them to the Vendors screen.
Selecting ‘Food,’ they are brought to a scrollable list of food vendors showing an image of the food, their name, and a little info about them.
Selecting the food vendor ‘Todd’s Tacos’ brings up another image of the cuisine; more detailed description, date, and time of their next event and their website; and the ability to contact the vendor directly via their method of choosing.
Wireframes - Events
We will follow Karen as she navigates from the home screen, wishing to learn about the upcoming events at the Terrace.
She is greeted with a warm message and 3 main options: ‘Upcoming Events,’ ‘Our Vendors,’ and ‘About the Terrace.’
Selecting ‘Upcoming Events’ brings her to a scrollable list of the most current events starting at the top.
Each event gives her the names of the vendors involved, an image of the poster/photo of the event, the ability to share with a share button, and the date.
Selecting the event will bring her to a more detailed event profile screen.
Here she can see the time of the event, a detailed description, and websites for the vendors. In addition to sharing, she can also add it to her iPhone calendar.
Wireframes - Become a Vendor
Now that Langdon has checked out the vendors he wants to sign up.
Selecting ‘Our Vendors’ brings him to the Vendors screen.
Selecting ‘Become a Vendor’ allows him to input a quick message consisting of his business name, business description, and an email in which he can be reached.
Selecting ‘Submit’ sends his info to the organizers for ribot’s Terrace, for which he receives confirmation. The Terrace organizers will reach out via email and schedule a time to meet with him in person.
Visual Design
Color Palette
Website
When creating a palette for the high fidelity screens, I wanted to use as much of ribot’s branded colors as possible because I wanted to tie ribot’s playful, creative spirit to the app. The website primarily showed the blue, off-white, dark grey, and magenta colors shown on the chart, and so those are the colors I used.
High Fidelity Screens
This is the home screen. Here I use the magenta and blue overlays to show the images while keeping the text legible.
The Home button is shown white as selected.
This screen originally had a larger portion of blue on the top as well as text. User feedback I conducted showed that this was not needed so I made the individual selections larger.
I wanted to show this screen to demonstrate the call-to-action components in magenta.
Though the largest call-to-action is the ‘Contact’ button the other components such as ‘Add to Calendar,’ website link, and ‘Back’ buttons all display in magenta.
Key Learnings
Creating an app that addresses the needs of customers and vendors can sometimes lead to confusion for both. User research and testing is key to the best user-centered designs, and doing so without it is very challenging. Due to the time limits, I could only conduct minimal user research and testing. I would love to take the designs further and flesh out the experience for contacting vendors, adding favorites, and expanding the scope towards multiple venues.