JobBank About pages redesign

Redesign 4 pages about 1111- About / Privacy / Report / Cooperate.
I learned a lot in detail-handling of design, even was the basic information display.

Client

1111 JobBank

Category

UXUI desgin, RWD

Result

Mixed

Duration

under 1m/ each

Client

1111 JobBank

Category

UXUI desgin, RWD

Result

Mixed

Duration

under 1m/ each

Client

1111 JobBank

Category

UXUI desgin, RWD

Result

Mixed

Duration

under 1m/ each

#1 About Page

(Handoff, under developing)

Role & key partners

Me- Product designer / manager- Sr. Product designer / PM

Collaboration
  • ver.1,2- design by manager

  • ver.3,4- design independently & report to manager.

  • Discuss old version with and require data from PM / QC for Front-end.

Responsible
  1. UI mockup / all visual aspect / prototype for discuss.

  2. Discuss & reports to manager and director (especially about banner).

  3. (Initiative) Find tab-pages structural problems, and sentence & spelling problems, report and discuss with manager & PM .

Intro of Sections

  • First sight- Banner & Slogan & data to that demonstrate our service.

    Design Goal- Creating the banner and data presentations that are attractive, while maintaining clean and simple.

  • Slogan & info present- with 4E value proposition

    Design Goal- Carefully adjust the widths of elements, and Font size of info. hierarchy for better reading and RWD.

  • Main Feature introduction

    Design Goal- display the attractive and clean feature display that can stand out.

  • Recommended by users- Jobs & Candidates seeking experience feedback

    Design Goal- figure out the layout that can display info and images clearly, and maintain the legibility in different device.

  • Bottom CTA- Call to action Btn. with slogan about the main service showed in the final glance.

    Design Goal- demonstrate visual dynamism by strong color contrast to attract users to click.

  • First sight- Banner & Slogan & data to that demonstrate our service.

    Design Goal- Creating the banner and data presentations that are attractive, while maintaining clean and simple.

  • Slogan & info present- with 4E value proposition

    Design Goal- Carefully adjust the widths of elements, and Font size of info. hierarchy for better reading and RWD.

  • Main Feature introduction

    Design Goal- display the attractive and clean feature display that can stand out.

  • Recommended by users- Jobs & Candidates seeking experience feedback

    Design Goal- figure out the layout that can display info and images clearly, and maintain the legibility in different device.

  • Bottom CTA- Call to action Btn. with slogan about the main service showed in the final glance.

    Design Goal- demonstrate visual dynamism by strong color contrast to attract users to click.

Background

After the Home page redesign was officially launched, another aspect of the brand redesign was also restarted: About page. It had been restarted once, and the manager was responsible for the design, and I was responsible for this time.

Challenge

How to visualize the concepts and find the common ground among the stakeholders' suggestions and ideas was a mind-reading challenge; and the banner, as one of the appearance of the company, the design is subject to strict inspection.

Goal

Design a more youthful and lively while also maintain concise and neat style.

Design the visual style well especially the banner to meet the supervisors' expectations.

Because the short-staffed, I also check the copy & content to ensure that no errors or inappropriate presentations spontaneously.

Intro of design progress

  • Original about page

  • Ver.2 UI mockup by manager #1

  • Comparatives collection & analysis

  • Design different style by sections, for more convenient discussion and collocation.

  • Problem discover- redesign other tabs

  • Final version & RWD- main page with other tabs

  • Handoff- annotations & img. files

  • Original about page

  • Ver.2 UI mockup by manager #1

  • Comparatives collection & analysis

  • Design different style by sections, for more convenient discussion and collocation.

  • Problem discover- redesign other tabs

  • Final version & RWD- main page with other tabs

  • Handoff- annotations & img. files

#2 Privacy & Policy Page

( official launched )

Role & key partners

Me- Product designer / manager / SA / Front-end Engineer

Collaboration
  • Design independently, report to & discuss with manager.

  • Require data from SA and legal department (redesign the layout before legal reversion the content).

  • QC to front-end developer for 3 times till generally pass.

Responsible

In the Privacy page, all 4 tabs needed to be redesigned: 會員服務條款 / 隱私權聲明 / 求職公約 / 著作權聲明
Every content, sentence…etc. has been rearranged and designed.
So as the Banner, TabBar and breadcrumb.

Challenge

Although it was simply information display, the devil is in the details, I can always( and need to ) design the UI more delicately to make the reading experience better.

Setting the logic of information hierarchy

