HeroX Website Redesign
Freelance UX/UI + GRAPHIC DESIGNER at elevenSeven
Type: UI/UX and Graphic
Tools: Sketch, InVision, Zeplin, Adobe Creative Cloud
HeroX Website Redesign was a 3-4 month long project. Working along with my supervisor and the developer from HeroX, I created a new user interface design for desktop, tablet (portrait and landscape) and mobile.
As a UI/UX designer, I worked on usability analysis, project proposals, new style guides and wireframes. Using Zeplin, I shared the final prototype and all illustrated elements with the HeroX developer and his team. Creating smooth user flow and clear visual hierarchy to help users navigate the website was my goal for this UI/UX project.
WHAT IS HEROX?
HeroX is a crowdsourcing platform where innovators and solution seekers can come together and collaborate. HeroX provides service to many companies and organizations by helping people create a community where they can host challenges to solve problems and attract talents they need to solve the problems.
Wireframes and Prototypes
Three Objectives:
Consider what should be above the fold
Add any missing information, steps or visual cues to make it easy to navigate the website
Create user interface layout for desktop, tablet and mobile
Pages I redesigned (prototype screenshots shown in the next section):
Landing page
Pricing page
How it works page
Partnerships page
Forum
*Currently, other pages are in the process of being implemented. The bolded ones are the approved designs.
My responsibilities:
Organize and update:
Project proposals (competitor analysis, list of requirements, client information, estimated project hours, etc.)
Assets (logos, images, illustrations and webpage copy)
Analyze and document:
Sitemap
User flow
User experience and user interface evaluation results
New design elements for redesigned webpages and style guide
Design:
Additional icons to represent a new text section or a feature
Web interface for desktop, mobile and tablet (portrait and landscape)
For the HeroX website redesign project, our client asked to create a new interface design for five different sections on their responsive website. Our client requested to add an interactive prototype since it was difficult to understand the user flow of 40+ screens. With a quick research, I implemented Sketch plugins to speed up the design process. Then, I quickly learned to use Invision to create an interactive prototype which helped with smooth peer feedback sessions after.
I tested the prototype multiple times to make sure the pages were connected correctly and left comments on the pages to notify the clients about the prototype status. Categorized pages, icons, vector illustrations and style guide elements on Zeplin ensured smooth handoff to the HeroX developer and their team.
Visual Design
Finding out which combination of colour backgrounds work with the texts and the images was the difficult part of redesigning webpages. I made sure to consistently use the main three colours (orange, grey and black) from the original HeroX style guide.
If you are curious about in-depth documentation about the project, feel free to contact me by email or LinkedIn!
