Redesign OwlTing Official Website
Project Includes | Refactor Website . UX Research . UI Design
Project Scale | 13 departments, 20 members
My Role | UI/UX Designer . RD team project owner
Project Background
OwlTing group was founded in 2010, with blockchain in core. Its has seven product lines, including B2B business services, B2B hotel management service, B2C e-commerce platforms and hotels, ect.
Current website is not reserve flexibility for update, so it's hard to convey our new information to users. In addiction, the old visual style is different with new VI system, all the reasons contributed the website revision.
Challenges and Solutions
- Launch schedule is greatly advanced
On the eve of the Chinese Festival holiday, I received multilingual function which has been planed in phase two has to ahead of schedule, so I immediately recruited meetings of departments to request support, we use shortest time to completed and delivered on schedule.
Let's see feedbacks first 👀
I'm very proud of sharing our new website with other companies
- C-level colleague
Job applicants said that official website introduction is very clear !
- HR colleague
When the media came to interview, we felt that they had a better understanding of our.
- PR colleague
1
Goals
What we want to achieve
- Refactored from the information architecture, allowing users to obtain information more easily.
- Cross departments to integrate products introduction, clearly convey our solutions for user.
- According to group VI system to define new style for website, let it be outstanding from high-tech industry.
2
Empathize
Clarify demand and current problems
The demand originated from CEO, so the team is more cautious when implement tasks. In this project I'm acting as UI/UX designer and project owner of engineer team.
I obtained users feedbacks from interviews with colleagues and users.
Colleague A
Colleague B
Colleague C
Colleague D
User A
User B
3
Define
Identify current problems
- Unclear products introduction - Narrow narrative and external links can't provide enough information for user.
- Poor interface layout - Unwell-designed pages cause poor user experience.
- Website structure has no flexible - Website structure is old and there is no admin system for maintain.
- Inconsistency user interface - Website style is different with new VI system, which make brand identity is hard to shape.
4
Ideate
Brainstorming for new ideas
In the brainstorming discussion, engineers were also participated, so we discussed the practicality of interaction. Although I know it might be too early to discuss implement at this stage, but it also can a creativity for design.
5
Design
The sooner to discuss, the sooner goes ease
I. Information architecture
I reported the revision scale with engineer team and confirming Information architecture. Due to the urgency of this project, the team decide to implement in phases.
II. Wirefram
This project is involve with various departments and language translation, so I realize the sooner wireframe is completed ,the entire project will goes smoother.
III. Existing Visual Elements
Owls and tech blues are present throughout the entire group VI system. These are a few visual examples that helped me extend baseline for further exploration.
IV. Exploration
' High-Technology, Expertise, Product Diversity ' are the three cores that I ideated website visual style.
•Ideate from colors
•Ideate from product diversity
V. Iterations
There is no ' perfect ' for iteration, however balanced with concise and professionalism is consensus, so I made an iteration to optimal page style.
VI. Prototype
I used Adobe Xd to simulate parallax scrolling effect for engineer. Operable prototype can easily help engineer to understand tasks.
View Prototype
VII. Assist engineers to find errors
Before product launch I assist engineers to debug, such as multi-language pages, various devices, mobile platforms, social media preview etc.
💡 : I always compress pictures before deliver to engineers. It can helps them reduce workload.
6
Result
Page Display
This revision is very successful. We got many compliments by unique visual style and clear introductions.
Homepage - Through flying owl concept to display product diversity, it's very attractive.
Business introduction section - The service type is bring out by narratives and background images which can help user quickly understand.
Location presence animation - Via animation to express globalization.
7
Takeaway
Archive is as important as create
I have learned is I should archived comprehensively before the revision, which I will definitely pay attention next time.
More Works
