Woohoo App
Host & Join in-person activities in your area
Mobile design for ios
Project Overview
Background
People want to reestablish social activities after the pandemic, and there is no dominant product focusing on in-person event management right now. But many products hit this market from different perspectives. For example, people might announce their events on Facebook Event and ask friends to join, share the Google calendars about the event to attendees through an email list. As the attendees, they might visit Meetup to look for events they are interested in or join the events announced in groups. Then, they have many choices to communicate with the relevant people or a certain group. But most of them would move to another platform for chatting. There are also some other issues that need to think of, such as the money transfer. For some scenarios, attendees need to pay the shared expenses to organizers. People might prefer to use Venmo for sharing expenses.
Design Process
The product will focus on the event research, tracking, payment, and group communication. There are various needs for different stages (such as event planning, searching, making a payment if need, asking for join, communication, right before the event, after the event) based on different roles (The role of organizer and attendee / participant).
The whole project started with the primary research. By following the brief secondary research, brainstorm, storyboard phases, the basic product interaction model, wireframe and High- fidelity prototype were developed and built.
My Role
UX and UI design from conception to delivery.
User Research
Secondary Research
Competitors Research
Issues want to solve
How could my product help people with a better filter to find an activity match with they need? and how could the product provide a better communication platform with relevant people through the activity?
Primary Research
Objective
Explore people how to host or attend an in-person event and how to make a better app for in-person events.
Recruiting Users: Screeners
Screeners are a tool I can use to make sure that I am conducting research with the right participants. It’s really important that I conduct interviews and other forms of research with people who will help me to collect viable data. Below is the screener survey I created for the user interview.
Synthesis
Synthesis is the key to making sense of the data I collected while conducting research so that I can then move on to the ideation stage of the design process. While synthesizing, I took an array of data and restructure it into a handful of insights to prioritize those insights.
Empathy Map
An empathy map is a visual way to organize insights, observations, and quotes I have collected from a user interview to better understand my user’s pain points, goals, feelings, thoughts, and behaviors. I used the notes I gathered from my participant interviews in order to create an affinity map. Empathy map helped me to create personas for my users and bridge the gap between those personas and my design concepts.
Personas
I used personas to make sure who the user type is that I am designing for. I printed out my personas and placed them in my workspace so that I can refer back to them whenever making any major design decisions. In this project, I created two types of personas and keep my personas front-and-center in my mind when making all major design decisions.
.jpg)
.jpg)
Ideation
User Stories
I created user stories and deciding which to prioritize for my MVP (Minimum Viable Product). User stories are a way to articulate the needs of my users and consciously think about how they will use my product. It helped keep the design user-centered. Snapped a picture of my user stories and clearly label which stories will be included in the MVP.
Sitemap
A sitemap is a visual representation or diagram that will let me keep track of all of the different screens within a site or app and visualize how they are all connected. I created a sitemap which is laid out in a way that represents the hierarchy of the site, from top-level pages that appear at the top of a site or navigation bar to subpages that are reached through one of those top-level pages.
User Flow
As a designer, I need to consider all the ways users could navigate through a site or app to identify the essential path (which is generally the path that is the most direct and straightforward.) For this project, I mapped out the user flow for a red route. Red routes are the user flows that are critical to my design, while other routes are not as essential to my product’s success.
Sketching Red Route Screens
I used the red routes that I identified to create sketches of the screens that make up the critical user flows that my users will follow when using my app. Sketching the red routes of my app will help me to communicate my ideas and get feedback about them more easily.
Digital Design Process
Wireframe
A wireframe is a way to map my product’s content. In this project, I used wireframes to define the hierarchy of the elements that make up my product, which will, in turn, help me determine the layout of my product.
Edge Cases
When I was building wireframes, it’s important to document any edge cases I identify. For example, user might not able to search for anything. Designing for edge cases means considering the experience a user might have in a variety of scenarios, not just when following red routes I’ve designed.
Wireflows
I have multiple states of the same screen in this project, so I create wireflows to represent the places that a user will interact with the various components of a product. There are numerous actions a user can take while on a screen that won’t necessarily take them to a new screen. A wireflow can help to document that kind of interaction more clearly than a user flow can.
Usability Testing
Usability testing is a method I used to get initial feedback on designs I’ve made. It’s a quick, cost-effective way to learn what users like about my designs and what aspects of my design are a bit less intuitive. When conducting usability testing, I asked random people, like people in cafes, friends that come over for dinner, etc. to take a look at my designs. The people I ask to look at my designs might be nothing like the intended user of my product. They may, however, help me flag certain aspects of my work that need to be adjusted.
Inspiration--Moodboard
Style Guide
Once I’ve created wireframes, the next step is to turn them into high fidelity screens, or screens that look and feel like a real product. These high-fidelity screens should include color, typography, and other UI elements. I also created logo for my product, it is an important visual element for business branding.
Logo Design
Colors
Fonts
Iconography
UI Elements
High-fidelity Mockups
To create high fidelity mockups, I refed to my style guide and brand platform to facilitate the decisions I made as I build out my mockups. In addition to incorporating the color palette, icon, styling, and imagery, I also made decisions about how to best use drop shadows, gradients, line width, and more to create an aesthetic for my design that is on-brand. High fidelity mockups are the finalized versions of a design; they are fully fleshed-out and align with a style guide.
