Hello, I am Elle.
I am a UX /Product Designer. I recently relocated to New York from Silicon Valley. I have worked with McGraw Hill Education, Stanford University, Boeing, John Deere, IGT, Jamba Juice and others. I design highly functional products, work fast, and produce clean prototypes. I can save your team time and money with my experience.
Check out some of my workHackathon Projects
Winner at Techcrunch Disrupt Hackathon 2015 - New York
- "Fashion Smash" fashionsmash.nyc - Zalando.co.uk API
May 2, 3 2015
Winner at Techcrunch Disrupt Hackathon 2014 - San Francisco
- "Should I Use My Bike?" - Weather Underground API
September 7, 2014
Here's some work I've done
Basil and Barns - Farm Villa
Squarespace Website
Project Manager & Site Designer
Squarespace Website / Social Media Accounts
The Situation
Basil & Barns is a collection of farmhouse villas and hotel in New York’s Sullivan County. They are in development and needed to build a website, manage and create social media accounts.
My Role
Built a website in squarespace. Created fact sheets and property documents. Performed document translations between Japanese and English
- Squarespace
- Wireframe
- Social Media Accounts and Posts
The result
By utilizing squarespace, managed to complete a site in a week. Facebook, Twitter, and Instagram accounts ready.
Namesake Cheesecake Menlo Park California
Bootstrap Website
Project Manager & Site Developer
Bootstrap Website
The Situation
Namesake Cheesecake was voted Best Bakery in Menlo Park 2015. It was founded by Cherith Spicer to honor her dear family friend, Cherith Lorraine, for whom she was named. She is proud to have her cakes served at the Palo Alto University Club, Stanford Park Hotel, Apple Inc, LinkedIn, Facebook, Charles Schwab, Menlo Circus Club, Just Catering, Catering by the Other Woman, Catering by Gourmet Lunch, Indochine, Mike's Cafe, Solite Cancer Cafe Stanford, Old Pro, Alice's, Osteria. Namesake Cheesecake also serves catering parties, work functions, events, weddings and daily cravings.
Namesake's Challenge
Namesake is a one-person operation. Her time was being inefficiently taken up with slow telephone orders and frequent calls with questions about her services and products.
My Solution
Design and build a website using Bootstrap. Add integrated google map, quick-call button, and question section. Curate and utilize existing Namesake Cheesecake Facebook and Instagram images for rapid prototyping to minimize owner's cost and time.
- Bootstrap
- Wireframe
- Photoshop
The result
Store location, hours, types of cake decoration, and number and email for ordering are clearly listed. Since site has been live, more orders from quick-call button on mobile instead of slow phone orders and fewer calls for questions.
City College of San Francisco - Dance
Bootstrap Website
Project Manager & Site Designer/Developer
Bootstrap Website
The Situation
The Dance Department at The City College of San Francisco was suffering from low enrollment numbers. The Dance Department needed to find a way to advertise their low-cost dance classes to the general public.
My Role
Consulted with The City College's Dance Department to design and deploy a revamped, highly accessible website
- Design
- Wireframe
- Marketing Strategy
- Content Strategy
- HTML5 & CSS3
- Implement Twitter Bootstrap3
The result
Consulted with The City College's Dance Department to design and deploy a revamped, highly accessible website
1st Draft - Landing Page
This is the wireframe indicating what the website really is.
All information related for this site is here.
2nd Draft - Page 01
Higher fidelity wireframe. Added colors and distinguished buttons to show contrast between old and new versions.
1st Draft - Page 02
Scrolled down to the second page. Utilizing a single html file for the better web performance - fast loading.
2nd Draft - Page 02
Added higher fidelity wireframe, colorized layout and distinguished buttons. Also added more detailed information.
2nd Draft - Page 03
This is the "how it works" page. There will be many new students who are not familiar with community colleges' complicated registration systems. I provided visual aids and basic steps to simplify the process for registrants.
3rd Draft - Completion - Page 01
3rd Draft - Completion - Page 02
McGraw Hill Education
Design Style Language Guide
Project Manager & CSS Coder
DESIGN STYLE Language Guide
The Situation
While I was at McGraw-Hill the existing design paradigm was to build page by page for their teaching platform website. This is obviously not a way to maintain the growth of a platform. I met some resistance from the existing design and project staff on changing this paradigm. I ended up coding and building a working proof-of-concept that included a consistent visual design guide, explanations from tutorials.
Tools
- Design
- Content Strategy
- HTML5 & CSS3
- Twitter Bootstrap3
Result
Taking this pro-active approach, I was able to convince UX manager I reported to to get the new design paradigm implemented and put on the product road-map.
FashionSmash.NYC
Techcrunch Disrupt NYC 2015
Fashion Gaming and Shopping
UX/UI & HTML5 Coder
Fashion Smash
Zoland API Winner at Techcrunch Disrupt Hackathon NYC 2015
Inspiration
Inspired by office conversations between Pasha Riger and Chris Franco at Miner Labs. Combined with an affiliate monetization plan where all the affiliate sales made would go to charity every month.
How it works
Sign in. Try to guess which product is more expensive from looking at the product photos. Save product you like for later. Buy them. Have fun.
Challenges I ran into
Tried to set up a new angular-mean-stack-seed project and all the tooling at the start of the hackathon. Total Fail. Wasted 2 hours. Went back to a simple node-angular seed project I'd used years before.
Accomplishments that I are proud of
We pulled it off and it works!
What I learned
Don't try to set up new technology at a hackathon. Don't be evil.
What's next for Fashion Smash
A couple of iterations and affiliate links, and this could actually be a fun shopping game, where you also help make the world a better place by donating to charity.
Built With
javascript, node.js, angular.js, redis, mongodb, and bootstrap
My Role
- HTML5 and CSS coding
- Wireframe
- User interface and visual design
The result
iLinksystems Mobile App
Client's Mobile App
UX Designer
Mobile Apps
iLinkSystems
My Role
- Wireframe
- User flows
McGraw Hill Education Prototype
Working Prototype using Photoshop
HTML5 Prototyper
McGraw Hill Connect Prototype
The Situation
McGraw Hill Connect is a digital teaching and learning platform that saves students and instructors time while improving performance over a variety of critical outcomes.
McGraw Hill Connect Challenge
After design teams completed interface design for login, registration, payment etc, there was no reasonable way to test the flow. The design team in Paris and NYC were working separately, the product had a user testing scheduled for the next day and the product team was running out of time.
My Solution
Gather the visual design elements that the teams had produced and create html pages by slicing images in Photoshop. Add working input boxes for email, password, payment; implement test areas to check students' interaction with the product on log in, registration, purchase, and landing. Prototype all controls in order to test the flow.
- HTML 5
- Sublime Text
- Photoshop
The result
The team was able to meet the deadline the next day and conduct user testing with students.
McGraw Hill Connect My Course Prototype
Working Prototype using Bootstrap
HTML5 Prototyper
McGraw Hill Connect My Course Prototype
The Situation
McGraw Hill Connect design team just had completed a new look for the Connect Platform. Visual Design flat image mock ups were ready to be viewed by executives at the company conference. It was important for McGraw Hill to announce a new look for their main product, Connect.
McGraw Hill Connect Challenge
The new design had features such as accordions, dropdowns, and hover menus; however, the design team had only prepared static images of the final pages.
My Solution
Go ahead and build a workking prototype. I knew it would not take too long to build it since I utilized a bootstrap template.
- Bootstrap
- HTML5
- CSS
- Sublime Text
The result
Not only it was successful in communicating the desired functionality with developers, but also executives loved it and they began to use the prototype whenever they had an opportunity to introduce their new design. It was great for designers to see how the design they worked on functioned as a working site.
My early Works
Web & Prints
My design from 2003 to 2007
My Role
As the owner, I completed from concept to completion. Consult with clients, hear their stories, ask questions and deliver the product that they are happy with.
Tools
HTML5, CSS3, Twitter Bootstrap, ZURB Foundation, Materializecss, Sublime Text, Git, Javascript, Sketch, Squarespace, Photoshop, Illustrator, Google Analytics, InVisionApp, Mockingbird, Evolus Pencil, Zen Desk, Fetch, and Firebug
Keep in Touch with me
shihoaloha@gmail.com