My Role
– UX Designer
– UI Designer
– WP Developer
– Project manager
Tools
Photoshop, Figma, Dreamweaver, WordPress, HTML/CSS, Google Drive, Jira, Confluence, Slack
Responsibilities
Competitive Research, Wireframing, Mockups, Prototyping, Iteration, Design System, Style Guide, Developement, Analytics, SEO
Stakeholders
Product Team: Ronan Gallagher, Steve Rivas, Pablo Celis
IT: Carlos Pellegrino, Cristian Espeche
Design: Viktoriia Horbunova
Timeline
November 2020 – January 2021
The scope of this project is to apply the new design to the website and bring content up to date with current information. The project will begin at the design phase demonstrating new goals by using wireframe and website mockups. Then working on development. The new homepage will have an animated asset created for the main banner and a video for the How It Works section.
I created a requirement document for easier team collaboration, to store access, overview responsibilities, track progress and deadlines, track cost and provide general details. All stages of this project were tracked in Jira, where I collaborated with my team.
The Goal:
- Improve user experience, interest and engagement
- Increase lead capture
- Bring more revenue
- Highlighting technical advantages
- Presentation tool
- For sales agents to access current software information
- Improve and modernize design and layout
- Improve SEO so Alpha products can be found easily via search engines
- Give access to website analytics
Iterative Process
Evaluation
Requirements
Design
Implementation
Testing / Review
1
Prospect
New prospects should be able to access product demo and prospects already familiar with the product should be able to use the website to easily communicate inquiries.
2
Sales Agent
A sales agent should be able to use the new website for marketing and training purposes
3
Dev Team
Internally, assigned dev team members should be able to easily log in and make adjustments
User Stories
As a user new to the product, I want to be able to view the product demo, so I can find out if the product is right for me.
As a user already familiar with the product, I want to be able to send an inquiry, so I can get in touch with someone who could get me started.
As a sales agent, I want to be able to use the website as a resource, so I can market the product and train other sales agents.
As a corporate development team member, I want to be able to have website backend access, so I can make adjustments.
Competitive Research
I reviewed websites of 4 competitors and their offerings, business size, target audience, and unique value propositions. Then wrote down positive and negative features and rated features. I reviewed desktop and mobile experiences, user flow, navigation, branding, and content placement.
Websites reviewed:
- grow.com
- marqeta.com
- primer.io
- memberstack.io
Wireframes
Combining user goals and needs, and my observation of top competitors’ websites shared wireframes of the homepage with stakeholders and iterated on their feedback until the final version was approved.
Mockups
Design Purpose
- Decrease the amount of clicks
- Improve lead capture
- Improve visual interest and user engagement
- Updated modern design elements
- Design consistency
- Improve overall user experience
- Highlighting technical advantages
- Improve SEO
- To show an organic story of Alpha’s products, advantages and achievements
- To improve showcasing of Alpha product
Mockups were created and shared with stakeholders for feedback. Once homepage design was approved I moved on to creating mockups for other pages.
Sitemap
Performance
- The website should run at an optimum speed (I used Page Speed Insights to analyzed and adjust any errors) and fast download speed
- The system should be able to support high traffic
- The website should run without interruptions while WP platform and individual plugins are being updated or pages edited
Security
- The website provides secure passworded access to the administrator area used by the dev and design team
- Password-protected access to front-end pages only for invited users
- SSL certificate for secure user browsing
Supportability
- Cross-browser compatibility
- Multi-device compatibility
Purchased Components
- Hosting – The website is hosted on a secure server with an active SSL certificate
- Domain Name
- WordPress Theme
- WordPress Plugins
Development Phases
The following phases were a part my responsibilities.
Testing Environment
Wordpress Installation
Plugins
Coding
Security
Launch
Maintenance
1
Wordpress and active plugins should be updated regularly to the latest version
2
Server and domain name renewal fees when due