Design Challenge

Bee-lieve in purposeful digital experiences with DesignHive

Two-day design sprint during which we collaborated with software engineers to create a mobile-responsive website for a product development agency. On the final day, we pitched our brand to the judges and fellow participating teams.

Timeline

Team

Role

48 hours

Carl C

Lucy G

Jessica H

Eileen Z

UX / UI Designer

REQUIREMENTS

Brief

  • To design and develop a website for our product development agency, aimed at potential clients seeking product solutions.

  • The website will focus on showcasing our skills and projects as a team.

Tasks

  • Brainstorm a captivating agency name

  • Designing a visually appealing interface &

  • Creating a strong brand identity for our agency

Design Criteria

  • Mobile-first approach

  • Responsive design

  • Browser-based

  • Adheres to the a11y checklist for accessibility

MEET THE HIVE

Our team initially consisted of three UX designers and two software engineers. However, one developer had to leave early on. Nonetheless, we continued as a dedicated team of four.

USER STORIES

We were provided with six primary user stories that helped us understand the functionalities and features our users find important.

As a user…

  1. I want to understand who is on the team, their skills, and the kind of work they focus on

  2. The landing page should be visually compelling and easy to understand

  3. I am interested in reaching out to the agency via an enquiry form

  4. I want to feel that the agency is a legitimate business

  5. I am interested in the previous projects the agency has worked on

  6. I would like to read about their approach, any interesting challenges/discoveries, and the outcomes of those projects

TIME MANAGEMENT & COMMUNICATION

To ensure effective communication in our fully remote setup, we used Slack for its huddle and screen-sharing features

Upon receiving the brief on Friday evening, our first meeting on Saturday morning focused on open discussions about our strengths, weaknesses, and the feasibility of implementing our designs.

We also pinpointed our main deliverables, with developers highlighting the need for well-researched designs and wireframes that could be iterated upon based on their capabilities.

We established a timeline conscious of our time limitations and facilitated collaboration by creating a FigJam board.

The board included a team charter, detailed timelines, and a dedicated area for research. This approach offered our developer insights into the organizational and collaborative methods UX Designers typically employ with Figma and Figjam.

Considering the sprint’s rapid pace, we planned our tasks with time-blocking techniques to optimise productivity and minimise time wastage.

Nevertheless, we consciously made time for lunch and rest breaks to prioritise our wellbeing and maintain a healthy work-life balance.

BRANDING

We allocated 10 minutes to brainstorming potential brand names. We then voted on the most suitable one.

We ultimately selected ‘DesignHive’ as our agency name to embody a sense of collaboration, creativity and industriousness, mirroring the collective effort and innovative problem-solving abilities of a hive.

The bee motif proved to be a significant source of inspiration to our UX team, sparking ideas for engaging content and UX writing to be integrated across the website.

RESEARCH

Pros

  • Displayed clear ‘Contact Us’ CTA buttons (Call to Action), urging users to engage with the agency

  • Strong hero section showcasing the agency’s core offerings

  • Hero section enhanced with impact statistics and social proof

  • Strong UX writing

  • Optimised for mobile users - fully responsive and utilises hamburger menus for easy navigation

We identified the potential value of adding a category filter to the projects page, but after discussing its feasibility with our developers, we agreed it would be a ‘nice to have’ feature.

Developers noted that we might not have enough time to build out all the interactivities associated with this functionality given our limited time frame.

Considering our time constraints, we opted for a pros-and-cons approach to competitive analysis

This involved researching six industry leaders, from which we evaluated both their desktop and mobile-based websites.

We derived valuable insights into the best practice features that we could incorporate and adapt within our own project. This process informed our decisions on which elements needed to be prioritised.

Cons

  • Suboptimal content positioning, with social proof and impact statistics placed near the bottom of the page

  • Requiring excessive scrolling to access essential information on the landing page

  • Treating the homepage more like a portfolio instead of featuring selected works and guiding visitors to a projects page

  • Lack of a clear and compelling CTA

  • Inadequate optimisation for mobile users

CONTENT LAYOUT

We created a logical structure based on user stories that builds trust and integrated clear CTA elements through an enquiry form

Following best practices and information architecture principles from our competitive analysis, we developed a basic content layout for both the mobile and desktop versions of our landing and projects page.

