Overview
Duration
2 Months
Dec, 2023 — Present
Team
UX Designer
Full-stack Engineer
Role
Responsive web designer
UX/UI Design
Prototyping
Link
Website
Challenge : What stakeholders do we have?
Discovering the needs of the café manager
Communicate with engineers in design details
Gather user feedback for iteration
The Problem
The café owner needs a platform to showcase their coffee shop and also hopes to provide a space where people can freely discuss about their experiences, feelings, and stories happened in Dali.
Solution for coffee shop owner
Version 1.0 Homepage
The promotional interface showcases the appearance of the coffee shop, the variety of beverages, and the stories that happening
Video Playback
Enable video comment function, allowing visitors to the webpage to express their thoughts and leave comments while watching
Beverage Showcase
Display classic beverages in a photo-wall style to help customers make better choices
Story Showcase
But after showing the initial design to the shop owner, he felt that the storytelling aspect could be omitted for the first version. They preferred to have detailed descriptions for each beverage. As a result, I modified homepage looks like this:
Version 2.0 Homepage
The homepage removed the story-sharing module, retaining only the storefront video and beverage introductions.
Video Playback
Not change, Introduction to the coffee shop
Beverage Showcase
Provide introductions for each beverage, allowing every visitor to the coffee shop to see a comprehensive list of drinks.
Include detailed tasting experiences and textual descriptions for both regular and specially crafted beverages by the shop owner
Solution for Full-stack engineer
Responsive web design for PC, IPAD, and Phone screen:
After the product went in development, I found that there were still many areas in the design that were not clearly communicated with the development engineer. Further modifications are needed:
Mobile Page Heading
Post Comment Section
On the computer interface, many features can be displayed in the comment section without appearing crowded due to the larger screen size.
However, on a smaller mobile screen, considering users are accustomed to directly tapping to reply, there's no need to design a reply button. Like and delete functions, on the other hand, require a thoughtful layout and design.
Solution for User
Set up a user feedback interface
Collected a variety of opinions
After collecting 20 opinions, we will comprehensively redesign based on user feedback, engaging in iterative cycles.
Add Post Categories
Add Message Notifications
Users are accustomed to the reading mode of likes and comments on social media, so creating a sense of participation and interaction is crucial. Adding a message module in the user's profile interface allows them to directly see comments from others.
Reflection
This is my first real-world project and I have valuable experience in designing responsive web pages. Working on designing a responsive website from begin to the following iteration has allowed me to understand how to effectively present content on different devices, optimize layout designs, and enhance overall user experience.
In terms of communication, my role in this project is more like a service provider. Designers need to communicate with the client to understand their requirements and extract their truly needs. Meanwhile, Client's requirements are constantly changing, and we need to grasp the evolving needs behind these changes to design accordingly.
When communicating with the full-stack engineers, it exposes loopholes in the process design and reveals certain technical requirements and constraints. The collaboration between designers and engineers is crucial in addressing these issues, enhancing my communication skills and techniques significantly.
With the project's launch and promotion, we have received 200+ feedback from real users. Due to the good publicity effect brought by the web page, it has also received the intention of cooperation from other platforms. Due to the open function of the forum, the framework and code that have been built can be simply applied. This product is still continuing...