Introduction
Overview
“360 Café” is a well-known local restaurant in the heart of Costa Rica, serving authentic food to both residents and tourists. Its digital presence was limited to social media platforms and lacked an independent website.
Objectives
Design a sleek, responsive website for 360 Café with online ordering, reservations, and easy menu management. It aims to boost engagement, streamline service, and enhance visibility.
Outcome
The project developed an intuitive and attractive responsive website designed to fulfill the needs of both local and international customers and staff. This was optimized for device responsiveness and search engine visibility.
This project is a real client project for 360 Café, a local restaurant in Costa Rica. I thoroughly developed the entire website end-to-end.
Research, design and development Approach
As this project aims to prototype a companion app for an existing website, I started by analyzing its current information architecture (IA). I adopted a user-centered design approach to conduct research and analyze findings in order to develop a cohesive design solution.
First, we need to address the following questions:
Who are the primary users?
What does this app offer to them?
When and where can this app be used?
Why would users want to use this app?
The strategy to answers all those questions involved the following phases:
Phase 1: Empathize
Phase 2: Define
Phase 3: Ideate
Phase 4: Prototype
Phase 4: Test
Empathize
Current website IA
Proposed website IA
Define
Proposed app IA
User stories, scenarios, and cases
Ideate
User flows
Revised IA
Prototype
Low-fidelity prototype
Interactive Low-fidelity prototype
Test
Usability testing
Data analysis
Insights
High Fidelity prototype
Understanding the landscape and the users
During this phase, I concentrated on understanding, identifying, and resolving existing issues on the website, while also analyzing the target audience.
Methodology
Analyze the current website information architecture
Outline a proposed website information architecture
Current website Information Architecture (IA)
Many current and prospective students are not fluent in English and lack a solid academic background. They depend on the school website for information, registration, and course payments.
An assessment of the website's information architecture revealed several usability issues that negatively impact the user experience.
The global navigation is overly lengthy
Many features appear in multiple drop-down menus
It lacks a clear user path for common tasks, such as registering or paying
The information architecture is too complex for the target audience.
Proposed website Information Architecture (IA)
The proposed IA addresses the above mentioned problems and provides users with a more straightforward and enjoyable experience.
The primary modifications to the IA of the current website are:
Clutter removal
No more duplication
Clear user paths
User-friendly and straightforward IA for the audience
Defining the user needs and strategy
During this phase, I identified the core user needs and goals. I outlined the potential user scenarios, cases and stories.
Methodology
Proposed the information architecture for the companion app
Conceptualize user stories, user scenarios and user flows
Proposed app Information Architecture (IA)
After improving the existing website's IA, I employed the subsequent methodology to design the potential app's IA.
Step 1: Research school apps
I analyzed community school apps like Brooklyn College and Bristol Community College, focusing on features and user experience. These apps mainly serve existing students, offering course registration and payments. Non-essential info like school history and galleries are not included here.
Step 2 : Identifying the app users need
To design a student-task-oriented IA, I identified four common tasks: registering for courses, paying tuition, receiving real-time updates, and managing academic tasks such as submitting homework and viewing grades. These aim to meet user needs and improve the experience.
Step 3: Eliminating the clutter of the website’s app
I identified website IA features that didn't align with user goals, such as the main message—National Data & Impact, staff directory, graduation topics, photos, and galleries.
Step 4: Organizing the app’s IA
The app’s target audience mainly includes students whose first language isn't English and who lack a solid academic background. The IA should be simple and clear, with a straightforward path for each task.
User stories, scenarios, and cases
I developed four user stories, cases, and scenarios based on the app's target audience. This approach improves my understanding of the user perspective facing the problem.
Phase 3: Ideate
Brainstorming potential solutions
During the third phase of the design process, I defined user flows from user stories and scenarios, and ultimately revised the IA based on the preceding steps.
Methodology
Organize the user flows
Revise the app information architecture
User flows
Creating user flows involved carefully mapping out the step-by-step journey users take through each solution. I aimed to develop pathways that are clear, logical, and provide a seamless experience. This will help me streamline the next phase: prototyping.
Revised app information architecture
Prior to initiating the design of low-fidelity prototypes, I refined the proposed application's information architecture.
Based on the previous step, to enhance navigation and user experience, I have made some adjustments to the proposed IA.
The app settings feature access was relocated from the main navigation to the bottom tab bar to maintain a cleaner screen.
Some primary navigation features were renamed, e.g., Academic work → Student portal.
I added more features to the payment section
Phase 4: Prototype
Developing feasible solutions
I created a testable version of the selected solutions. During a structured prototyping process, I developed a preliminary product that is robust enough to collect feedback from real users.
Methodology
Create a low-fidelity prototype
Generate an interactive low- fidelity prototype
Low-fidelity prototype
The paper's low-fidelity prototype was designed based on the user flows and the revised IA. Paper wireframes helped me define the layout, hierarchy, and flow, emphasizing structure over visuals.
The following flows are presented through paper prototyping:
Registration process for a course
Payment due balance in the app
Student portal usage - submission of assignments
Check for any real-time alerts or news updates
Interactive Low-fidelity prototype
I used the POP (Prototype on Paper) Marvel app. It included all the paper wireframes for the four established tasks. I connected all buttons, links, and navigation elements across screens, creating a fully navigable prototype for the next stage: testing and gathering feedback.
Phase 5: Test
The final steps
To kick off the final phase of this design process. I started with usability testing and refined the design based on feedback, leading to a high-fidelity prototype. Addressing the user needs identified during the Define phase.
Methodology
Conduct usability testing
Perform data analysis
Gather key insights
Iterate a high-fidelity prototype
Usability testing
Research goals
These goals outline the ideas and outcomes I aim to learn from user testing.
Assess whether the app's navigation, layout, and overall design are user-friendly and intuitive.
Identify necessary enhancements based on user feedback or interactions during the user testing session with the app.
Research questions
The research questions offer focus and structure to my research study.
How efficient is the app for users to handle course registrations, pay tuition , find real-time updates in the app , and submit assignments ?
What can we learn from the user flow and the steps that user take on each task?
Which features of the app require modifications ?
Key Performance indicators (KPI)
The KPIs I planned to utilize in the user testing are:
Time to complete a given task (seconds)
Conversion rates – the ability to fully complete a given task
Number of clicks for task completion
Usability Scale (SUS) – the users scale their opinion on various aspects of the product
Methodology
Moderated remote testing
Location: The participants went through a user testing at their own homes.
Three participants completed a set of tasks and a questionnaire on their experience.
Prompt tasks:
Task 1: As a student in the high school credit diploma program, register for a math course.
Task 2: As a student in the high school credit diploma program, pay your full tuition.
Task 3: As a student in the high school credit diploma program, do your assignment in module 2 of the science course, submit it, and receive a grade.
Task 4: There is an active snowstorm in New Haven; find out if the school is open.
Participants
Data analysis
After completing user testing, I analyzed the data, which revealed the following results:
Conversation rates
All the users completed all the tasks successfully, without any drop-off during the user testing of the prototype.
KPI: Time-on-Task
User time on task is significantly larger compared to reference, specifically on the resgistration task.
The user variation in task time is not user specific.
KPI: Number of clicks for task completion
Overall, there is no great difference between users number of clicks for task completion compared to reference.
KPI: Usability scale (SUS)
Score by task
Rate the difficulty of the task on a scale from one to five, where one means difficult and five means really easy.
App score
Rate the use of the App on a scale from one to five, where one means a user would never use it and five means the user would definitely use it.
Open feedback
Payment task:
“I hope it will be allowed to use Google Pay for Android, too.”
Key insights
Contrary to the school website, I aim to create a simple task-oriented app. The overall high user satisfaction justifies this aim.
The higher user time to task completion compared to reference can be explained by lack of previous app experience and the low fidelity nature of this study.
The gap between high user time to task completion and relatively normal number of clicks is an interesting finding. This may be explained by over-cluttered screens, especially in the path of task 1 (registration)
The open comments of the users regarding the payment path are valuable. Specifically, the need for manage payment methods for new users necessitates changes app design.
High-fidelity prototype
Based on usability insights from our sessions, I refined the original low-fidelity prototypes. As a result, we developed a solid, high-fidelity prototype.
Design iterations
The user testing revealed important issues I had previously overlooked. I aimed to address these issues as I started working on my high-fidelity prototypes.
Registration flow confusion → forced program-first selection
Payment method ambiguity → clearer hierarchy and labeling
Hidden contact info → visibility improvement
Interactive prototype
For my design work, I chose to use Figma. I built a UI design system with various components, setting colors, typography, and patterns so changes update automatically across all prototypes. After finalizing the high-fidelity mockups, I linked all buttons, links, and navigation elements with interactions, resulting in a fully functional, navigable prototype.
Prototype Walkthrough
Finally, I created a comprehensive walkthrough prototype, allowing you to explore the app I developed in more detail.