Although it was simply information display, my supervisor reviewed my design of the information hierarchy very detailed, so I learned a lot from such design focusing.

Elaborately documenting design details in Handoff.

Mark the UI values ​​of the design file in detail and clearly to help the front-end development be more consistent with the UI mockup and avoid too many adjustments during the QC.

Learning

Polish my layout and UI capabilities for presenting complex content.

Practice text layout in digital presentation in depth and detail. Each level set according to the information hierarchy:
sentence's width, line spacing, word spacing, font size and depth.

Not only as a designer, also play a role of inspection, assistance

Under the short-staffed of PM, designers should also play a supporting role to help produce content, and check the words to ensure that the content is appropriate.

#3 Problem report page

(Handoff, under developing)

Role & key partners

Me- Product designer / manager / SA

Collaboration
  • Design independently, report to & discuss with manager.

  • Require specification sheet from SA for complete detailed UI mockup.

Responsible content

Redesign whole page & content of this page including 4 main category combine with 22 problem report forms.
Come up with several IA & layout design to find best fill-in experience.

  • First sight- Problem selection menu

    TabBar as 1st filter, than Left-side menu as 2nd filter (top menu for tablet & mobile ).
    The problem item's background will be highlight if selected.

  • Divide the questions(for 7~12 item) into 3 categories to reduce the mental load.

    Classify the questions into- 聯絡方式、問題細節、驗證後送出

  • RWD- mobile version

    Carefully design the width, padding, gap, and RWD, to avoid broken size, display issues, and uncomfortable experiences.

  • Every state of file-uploading

    state: upload= blank, success, fail. support= true, false.

  • Error states of form-filling

    Design error states of all possible filling situation. some information have default state like radio and checkbox.

  • First sight- Problem selection menu

    TabBar as 1st filter, than Left-side menu as 2nd filter (top menu for tablet & mobile ).
    The problem item's background will be highlight if selected.

  • Divide the questions(for 7~12 item) into 3 categories to reduce the mental load.

    Classify the questions into- 聯絡方式、問題細節、驗證後送出

  • RWD- mobile version

    Carefully design the width, padding, gap, and RWD, to avoid broken size, display issues, and uncomfortable experiences.

  • Every state of file-uploading

    state: upload= blank, success, fail. support= true, false.

  • Error states of form-filling

    Design error states of all possible filling situation. some information have default state like radio and checkbox.

Learning

Be more familiar with the components commonly used when filling in forms, as well as their compatibility and limitations. And how to clearly display the status of file upload results.

Some intro of design progress

  • PM's wireframe- Not only the need of UI redesign but also some changes of the form filling process.

  • Discover the different UXUI design of problem identify and fill-in by comparatives collection

  • Ver.1 was 6 months before the confirmed redesign (ver.2)

  • Understand the criteria needed to fill in for each problem. Discuss with the easier classify way for better experience.

  • Tried many attempts at layout and switching on the problem classification.
    List the questions all at once or filter them by category?

  • Design all status & situation (e.g. auto-fill, error status, file-uploaded and failed .)

  • Design all mockup for each problem (x22)

  • PM's wireframe- Not only the need of UI redesign but also some changes of the form filling process.

  • Discover the different UXUI design of problem identify and fill-in by comparatives collection

  • Ver.1 was 6 months before the confirmed redesign (ver.2)

  • Understand the criteria needed to fill in for each problem. Discuss with the easier classify way for better experience.

  • Tried many attempts at layout and switching on the problem classification.
    List the questions all at once or filter them by category?

  • Design all status & situation (e.g. auto-fill, error status, file-uploaded and failed .)

  • Design all mockup for each problem (x22)

#4 Cooperate invite page

(Handoff, under developing)

Role & key partners

Me- Product designer / manager / PM

Collaboration
  • Receive wireframe from PM, discuss the details and iterate together.

  • Confirm the redesign range and develop limitations.

  • Design independently, report to manager to choose layout types.

Some intro of design progress

  • Wireframe from PM for me to redesign the ver.1

  • Inspired by collected comparatives

  • Ver.1 designed earlier then ver.2 for 4 months (different visual style)

  • Different attempts at design and layout

  • Different attempts at design and layout

  • Wireframe from PM for me to redesign the ver.1

  • Inspired by collected comparatives

  • Ver.1 designed earlier then ver.2 for 4 months (different visual style)

  • Different attempts at design and layout

  • Different attempts at design and layout

Learning

When there are simple reading info and input elements, how to design their relative relationship can make the screen looked comfortable and fluent interaction at the same time.