flux.io website design

Main landing page incorporates competition description,  as well as full page slideshow of the winning projects. 

Main landing page incorporates competition description,  as well as full page slideshow of the winning projects. 

Context

I interned at flux.io in January 2016 as an user experience designer. I worked on the Emerging Architects Design Competition website, re-designed their newsroom webpage, and redesigned company presentations to strengthen company branding and improve visual communication. 

Approach

I started by outlining the goals of the website: to encourage students to use Flux, to showcase Flux's capabilities, to recognize talented students, and to engage with Flux users. With these goals in mind, I began translating these goals to design elements for the website. I created wire-frames for several ideas and asked for feedback to iterate on the designs. After iterating several times, I finalized my designs in Sketch. 

 
 
Scrolling down leads to Honorable Mention section, with hover-over interaction that reveals project title

Scrolling down leads to Honorable Mention section, with hover-over interaction that reveals project title

 
Clicking on a block results in a popup box with project video, images, information, and "tags" that describe the project. 

Clicking on a block results in a popup box with project video, images, information, and "tags" that describe the project. 

 

flux.io newsroom

While at Flux, I learned the basics of HTML and CSS and implemented a fresh newsroom design for the website. 

Floating sidebar makes newsroom easy to navigate. 

Floating sidebar makes newsroom easy to navigate. 

 
The hierarchy of titles is simple but effective in highlighting Flux's latest achievements and recognition. 

The hierarchy of titles is simple but effective in highlighting Flux's latest achievements and recognition. 

 
This was an alternate design that I explored with Sketch before receiving feedback that the linear version was easier to read. 

This was an alternate design that I explored with Sketch before receiving feedback that the linear version was easier to read. 

 

Skills Practiced

Wireframing, web design, Sketch, user testing, HTML, CSS

Results

Overall, I learned a lot about the web design process at Flux, while keeping responsive and mobile design principles in mind. 

The Emerging Architects website and newsroom page were hosted on the Flux website for more than a year, until the website went through a complete overhaul.