Embedded Files
The Brief
The Brief
Design and launch your own product development agency website within 2 days.
This site is aimed at potential clients who are looking for product development services. Your website will focus on showcasing the unique aspects of your skills, work, and projects as a team. Think of yourself as a collective of professionals who could offer their skills either jointly or individually to clients.
The name, design, and branding of your agency is entirely up to you.
We want to help startups grow sustainably, collaborating with them to shift the status quo and deliver impactful & socially conscious digital solutions.
We want to help startups grow sustainably, collaborating with them to shift the status quo and deliver impactful & socially conscious digital solutions.
Scope
Scope
The visitor should be able to understand who we are, what we do, our specialties as a group, and the kind of work we have done in the past.
MVP: landing page & project page
Nice to have: an ‘about us’ page, a blog, testimonials page, a services page, and/or a case study page.
2-day Collaboration Hackathon in June 2023
2-day Collaboration Hackathon in June 2023
Hosted by General Assembly, Australia.
Team: Jessica Wong (UX Design), Natalie Orsos (UX Design), Roxanne Liu (Dev), Dom Wong (Dev)
My Roles
My Roles
UX designer
UI designer
Deliverables
Deliverables
Branding
Lo- to Hi-fidelity prototyping
Usability testing
Project Tools
Project Tools
FigJam
FigmaDesign
Zoom & Slack
Google Slides
Who are Our Users?
Who are Our Users?
Potential clients interested in our software development and UX design services.
Visitors looking to learn about our agency and our team.
Technically savvy, digital native.
Users Needs
Users Needs
"I want to understand who is on the team, their skills, and the kind of work they focus on."
"The landing page should be visually compelling and easy to understand."
"I am interested in reaching out to the agency via an enquiry form."
"I want to feel that the agency is a legitimate business."
"I am interested in the previous projects the agency has worked on."
"I would like to read about their approach, any interesting challenges/discoveries, and the outcomes of those projects."
Research
Research
Understand best practice across other competitor/comparative websites.
Understand best practice across other competitor/comparative websites.
Understand what features to include in our MVP, visual design and content hierarchy.
Understand what features to include in our MVP, visual design and content hierarchy.
Design
Design
Brainstorming the Information Architecture of our website design with the developers.
Brainstorming the Information Architecture of our website design with the developers.
This allowed us to quickly agree on the website structure and content so us, designers, could start designing the low-fi for the developers.
Our Brand, Our Voice
Our Brand, Our Voice
Colour, typography and logo design
Splash of Colour
Splash of Colour
Orange signifies enthusiasm, energy, and social engagement so it reflects our agency's commitment to social impacts and community involvement.
Bold Impactful
Bold Impactful
We want to be seen bold and make an impact with our colours so we chose a warmer black as a background.
Good Contrast
Good Contrast
While we chose a warmer white for the text for better contrast for readability.
Modern Simplicity
Modern Simplicity
For our typography we chose Open Sans for its simplicity, neutral and friendly style which can effectively convey our message while maintaining a modern aesthetic.)
Why SHIFT?
Why SHIFT?
SHIFT, represents our digital agency that focuses on shifting perspectives , embracing change , and transforming start-ups through innovative digital strategies & transformative ideas.
We imagined our tone of voice to be…
We imagined our tone of voice to be…
Action orientated (using phrases such as “make change happen”…)
Collaborative, Human & Casual (for example by inviting the user to Let’s Chat!
We also added playful elements seen here to make the website feel more casual and friendly.
Bringing It All to Life
Bringing It All to Life
Reflections
Reflections
What I learnt during this weekend
What I learnt during this weekend
Communication is key
Communication is key
...especially in a team that hasn’t worked together.
Setting a rough timeline, checking in on each others progress, communication gaps in knowledge across programs was important to help set expectations and ensure we understood limitations of what we could implement.
Prioritise
Prioritise
Prioritising features to implement as well as understanding what developers need first up was key to a streamlined process. I.e. focusing on getting the content order, text, & padding before colour etc.
Clear handover
Clear handover
In the short time frame, we, designers, found that it was difficult to have clear hand over. We did this as best we could by sending regular updates to the dev team when certain pages were ready to implement. Ideally we would have liked to have a more structured handover process i.e. a package for fonts, branding, images so the dev team can set up variables early on.
Page updated
Google Sites
Report abuse