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
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
Deliverables
Hi-Fi Wireframe & Developer Handoff
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
Dashboard
Sign-up Overlay
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
Sign up Overlay- Desktop
Sign up Confirmation Overlay- Desktop
Responsive
Sign up Overlay- Responsive
Sign up Confirmation Overlay - Responsive
Dashboard
Desktop
Responsive
👩🏻
👩🏻
-
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.
Pages
Contents
Inspect Information
Export Assets
Size, Spacing, Color,
Typography, Position,
CSS, etc.
Annotations
-Annotate visual design specifications
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
Annotations
-Annotate states, constraints, rules, and actions.
Accessibility evaluation
-We measured accessibility by using the a11y checklist and Figma Plugin
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”
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