top of page

2-Day Hackthon -

Pyxis Restraurant News

Landing Page & Dashboard, Desktop Web & Responsive Web

Role

UI/UX Designer 

Duration

2-Day Hackathon

Deliverables

Information Architecture

User Interface 

Wireframes

High-fidelity prototype

Accessibility Evaluation

Developer Handoff

68-684867_blue-folder-without-solid-line
109-1091148_blubird-job-front-end-develo
download_edited.png

Yes! Definitely, especially if they are all the same size.

Ok, will do. PNG works?

Would that be easier if we create the graphs as image files so that you can input into the html?

Overview

What we did: On a two-day collabathon with developers, we designed and implemented an ​accessible landing page for users​ and a ​dashboard for clients​ of restaurant news site.

Objective: 

  • Understanding the technical constraints and feasibility of a project.​

  • Understanding front-end web and mobile technologies such as CSS/HTML and Javascript in order to partner well with engineers.

  • Learning how to be an empathetic, respectful and productive collaborator.

Timeline

Frame 1.png

Deliverables

Hi-Fi Wireframe & Developer Handoff 

Screen Shot 2021-02-13 at 7.49.30 PM.png

Process

DAY 1

Got to know each other, aligned on routines and decision-making
👩🏻
👱🏼‍♂️
👩🏻
Digested and discussed the project brief, user profile/stories.
Target User Profile
  • Already aware of and incentivized to be on the client’s website.

  • Access the website via both desktop and mobile.

  • Are technically savvy, digital native.

Project Requirement
  • A single landing page for users.

  • A dashboard for the client.

  • Must be accessible: Use the ​a11y checklist

  • Responsive, browser-based site.

  • Must work in Chrome.

User Stories

"As a business, we need this landing page to represent our brand and entice the target users to join our group."

"As a business, we want to be able to see the data being collected from the sign-up in a dashboard. "

"As a user, I want to learn more about the client and their offerings."

"As a user, I want a way to sign-up to join the group."

  • Collaborated to sketch, shared design ideas, conducted information architecture, and contemplate technical constraints

  • Aligned on the MVP and a plan to get there

Information Architecture

Organization Scheme 

Ambiguous | Topic-oriented

Ambiguous | Audience-specific  

Organization Structure

The Database Model: Bottom-up

The Hierarchy: Top-Down

Landing Page
Screen%20Shot%202021-02-02%20at%203.39_e

Dashboard

Screen%2520Shot%25202021-02-02%2520at%25
Sign-up Overlay
Screen%20Shot%202021-02-02%20at%203.40_e
Screen%2520Shot%25202021-02-02%2520at%25

1:30 PM

latelunch
🍲  🍔  🍜  

2:30 PM

👩🏻
👩🏻
👱🏼‍♂️
  • Drafted digital wireframes of the overall layout 

  • Incorporated engineer's feedback into a new iteration of wires/prototype

  • Set up environment and back-end

  • Incorporated UX designers' feedback into a new iteration of environment

*Images are not to scale

Landing Page

Desktop

Landing Page Mobile.jpg

 Sign up Overlay- Desktop

Sign up Confirmation Overlay- Desktop

Desktop Sign up Overlay.jpg
Desktop Sign up Confirmation.jpg

Responsive

Sign up Overlay- Responsive

Landing Page Mobile.jpg
Mobile Sign Up Overlay.jpg

Sign up Confirmation Overlay - Responsive

Mobile Sign Up Confirmation.jpg

Dashboard

Desktop

Dashboard Web.jpg

Responsive

Dashboard Mobile.jpg
👩🏻
👩🏻
  • Started annotation 

👱🏼‍♂️
  • Updated & Completed layout (with annotations)

View only Figma file for engineer

-Given the fact that our engineer was comfortable working with Figma, we were able to tailor and organize our board to best suit his needs.

-Engineer had access to the information shown below.

Screen Shot 2021-02-11 at 7.16.47 PM.png

Pages

Contents

Inspect Information

Export Assets

Size, Spacing, Color,

Typography, Position,

CSS, etc.

Annotations 

-Annotate visual design specifications 

Screen Shot 2021-02-12 at 12.50.53 AM.pn
Screen Shot 2021-02-12 at 12.50.59 AM.pn

DAY 2

👩🏻
👩🏻
  • Plan and create content (text, images, icons, photos)

👱🏼‍♂️
  • Implemented layout

  • Did a warm handoff of the final content to engineer

  • Designed functionality and visuals

  • Implemented content

  • Did a warm handoff of the final functionality and visual design

  • Reviewed work done thus far, iterate as needed

  • Implemented functionality and visual design

  • Paired on implementation with UX designers

  • Reviewed work done thus far, iterate as needed

Hi-Fi Wireframe

Screen Shot 2021-02-13 at 7.49.30 PM.png

Annotations 

-Annotate states, constraints, rules, and actions.

Screen Shot 2021-02-14 at 4.52.04 PM.png
Screen Shot 2021-02-14 at 4.52.19 PM.png
Screen Shot 2021-02-14 at 4.52.26 PM.png

Accessibility evaluation

-We measured accessibility by using the a11y checklist and Figma Plugin

Screen%2520Shot%25202021-02-14%2520at%25

Example of changes

Texts with the hex code 8F8F8F changed to code 494949: 

  • Dashboard - Refine by - “MM YYYY”

  • Dashboard - Sort by - “Search” 

  • Landing Page - Sign up overlay - “Restaurant Goer”

  • Landing Page - Membership Benefits - “Enter your email”

  • Landing Page - Search bar - “Burger King, Thai” 

Back to School

Lessons Learned

  • Better documentation and version controlling, especially while having multiple people working within a Figma file. Making duplicate Figma files when making design iterations, this way the team does not confuse our developer & saves time overall on the designer end (the fewer questions the better).

  • Giving developers some time-blocked alone time to work.

  • Communicating as often as possible and regularly checking in with our progress allowed us to avoid spending unnecessary time going back and fix avoidable issues.

  • Getting started with the component library and sharing color & typefaces/ fonts earlier might help speed up the process

bottom of page