Challenge
This short-term freelance project requires completing the entire design process, including a responsive website and mobile app, within two months. In addition to enhancing the website's visuals and branding, I also designed the data structure and created a new user flow for the new features.
After analyzing our existing resources and timeline, we decided to split the tasks into two parallel tracks to ensure timely delivery of the design deliverables. This approach allows us to work on visual design, competitor research, and user flow simultaneously.
The Direction & Solution
Look & Feel Branding
We have created two initial designs for the website's look and feel.
One is innovative, using bold color contrasts to capture user attention, while the other is more conservative, featuring softer, lighter colors to promote comfortable readability.
We decided to apply a high-contrast color scheme as our bold attempt. We hope to present a modern image to new users. Additionally, the strong colors can enhance clarity and hierarchy, making it easier for users to navigate.
To minimize back-and-forth time consumption, we utilize Figma’s component features to create fully adjustable UI components, enabling easy modifications throughout the project. Given the tight timeline, we conduct a competitive analysis of various web tools—including e-commerce sites, streaming platforms, and event platforms—to effectively predict the user flow and design the website structure.
Live and online Auction
We recognized the potential to transform the traditional auction experience into a seamless online platform.
Intuitive Bidding Process
🔦
Guides first-time users through bidding with clear instructions.
Multi Platform Adaption
🔮
Optimized for website and mobile app, allowing users to participate anytime, anywhere.
Real-Time Updates
📣
Instant notifications keep users informed about bid status and auction changes.
Design language system sync in website and app
The design language system is crafted to support multiple platforms, including desktop websites, mobile websites, and mobile apps, ensuring a seamless user experience across all devices.
Consistency
Consistent design elements—
color schemes, typo, and icon
Responsive Design
Layouts adapt fluidly to various screen sizes
Clear Information Hierarchy
A well-structured hierarchy to help locate and understand key information.
Information Structure
The better information structure arrangement help simplify the complex information on the auction website.
Right place, right information
The layout is structured to present information logically
Clear labels and tags
Highlight differences between auction items and details
Consistent and Simple Layout
Similar layout style in website and app