COLLABORATIVE APPROACH

We scheduled hourly check-ins with our devs to ensure alignment and address any emerging concerns

During our initial check in, we were delighted to see the developers had successfully built a responsive mobile-to-desktop browsing experience

The envisioned carousel design was later modified to better align with our developers’ capabilities

Our developers communicated challenges in replicating the left-right arrow-based carousel and suggested a dot-based carousel instead. We gratefully accepted this recommendation and iterated on it to refine our design.

LOW-FI DEVELOPMENT

We created wireframes to serve as a blueprint for our agency's web pages, and to provide our developers with a basic framework to work with

The wireframes offered a skeletal representation of the layout and structure, enabling us to visualize the overall composition and flow of our website.

Handoff:

  • Upon completing the mobile landing page wireframe, we updated our developers on our design progress. As it was midday, our goal with the wireframe was to provide them with a basic framework to start building upon.

  • They then used the landing page wireframe to construct components, laying down the page’s foundation structure, and integrating responsive elements to ensure a smooth user experience across different devices.

HI-FI DEVELOPMENT

We used a UI kit in Figma to ensure consistency across the frames and effectively convey the design elements to the developers.

We immediately began working on the high-fidelity wireframes, while our dedicated team of developers focused on building the skeleton of the mobile landing page.

VISUAL DESIGN

A design system that evokes a sense of innovation, creativity and collaboration

Our aim for DesignHive's branding was to portray the agency as vibrant and approachable while upholding a professional demeanour:

  • The use of bright, engaging colours emphasises our strong commitment to creativity and innovation.

  • We chose a bold sans-serif typeface to convey modernity and clarity, ensuring that both the content and logo are easily legible.

  • The bee motifs signify our desire to attract clients who prioritize a collaborative approach to product development.

SETBACKS & WRAPUP

On the final day of our collab-athon, one of our developers abruptly left the team.

Despite our earnest attempts, we could not reach him. This left us with a significant setback: our development team was reduced to just Carl, who had to face the daunting task of completing the ‘Projects’ page within a tight five-hour deadline.

Nevertheless, we quickly adapted to the situation. The team gathered on Slack to strategize a new plan for the day. Carl, having honed his front-end coding skills overnight, was eager to tackle the rest of the build, while we the UX team focused on finalizing the presentation for our pitch.

Impressively, the mobile and desktop responsive page was coming along well, and we were all amazed by the amount of work accomplished in a single day.

We adapted our schedule to include the newly redistributed task of completing the ‘Projects’ page

Our sole developer had not only built the ‘Projects’ page but also implemented the ‘nice to have’ category filter feature.

Just before our presentation, we came together for one last team huddle:

  • As the dev, Carl walked us through the mobile and desktop versions of our website, demonstrating it’s various features and functionalities. We were particularly impressed by his inclusion of the aforementioned category filter feature, which enhanced the user experience by allowing projects to be filtered based on their service categories.

  • As the UX team, we made sure Carl was fully briefed on the flow of our presentation. We advised him on when to showcase the prototype, emphasizing key details and sharing the challenges he faced during its development. With a comprehensive understanding of the sequence, we felt prepared and confident about presenting our digital product development agency, DesignHive, to the judges and other participants.

Carl, our developer showcasing the final build

THE FINAL SOLUTION

Allow your ideas to buzz into brilliant solutions with DesignHive

View our prototype here

We won the ‘Best Pitch’ Award !

A testament to our team's cohesive presentation and resilience in overcoming unexpected setbacks. I am incredibly proud of this remarkable achievement.

My key takeaways were:

  • The unexpected departure of a team member showed how crucial it is to maintain a resilient mindset and the ability to quickly re-strategize and effectively redistribute tasks to meet deadlines.

  • Working closely with developers taught me the value of mutual understanding and insights into the technical feasibility of design ideas. It reinforced the need for us, as designers to understand development constraints and opportunities.

  • The success of this project was largely due to the open communication channels established among the team. Regular check-ins and the use of tools like Slack and FigJam ensured that everyone was on the same page, especially in a remote working environment.

    One prime example would be the early and ongoing communication with the development team regarding the feasibility of our designs. This proactive approach resulted in a smoother build process.