Gabriel Djan,
BCompSc
UX Designer who loves problem solving and emphasising users and clients.
Revamp Website Concept
Develop a B2B agency website design to enhance user experience
Sector
B2B agency, Education, Community
Challenge
The website needs to be redesigned to be more user-friendly, add more sophisticated features and visual design to enhance their targeted audiences
My Role
Information Architecture, User Interface, User Experience, Web Design and Testing
Project Time
Ongoing. The project will be delivered in an incremental production-delivery approach with Talent Search and Contact Us pages as initial release
PROJECT #3: CODE SYDNEY WEBSITE
Planning And Analysis
I'm going to stick to this Planning and Analysis structure as it works really well and give us a clear direction which way we should go. First step is starting to analyse the current existing website to get the big whole picture of the system and exchange ideas among team members. We know that it's not our goal to have extensive discussion or to find perfect solutions at this stage, but rather to enable us to make quick decisions and drive us to where we want to achieve in limited time span.
Step One
Brand analysis and site structure analysis as per worksheet
Step Two
Based on our knowledge of the brand and our observations of the website, define the user persona
Step Three
Everyone writes three 'user stories' to define the features for a new App/website
Step Four
Based on the website and user stories define the elements of an App/website
Step Five
Try not to get bogged down the content- focus on the journey Content Analysis. How many steps is practical? Use real words for the headings and boxes with thumbnail drawings but try not to over plan the content.
Step Six
Photograph with the start paper prototyping of our App/website as a whole.
Analysis of Brands, Users, Stakeholders, Customers Interactively
We examine the current existing website and had a brainstorming session with the team and client, then reached to the following:
-
Vision - People-centred organisation where benefits are shared with the community
-
Mission - Facilitates joint learning and Pay-As-You-Feel projects in aid of person's employability
-
Brand Essence - Provides real-world experience through Pay-As-You-Feel projects
-
Value Proposition - Customers accept beginners to work on their real-world projects and in return get a Pay-As-You-Feel payment option.
-
Key Beliefs - Servant Leadership
-
Target Audience - Learners, PAYF Customers, Employers
-
Key Market – Sydney
-
Key Competitors - We do not see others who are doing the same thing as competitors. In fact, we need more organisations like us
-
Competitive Advantage - We always try to put some structure and discipline in everything that we do
-
Voice Words - Empathetic, Competent, Organised
User Persona
Next, moving to the process of identifying our target groups, or user personas. Based on analysis, our website target audience are Members (Learners), PAYF Customers and Employers (Recruiters). As of the moment, we think that majority of those who are visiting our website are the Learners group. Judging from client's personal observation, they do not have that much learners who are in their early 20s (eg. University graduates). Majority of their members are mid-career people who want to either enter the world of coding or switch careers. While the PAYF customers are mostly NFPs, SMBs or founders. Above all, employers visiting our website are our ultimate goal.
User Story
After defining our user personas, I then directed our users to tell us their stories and I have successfully collected five user stories and fortunately, they covers all of our user groups that we have identified.
The following are the user stories:
-
Member says, I want Code Sydney to help me develop relevant skills and experience so that I can be a competitive job applicant to junior developer roles.
-
Member says, I want to be able to work with other members and gain their confidence so that they can refer me to available junior developer roles in their network.
-
Member says, I want to join group of enthusiastic and active people to work with voluntarily and make friends.
-
Recruiter says, I want to be able to verify a member's capabilities and work ethics so that I can endorse his/her job application to the next level.
-
PAYF customer says, I am currently bootstrapped and want to consider volunteer developers to work on my projects.
Swot Analysis
User Persona
User Persona
User Persona
Elements of Website
Based on the information and analysis above, I identify what will be the app/website elements. Talent Search and Mentors are in difficult category, as these two involve complex database and back-end coding to pull out the data then modifying them.
Content Analysis, User Journey, Information Architecture
We are emphasising minimalist and simplicity design approach . Using the elements that identified, I construct an overview site structure and then I start to draw the Site Structure on paper. As a start, Site Structure with most basic features based on my analysis and research and will add extra features into it at later stage if needed.
Using the Site Structure as the guidelines, I draw the App/Website Flow and Site Map which will guide me to the next steps, paper-prototyping and wireframing.
Website Elements
Site Structure
Web Flow
Site Map
User Journey - Recruiting Talents
User Flow - Recruiting Talents
Prototyping
Now, after the planning and analysis process above, it's ready to proceed to the next stage, prototyping and wireframing.
Paper Protoyping
Before creating the digital version, paper prototyping was created. These will help me to visualise better in details when developing wireframing and interactive prototyping at later stages of development.
Paper Prototype
Paper Prototype - Recruiting Talents
Wireframing
Moving to next step, creating wireframing. Wireframing is for designing a website service at the structural level. It also to lay out content and functionality on a page which takes into account user needs and user journeys.
We want a clean and simple design yet aesthetically pleasing eyes and easy to use for users.
For the header, there will be Code.Sydney logo and hamburger icon that serve as easy navigators for user to go back to homepage. I also added a "Search" function for user to search for anything in this website easily.
As for the "Talent Search" page itself, I want to catch user's attention by the second user lands to this page. It contains one highlighted Talent's profile with a "Full Profile" button, tiles of all Talent's photos and brief profiles, "Search" function and a drop-down box "Filter by Role or Skills" functions.
- Talent's profile: blurb descriptions of the talent as overview to give the user a brief idea about the talent.
- Full Profile" button: once user hits on it, taking user to the page where the Talent's full profile will be shown in details.
- All Talent's photos tiles : user will be able to browse through all talent with the carousel model without have to scroll up and down too much and maintaining screen space efficiently.
- Search function and Filter by function: for user to easily search for Talents that matches user's criterias.
While the "Full Profile" page, will have similar elements as "Talent Search" page has, plus more elaborate of his/her portfolio works, skills, projects, location and certifications, complete with LinkedIn and Github URL links. And a call to action, Hire (Talent) button for user to contact and make necessary action steps to hire the chosen Talent.
Intreactive wireframe prototyping URL :
https://www.figma.com/proto/3RZfPlhhsNyeLNe5YZq3EE/Code.Sydney?node-id=141%3A0&scaling=scale-down
Wireframing Testing
After completed the wireframe prototyping, I run the test myself in Figma several times before launching it for user testing. At user testing, user feedbacks were collected through questionnaires.
Visual Research
To prepare for the next stage, Lo-Fi and Hi-Fi Prototyping, I get myself started doing research on visual design to define the colour, typography, graphic styling, web and device design and collect ten best pictures from current existing site. The purpose of this exercise is to define the style guide and all the visual design guide.
Style Guide
After gather all the data and extract them from my visual researchs, it's time to define the style guide. Element of the style guide are colours, fonts, sprites, glyphs, icons, symbols and buttons.
Color chosen is blue. Blue is one of the 2020 trending colors and it also implies "Trust". It's aligned with Code.Sydney vision and mission.
Visual Research - Colour
Visual Research -Typography
Visual Research - Web and Device Design I
Visual Research - Web and Device Design III
Visual Research - Colour
Visual Research - Graphic Styling
Visual Research - Web and Device Design II
Visual Research - Ten Best Pictures
Style Guide
Low-Fi Prototype
Low-Fi interactive prototype then is built to achieve better visualization and information flows/architecture.
Interactive Low-Fi protoype URL:
https://www.figma.com/proto/3RZfPlhhsNyeLNe5YZq3EE/Code.Sydney?node-id=97%3A199&scaling=scale-down
Hi-Fi Prototype
Based on the Lo-Fi prototype, I build its Hi-Fi prototype. This Hi-Fi prototype would be the closest to the final design in terms of details and functionality. It should cover both the product user interface (visuals and aesthetics) and product user experience aspects (interactions, user flow and behaviour)
Interactive Hi-Fi prototype URL:
https://www.figma.com/proto/3RZfPlhhsNyeLNe5YZq3EE/Code.Sydney?node-id=97%3A13&scaling=scale-down
Hi-Fi Protoype Testing
We are currently at Hi-Fi Prototype testing, questionnaires sheet have been sent out to the users. The questions are broken down into four sections: Structure, Content, Aesthetics and Communication. On the right-hand side there are numbers (number 1 to 10) to rate how good is the corresponding item in the list, with number 10 is the highest score.
Prototyping- Desktop
Ideally when designing desktop prototype, all elements that present in mobile prototype will be carried forward into the desktop prototyping with some additional extra elements added in.
Wireframing - Desktop
As per to date, we're at the stage of mobile Hi-Fi Prototype Testing and in the process of building desktop prototyping.