Design portfolio / UI UX design / OpenResty Website Web App UI Product Design

OpenResty Website Web App UI Product Design

2022 B2B tech enterprise design work sample using Figma.
OpenResty is a full-fledged web platform based on nginx and LuaJIT.

Team

Design team: Kasia Zajac, Grace Yang(me)
Ideation, content provider: Junlin Chen
Front-end developer: Qiujuan Yuan, zhuzi

Timeline

March--July.2022 (5 months)

Role & Discipline

Research: Problem statement, requirement gathering, ideation;
Design: Sketching, wireframes, hi-fi prototyping, design iteration;
Presentation, communication, collaboration, hand-off work flow.

Website - Major Accomplishment (links)

Sign up / Request demo UIUX design
OpenResty blog page
OpenResty Edge product page
OpenResty X-Ray product page(Collaborate with Kasia Zajac)
OpenResty community page
OpenResty pricing page
OpenResty user dashboard page

Web App UI Demo

Web Graphics Demo

Problems

Previous version of OpenResty Edge product page was lack of priority, using too many colors and information intensively laid out... It was more like an educative wikipedia of the product than a commercial web page.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Users cannot find important information quickly.

Users are not sure their problems can be solved with our product.

Users are not guided to download the product.

Strategy

1

Educate users the outcome of using the product by addressing on Why use our product and What can be achieved with our product.

2

Shift the function of this page to SELL by prioritizing “request demo” and make it always accessible during the user experience.

3

Design modern and easy user experience by restructuring and cutting down unnecessary content and visual elements.

Design Solution 1

Redesign “Feature” section

- Reduce user scrolling times from 13 to 7 to easy the user experience;
- Replace concept illustrations with product user interface so users get more familiar with the product;
- Have product user interface menu bar as the background to indicate how to navigate in Edge product.

Web Implementation