Stakeholder Interviews
We met the team to discuss their plans for the website. The website had to represent Cyberbay's platform and inform its two user types on how it can help them with their initiatives. We also discussed any ideas and preferences they may have in terms of the website’s aesthetics. They already have a logo and a color palette at hand. So I only needed to decide on the look and feel of the website.
User types:
1. The Corporates represent companies looking for cyber professionals to QA their software.
2. The Bounty Hunters represent Cyber Security professionals looking for opportunities to earn extra income and hone their skills.
Website Strategy / Structure
It’s important to have a clear roadmap of what we’ll be building so I created a sitemap. This will also make sure that the whole team is in sync. I’ve laid all the pages that I thought we should have, including its specific sections. I’ve also separated them into phases. The timeline for the project is really tight, so we planned in at least rushing phase 1 as our MVP. Phase 2 will only be worked on once phase 1 is finished.
After the site structure and the look and feel was agreed on, now it’s time for re-search!
Wireframing
I can’t exaggerate how much value wireframes have in lessening changes down the pipe. I spent a day to create wireframes for all the phase 1 pages. Usually I structure each page to answer a usual narrative:
1. What is this product/service? (summary for above the fold).
2. What is this product/service? (More detailed).
3. Who is this product/service for?
4. Why should we trust you? (testimonial, companies we’ve worked with).
5. I’m interested! How do I learn more (CTA taking them to the other pages).
6. I want this product/service. How do I get this (CTA to buy, contact).
Also while creating these, I’d also have the interaction design in mind. How each section will be developed by the front end developer.
Moodboard
Here come’s the fun part. Scouring behance, Pinterest, and Dribble for beautiful but sometimes unrealistic mockups. It’s a good idea to try to capture the client’s taste in terms of look and feel. Sometimes what is discussed is interpreted very differently by various stakeholders. Expectations usually also vary in terms of how elements are interacted upon.
High-Fidelity
Our client introduced us to this shiny new software called “Mid Journey”. Its basically an image drawing AI based on prompts dictated by a user. We generated images and edited them in photoshop to fit them to the site.
