Mobile App & Responsive Website Design
UX/UI Design
Rise and Shine Cafe
Rise and Shine Cafe
Mobile App & Responsive Website Design
UX/UI Design
Mobile App & Responsive Website Design
UX/UI Design
Rise and Shine Cafe
Mobile App & Responsive Website Design
UX/UI Design
Rise and Shine Cafe
Rise and Shine Cafe
Mobile App & Responsive Website Design
UX/UI Design
Mobile App & Responsive Website Design
UX/UI Design
Rise and Shine Cafe
Mobile App & Responsive Website Design
UX/UI Design
Rise and Shine Cafe
Rise and Shine Cafe
Mobile App & Responsive Website Design
UX/UI Design
Mobile App & Responsive Website Design
UX/UI Design
Rise and Shine Cafe
Project Overview
I designed the Rise and Shine Cafe mobile app and responsive website using Figma. The goal was to develop a platform that allows users to reserve tables at the cafe and place orders for pickup.
My role
Full UX/UI Design Process
User Research
Animations
Insights from User Interviews
To design my app effectively, I needed to understand users' pain points. Including a diverse group of people in my research was crucial for identifying ways to enhance the user experience and generate beneficial ideas. I conducted interviews with five participants, gathering key insights that helped me kickstart the process of building my mobile app.
Project Overview
I designed the Rise and Shine Cafe mobile app and responsive website using Figma. The goal was to develop a platform that allows users to reserve tables at the cafe and place orders for pickup.
My role:
Full UX/UI Design Process
User Research
Animations
Insights from
User Interviews
To design my app effectively, I needed to understand users' pain points. Including a diverse group of people in my research was crucial for identifying ways to enhance the user experience and generate beneficial ideas. I conducted interviews with five participants, gathering key insights that helped me kickstart the process of building my mobile app.
Project Overview
I designed the Rise and Shine Cafe mobile app and responsive website using Figma. The goal was to develop a platform that allows users to reserve tables at the cafe and place orders for pickup.
My role:
Full UX/UI Design Process
User Research
Animations
Individuals with disabilities often struggle to complete online tasks because many websites do not have an accessible design or incorporate accessibility features.
Many places need customers to book tables by text or phone. Customers like booking online for convenience.
The process of reserving a table can often be lengthy and perplexing. A quick and straightforward method is generally preferred by users.
Users are seeking the capability to book tables in advance for events or upcoming occasions.
How Might We…
Develop a fast and user-friendly online table reservation system that is easily accessible, so that users' can book their seats in advance and eliminate the need to phone the restaurant beforehand.
How Might We…
Develop a fast and user-friendly online table reservation system that is easily accessible, so that users' can book their seats in advance and eliminate the need to phone the restaurant beforehand.
Competitive Analysis
I researched similar apps and websites to compare competitors' strengths and weaknesses. This competitive audit gave me a clearer idea of how to design my app, create an efficient reservation and pickup order process, and identify unique features to differentiate from competitors. Before researching competitors, I first needed to identify them.
- Restaurants
- Movie Theaters
- Arenas
- Bars/clubs
Streamlined 2-5 page reservation process
Calendar included
Order Pickup
Events
- Simple and efficient reservation process (Stay within 2-5 pages in length)
- Dining
COMPETITORS IN
THIS STUDY
Indirect Competitor
Direct Competitor
Direct Competitor
District Eat and Play
$$
The local amusement arcade boasts a wide array of games and activities ideal for family entertainment. They also provide table reservation services for various occasions, including birthdays.
Rainforest Cafe
$$
A family-friendly cafe featuring a rainforest theme, this international chain offers a variety of restaurants. They accommodate both table reservations and pickup orders.
The Annie Cafe & Bar
$$$
A fine dining café, celebrated for its superb cuisine and service, offers a refined ambiance. As one of the upscale restaurants in Houston, TX, dining here typically exceeds $100 per person. Therefore, making a reservation in advance is essential.
Task Flow & Sitemap
Ideation Sketches
Creating a task flow was instrumental in organizing content and planning the layout of my app. This preparation was key to designing both paper and digital wireframes. Research indicated the necessity for a short, concise reservation process, limited to a few pages.
I could visualize the steps users would take to navigate from one page to another. With this understanding, I was prepared to begin creating my paper and digital wireframes.
Creating paper sketches is vital when developing a project as it helps plan content and features. Understanding user needs and turning them into visual sketches forms the basis for user-friendly app design.
Creating paper sketches is vital when developing a project as it helps plan content and features. Understanding user needs and turning them into visual sketches forms the basis for user-friendly app design.
It was time to start implementing new elements into my designs. I created my own color palette, added typography, and updated the layout. Incorporating images was also essential to bring my app to its final form. These elements brought life to my designs and showcased how the final product would look and function. I completed connecting the screens and made both of my prototypes interactive.
Inserted an accessible calendar
Added more negative space
Converted to square buttons
Converted the selection buttons into dropdown menu's
Calendar is not accessible - unable to read the calendar
Option buttons need to be converted to dropdown menus
Change the oval buttons to be square
Add more negative space
Key Takeaways from RESEARCH
View Mobile App
Digital Wireframes
After making paper sketches, I designed digital versions in Figma. Sized frames, chose fonts, and styles. Added labels for accessibility and clear navigation. Converted to Lo-fi prototypes by creating connections.
Insights from User Interviews
To design my app effectively, I needed to understand users' pain points. Including a diverse group of people in my research was crucial for identifying ways to enhance the user experience and generate beneficial ideas. I conducted interviews with five participants, gathering key insights that helped me kickstart the process of building my mobile app.
Individuals with disabilities often struggle to complete online tasks because many websites do not have an accessible design or incorporate accessibility features.
Many places need customers to book tables by text or phone. Customers like booking online for convenience.
The process of reserving a table can often be lengthy and perplexing. A quick and straightforward method is generally preferred by users.
Users are seeking the capability to book tables in advance for events or upcoming occasions.
How Might We…
Develop a fast and user-friendly online table reservation system that is easily accessible, so that users' can book their seats in advance and eliminate the need to phone the restaurant beforehand.
How Might We…
Develop a fast and user-friendly online table reservation system that is easily accessible, so that users' can book their seats in advance and eliminate the need to phone the restaurant beforehand.
Competitive Analysis
I researched similar apps and websites to compare competitors' strengths and weaknesses. This competitive audit gave me a clearer idea of how to design my app, create an efficient reservation and pickup order process, and identify unique features to differentiate from competitors. Before researching competitors, I first needed to identify them.
- Restaurants
- Movie Theaters
- Arenas
- Bars/clubs
Streamlined 2-5 page reservation process
Calendar included
Order Pickup
Events
- Simple and efficient reservation process (Stay within 2-5 pages in length)
- Dining
Competitors in this Study
Competitors in this Study
Indirect Competitor
Direct Competitor
Direct Competitor
District Eat and Play
$$
The local amusement arcade boasts a wide array of games and activities ideal for family entertainment. They also provide table reservation services for various occasions, including birthdays.
Rainforest Cafe
$$
A family-friendly cafe featuring a rainforest theme, this international chain offers a variety of restaurants. They accommodate both table reservations and pickup orders.
The Annie Cafe & Bar
$$$
A fine dining café, celebrated for its superb cuisine and service, offers a refined ambiance. As one of the upscale restaurants in Houston, TX, dining here typically exceeds $100 per person. Therefore, making a reservation in advance is essential.
Task Flow & Sitemap
Ideation Sketches
Creating a task flow was instrumental in organizing content and planning the layout of my app. This preparation was key to designing both paper and digital wireframes. Research indicated the necessity for a short, concise reservation process, limited to a few pages.
Creating paper sketches is vital when developing a project as it helps plan content and features. Understanding user needs and turning them into visual sketches forms the basis for user-friendly app design.
I could visualize the steps users would take to navigate from one page to another. With this understanding, I was prepared to begin creating my paper and digital wireframes.
Testing
High Fidelity Prototypes
Building a Mobile Website
I started refining my designs based on the results of a recent usability study, which included five carefully selected participants. I asked them a series of questions and gathered valuable feedback. Using their insights, I made the necessary updates to my design.
It was time to start implementing new elements into my designs. I created my own color palette, added typography, and updated the layout. Incorporating images was also essential to bring my app to its final form. These elements brought life to my designs and showcased how the final product would look and function. I completed connecting the screens and made both of my prototypes interactive.
I completed the high-fidelity prototypes and was ready to start designing the mobile website. I resized components and rearranged elements to fit the new frame size. After finishing my mockups, I made the necessary connections and completed the high-fidelity prototype.
Creating paper sketches is vital when developing a project as it helps plan content and features. Understanding user needs and turning them into visual sketches forms the basis for user-friendly app design.
It was time to start implementing new elements into my designs. I created my own color palette, added typography, and updated the layout. Incorporating images was also essential to bring my app to its final form. These elements brought life to my designs and showcased how the final product would look and function. I completed connecting the screens and made both of my prototypes interactive.
Inserted an accessible calendar
Added more negative space
Converted to square buttons
Converted the selection buttons into dropdown menu's
Calendar is not accessible - unable to read the calendar
Option buttons need to be converted to dropdown menus
Change the oval buttons to be square
Add more negative space
Key Takeaways from RESEARCH
View Mobile App
Converted to square buttons
Inserted an accessible calendar
Added more negative space
Converted the selection buttons into dropdown menu's
View Mobile App
View Desktop Website
View Mobile Website
Calendar is not accessible - unable to read the calendar
Option buttons need to be converted to dropdown menus
Change the oval buttons to be square
Add more negative space
Key Takeaways from Research
Before
Digital Wireframes
After making paper sketches, I designed digital versions in Figma. Sized frames, chose fonts, and styles. Added labels for accessibility and clear navigation. Converted to Lo-fi prototypes by creating connections.
Digital Wireframes
After making paper sketches, I designed digital versions in Figma. Sized frames, chose fonts, and styles. Added labels for accessibility and clear navigation. Converted to Lo-fi prototypes by creating connections.
I started refining my designs based on the results of a recent usability study, which included five carefully selected participants. I asked them a series of questions and gathered valuable feedback. Using their insights, I made the necessary updates to my design.
It was time to start implementing new elements into my designs. I created my own color palette, added typography, and updated the layout. Incorporating images was also essential to bring my app to its final form. These elements brought life to my designs and showcased how the final product would look and function. I completed connecting the screens and made both of my prototypes interactive.
I completed the high-fidelity prototypes and was ready to start designing the mobile website. I resized components and rearranged elements to fit the new frame size. After finishing my mockups, I made the necessary connections and completed the high-fidelity prototype.
Building a Mobile Website
High Fidelity Prototypes
Testing
Converted to square buttons
Inserted an accessible calendar
Added more negative space
Converted the selection buttons into dropdown menu's
View Mobile App
View Desktop Website
Before
Calendar is not accessible - unable to read the calendar
Option buttons need to be converted to dropdown menus
Change the oval buttons to be square
Add more negative space
Key Takeaways from Research
jessebishop04@gmail.com
Let's Work
TOGETHER!
Task Flow & Sitemap
Creating a task flow was instrumental in organizing content and planning the layout of my app. This preparation was key to designing both paper and digital wireframes. Research indicated the necessity for a short, concise reservation process, limited to a few pages.
Creating paper sketches is vital when developing a project as it helps plan content and features. Understanding user needs and turning them into visual sketches forms the basis for user-friendly app design.
I could visualize the steps users would take to navigate from one page to another. With this understanding, I was prepared to begin creating my paper and digital wireframes.
Ideation Sketches
High Fidelity Prototypes
It was time to start implementing new elements into my designs. I created my own color palette, added typography, and updated the layout. Incorporating images was also essential to bring my app to its final form. These elements brought life to my designs and showcased how the final product would look and function. I completed connecting the screens and made both of my prototypes interactive.
I completed the high-fidelity prototypes and was ready to start designing the mobile website. I resized components and rearranged elements to fit the new frame size. After finishing my mockups, I made the necessary connections and completed the high-fidelity prototype.
Inserted an accessible calendar
Added more negative space
Converted to square buttons
Converted the selection buttons into dropdown menu's
Calendar is not accessible - unable to read the calendar
Option buttons need to be converted to dropdown menus
Change the oval buttons to be square
Add more negative space
Key Takeaways from Research
View Desktop Website
View Mobile Website
View Mobile App
Building a Mobile Website
I started refining my designs based on the results of a recent usability study, which included five carefully selected participants. I asked them a series of questions and gathered valuable feedback. Using their insights, I made the necessary updates to my design.
Before
Testing
Competitive Analysis
I researched similar apps and websites to compare competitors' strengths and weaknesses. This competitive audit gave me a clearer idea of how to design my app, create an efficient reservation and pickup order process, and identify unique features to differentiate from competitors. Before researching competitors, I first needed to identify them.
- Restaurants
- Movie Theaters
- Arenas
- Bars/clubs
Streamlined 2-5 page reservation process
Calendar included
Order Pickup
Events
- Simple and efficient reservation process (Stay within 2-5 pages in length)
- Dining